How to migrate from flash to html5 version?

Hi Ian,
For now, we decided to just migrate Flash 2.2 to HTML 5 2.2. I downloaded the 2.2 package from your download page and copied the flexmonster folder to my project. When the component is initiated I got "Uncaught TypeError: Cannot set property '_generatePosition' of undefined" error in the browser console. Please see my screenshot for more details. Looks like "_generatePosition" should be defined for "ui.draggable" widget. According the the browser network tab our "jquery-ui" is loaded before the flaxmonster.js file and contains the definition for the "_generatePosition". You can find our "jquery-ui" file here.
Any ideas what's wrong?
 

Hi Ian,
 
Thank you it helped. Have another question though. Noticed you changed the foramt for saved reports in 2.3 version. From XML to JSON. Is there a tool we can use to migrate existing XML saved reports to JSON version in case we want to migrate to 2.3 version?
 
Also, any way to make Calculated Values node to be expanded by default on this popup? 

Hi Ian,
 
Thank you! You are fast 🙂 Not sure if you saw my update to my last post, so posting the second question here again.
 
Any way to make Calculated Values node to be expanded by default on this popup? 

Hi Ian,
 
I have a few more questions:
 

1. Looks like the data is displayed differently for html 5 version for zero values. Here's a flash version screenshot. As you can see there's a drop for a yellow line. And there's an html5 version screenshot. The yellow line just abrupts so it's hard to see the drop. Anything we can do to make the html5 version display the data in the same way?
2. The pivot table doesn't work for me on IE 11. Do you support IE 11? No javascript errors in the browser console. No error alerts. No IE popups to allow a component to run. Just this page.
3. When you right click a cell of a calculated metric, a small "Drill through" popup is displayed but it does nothing when you click on it. Wonder if there's any way to not diplay it for a calculated metric cell.

 
Thank you!

Hi Ian,
 
Just to follow up on the prev post, regarding the grid not working in Internet Explorer. I can see the errors in the browser console:

SCRIPT438: Объект не поддерживает свойство или метод "slice" 
pivot.min.js, строка 1 символ 11043

 
Same error both for IE 11 (11.0.9600.18036) and IE 10 (10.0.9200.17607).
Here's a code sample from pivot.min.js
 
for(var E in this.sg){f=void 0==this.Zc[E]?[]:this.Zc[E].slice(0)
 
You iterate an array but when using for (x in y) approach it seems IE will iterate through all properties of the object including the "prototype" property which doesn't have a slice function.

Hi Ian,
 
Sorry for the confusion, “You do not have Flash Player installed” error message is our custom one when we fail to initialize the pivot grid. Please see the error details from my previous post where the method "slice" cannot be found

Hi Ian,
 
One more minor issue we noticed. We use "setReport" API method to refresh the pivot grid with new settings and we noticed that when "setReport" was called the fields popup got displayed and then hidden as soon as the pivot grid was updated.
Here's a screenshot of pivot grid normal view and here's a screenshot of the fields popup displayed while the pibot grid is being updated, triggered by "setReport" method.
It doesn't seem to be a big issue but it gives a feeling there's something wrong with the pivot grid.
 
Thank you!

Hi Dmytro,
 
Unfortunately,  I can't send you a code sample as it is not that easy to extract flexmonster related code from our project. It's hard to say which part of our code triggers that loop as variables and methods names are minified in the pivot.min.js file. But when I replaced

for(var E in this.sg)

 with

for(var E=0; E < this.sg.length; E++)

it worked for IE.

Hi Ian,
 
It works,  thank you! Any updates regarding the different way html5 version displays chart data when a value drops to zero?

Hi Ian,
 
Thanks for the update. Have a question on 2.3 version now. So I changed embedPivotComponent() with a corresponding jquery code according to the migration guide:

var pivot = $('#' + flexmonsterReporting.constants.flashContentTargetDiv).flexmonster({
  componentFolder: flexmonsterReporting.constants.flexmonsterPath,
  report: params.configUrl,
  toolbar: false,
  licenseKey: params.productKey
});

flexmonster.on('reportfileloaded', flexmonsterReporting.pivotLoadedHandler);

 
then in the pivotLoadedHandler function we call flexmonster.getReport() but it now returns null. Note, similar code worked fine with 2.2 version. flexmonster.getReport() returned a valid object. Also, I still keep using XML report file for 2.3 version. As far as I'm aware 2.3 is backward compatible and should work fine with XML report files. Any ideas why flexmonster.getReport() returns null ? In the browser console the request for report config file completes successfully and responds with 200 code and this report config file.

Hi Ian,
It works with reportcomplete but I wonder if it's a problem with XML config files only? If so, probably we should just convert to JSON. I'm asking because I've just noticed another issue. The following code doesn't work any more
 

flexmonster.expandData('Month');

It used to work just fine with html5 2.2 version. So please let me know if these bugs are XML config file related only.

Ian,
 
Yeah, it does, thank you.
Anyway, I think we should move to JSON report config format as XML is supported for backward compatability only as far as I understand. So I converted our XML report config to JSON with your converter. when initiating the pivot grid we specify a url wich returns a config file. I made sure that a new JSON report config file is returned and the response content type is "application/json". Here's the response data fetched with fiddler. However, in the reportcomplete event when I call getReport() an object is returned but the dataSource.filename and dataSource.dataSourceType properties are empty though I can see those properties in the JSON config file returned. Any ideas what I'm doing wrong? Does the JSON config file look ok to you?
 
Than you!

Hi Irini,
 
Thank you for the answer I will give it a try but I also have anothe question on HTML 5 2.2 version. The page we have a flexmonster grid on usually exceeds the screen height and there's a page scroll. If the scroll position is at the middle and the grid is visible and the data is expanded/collapsed either manually or by calling expandData method, the page scroll goes up. Also, noticed some suspicous code running when expanding/collapsing the data. See the screenshot here. Not sure if it's related but it's kind of wierd pageYOffset is called. Note, this bug makes our life terrible when analyzing data. One always has to scroll back where he was before expanding or collapsing the data and we need a fix ASAP
 
Thank you!

Hi Irina,
Note, it can be reproduced with almost any interaction with the grid.
Here's a video which triggers a scroll shift when adjusting a grid filter http://www.screencast.com/t/vUD2wWZNxTL  First, the main page is scrolled to the botomn. Then a filter is adjusted within the grid. Then after clicking OK button the main page scrolls up. I would think there's something wrong with our page but I can reproduce the issue when just calling flexmonster.expandData. 
We are working on migration to 2.3 version but it might take some time on our end and we wish we had a fix for this problem earlier.
 
EDITED:
yeah it seems it is fixed in the 2.3 version but if you can release a quick fix for 2.2 version it would be awesome
 
Thank you!

Iryna,
 
Here's how I initiate the grid for 2.3 version

$('#' + flexmonsterReporting.constants.flashContentTargetDiv).flexmonster({
 componentFolder: flexmonsterReporting.constants.flexmonsterPath,
 report: params.configUrl,
 toolbar: false,
 licenseKey: params.productKey,
 reportcomplete: flexmonsterReporting.pivotLoadedHandler,
 update: flexmonsterReporting.pivotUpdateHandler,
 cellclick: onCellClick
 });

 
flexmonsterReporting.constants.flashContentTargetDiv - id of the grid container
flexmonsterReporting.constants.flexmonsterPath - path to the flexmonster folder
params.productKey - product key
params.configUrl - url to an MVC action which returns a JSON report config data
flexmonsterReporting.pivotLoadedHandler - reportcomplete event handler
flexmonsterReporting.pivotUpdateHandler - update event handler
onCellClick - cellclick event handler
 
In the flexmonsterReporting.pivotLoadedHandler when I do flexmonster.getReport().dataSource.filename I still get undefined.
In the browser network tab I can see a successfull call to the mvc action specified as params.configUrl. 
Wonder if you have a project sample when a url to an mvc action is specified for report parameter? It seems that there's something wrong with how I pass the JSON back because if I replace params.configUrl with a JSON object everything works fine.
 
 
 

Hi Dmytro,
 
Thank you for your answer. The sample project helped to solve my problem.

Hi there,
Just run into another problem. When my report loaded in I changed the fields configurations a bit and saved the report config file via  flexmonster.save(reportName, 'server', 'completeHandler', saveUrl). Now when I try to load the report with newly generated json config file I got an error on the client side.
Please check this sample project. There are two mvc controller actions:
GetConfig - loads the report config file which was generated by flexmonster.save method. 
GetData - pulls csv file from disk
 
If you run the project both actions should complete successfully but on the client side, if you check the browser console you will see this error.  The error pevents the report from loading in successfully. Also, here's the original json config file based on which the json config file was generated by the flexmonster.save method. Not sure if it causes the problem but pleae note the original config file contains dimensionName and sortName data while the generated one misses that data.
Any ideas what causes the error?
 
Thank you!

Hi Dmytro,
 
Thank you for your answer. The bug turned out to be on our end but your answer helped a lot to find the culprit. The thing is that we serialize and deserialize the json config data when working with the config and the default serializer settings are to include null properties. This was fixed by specifying additional parameters for the serializer.
 
Thank you!

Hi Iryna,
 
Thank you for the info. It makes sense. There are also two more issues we noticed.
 
Fields popup issue

1. Download sample project.
2. Run it.
3. Open the fields popup and check the measures as done on the screenshot.
4. Try to drag one of the measures to the area right above the "Add calculated value" label as shown on the screenshot.

Expected result:
The measures is just removed from the "Drop&Arrange Values" area and one can click OK button to finish the configuration
Actual result:
The measure is removed from the "Drop&Arrange Values" area but nothing happens when you click on the OK button. Also, there's a JS error in the browser console.
 
IMPORTANT: you might not reproduce the bug once you try it for the first time. It's important to drag a measure just right about the "Add calculated value" so please try several times.
Also the issue could be reproduced on your demo page.
 
No data display label
 
Sometimes, we can see this label when a report is loading. It doesn't take long, probably a second but might be confisung for an end user.
 
Thank you!

Hi Iryna,
Thank you for the update. Please let me know when the fix is released.

Hi there, looks like I've found one more bug.

1. Please download the sample project. It just loads a csv file from my google drive storage.
2. When the data is loaded configure the report as shown here.
3. Then scroll to the bottom and check the Hour column values. You should see a few values without a space character as on this screenshot.  

Expected result: All Hour column values should contain a space character between "Hour" word and a corresponding number. For example, "Hour 00", "Hour 01", "Hour 02", etc.
Actual result: Some Hour column values don't contain a space character but the data file has a space character for all Hour column values.
 
Note, you might have to repeat the steps several time to reproduce the bug. Also there are usually different Hour values affected.
 
Just FYI, I used Chrome Version 56.0.2924.76 (64-bit) to reproduce the issue.

Hi Dmytro,
 
I don't want to just disable the message. I just don't want it to be displayed when there's data to show. It's ok to display the message when there's no data available. But for now the message is always displayed and then hidden when the data loads which might be confusing for end users. Does it make sense?

Hi Ian, thank you for the update. Also, asked the last question in a different thread with updated steps to reproduce.

Hi there,
Iryna said you were going to release the fixes on Feb 13. So wonder if you actually did it?
I mean the fixes for the the bugs described in the  January 19, 2017 post.

Hi Tanya,
Thank you for the update but what about the "No data to display" issue?

 Hi Tanya,
The issue with dragging measures to the hierarchies list doesn't seem to be fixed. I went to the download page. Filled the required fields and sent the form. I got an email with a download link and downloaded a zip package. Extracted all the files and ran "~\Pivot Table for CSV or JSON files\client\index.html" page. I still can reproduce the issue when dragging measures right above the "Add calculated measure" label. Here's the component version info which seems to match with your latest release notes and here's the same error I get when dragging measures right above the "Add calculated measure" label.
 

Hi Iryna,
I will, if you really make sure it's fixed this time.