Menu
Download Free Trial

How to migrate from flash to html5 version?

Hi there,
 
We are going to migrate our flash version to html5. Wonder if there are any tips or best practices to do it? I managed to find a detailed description of migrating from 2.2 to 2.3 version but nothing about moving from flash to html5.
 
Thank you!

52 answers

Public
Ian Sadovy Flexmonster December 16, 2016

Hello Maxim,
 
Thank you for the question.
As soon as version 2.2 API is similar for both Flash and HTML5 versions you can refer to the Migration Guide.
Also, you are welcome to post questions here in case of any difficulties.
Hope this works.
 
Regards,
Ian

Public
mstrukov December 19, 2016

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?
 

Public
Ian Sadovy Flexmonster December 19, 2016

Hi Maxim,  

Thanks for an update.
As I see, you are using jQuery UI version 1.8.18. 
Could you please try to update this library or use minimum recommended version from the package (v1.9.2) or later?
Please let me know if it works for you.  

Regards,
Ian

Public
mstrukov December 20, 2016

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

Public
Ian Sadovy Flexmonster December 20, 2016

Hi Maxim,
 
Glad to hear it works.
As for the XML/JSON reports, please take a look at this blog post – Moving to JSON: converter for old XML reports
Also, please note that XML reports are still backward compatible with version 2.3.
Hope it helps.
 
Regards,
Ian

Public
mstrukov December 20, 2016

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

Public
Ian Sadovy Flexmonster December 20, 2016

Maxim,
 
As for the Calculated Values, the is no option to expand it by default.
 
Regards,
Ian

Public
mstrukov December 20, 2016

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!

Public
mstrukov December 21, 2016

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.

Public
Ian Sadovy Flexmonster December 22, 2016

Hi, Maxim!

  1. Yes, charts look a little bit different. We will investigate if there any option to display data in the old way.
  2. Yes, the component works with IE11. To be honest, I don’t understand how you can see “You do not have Flash Player installed”. Our demo package doesn’t contain such message at all. 
  3. Thank for reporting this. We will fix it in the minor release 2.307(ETA Jan 15)

Regards,
  Ian

Public
mstrukov December 22, 2016

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

Public
Dmytro Zvazhii Flexmonster December 22, 2016

Hello Maxim,
Could you please provide us with the code example for your case? It would allow us to reproduce the issue on our side.
Thank you.
Regards,
Dmytro

Public
mstrukov December 22, 2016

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!

Public
mstrukov December 22, 2016

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.

Public
Dmytro Zvazhii Flexmonster December 22, 2016

Hello Maxim,
Thank you for your help. We are going to fix the issue with the loop in the version 2.230 ETA Jan3.
Regards,
Dmytro

Public
Ian Sadovy Flexmonster December 23, 2016

Hello Maxim,
 
Regarding the issue with visible Fields List (https://www.screencast.com/t/GzMSjAxnEw), seems that it is fixed in the version 2.3.
Also, as soon as it is not a critical issue, there are no plans to fix it in the version 2.2.
 
Regards,
Ian

Public
Ian Sadovy Flexmonster December 29, 2016

Hello Maxim,
 
I trust you are well.
We have prepared a fix for the issue with IE – https://s3.amazonaws.com/flexmonster/adsupply/FLEXMONSTER-2016-ADSUPPLY-DEC29.zip
Could you please check it in your environment?
We would be grateful for your feedback.
 
Regards,
Ian

Public
mstrukov January 3, 2017

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

Public
Ian Sadovy Flexmonster January 4, 2017

Hello Maxim,
The issue is included into the current list of tasks and currently is under review. We will provide an update on 16th of January. If it easy to fix we will add it into the next minor release otherwise provide you with estimation for the future implementation. 

Regards,
  Ian

Public
mstrukov January 5, 2017

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.

Public
Ian Sadovy Flexmonster January 6, 2017

Hello Maxim,
 
Thank you for the detailed description.
In the version 2.3 we have introduced new reportcomplete event that works fine with getReport() method (example – http://jsfiddle.net/flexmonster/850zgrxr/). As for the reportfileloaded, it should also work, but there are few known issues with some events and calling getReport() inside the handler. These issues will be fixed soon.
Please let us know if it works.
 
Regards,
Ian 

Public
mstrukov January 6, 2017

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.

Public
Ian Sadovy Flexmonster January 6, 2017

Maxim, 
 
Thank you for the answer.
Actually, it is very unlikely that the issue with expandData() is connected to XML config.
More to that, I was able to reproduce it with JSON config.
So it should be fixed in the next minor release (ETA Jan 16).
Does it work for you?
 
Regards,
Ian

Public
mstrukov January 6, 2017

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!

Public
Iryna Kulchytska Flexmonster January 10, 2017

Hi Maxim,
 
Thank you for the detailed description of your question.
Please note that reportcomplete can be dispatched more than one time in the component. If you initialize the component using $.flexmonster() and define report property right inside the initialization call, as follows:
$(“#pivotContainer”).flexmonster({
  toolbar: true,
  report: “url-to-your-json-report-file”,
  reportcomplete: function() {
    console.log(flexmonster.getReport());
  }
});
dataSource.filename and dataSource.dataSourceType inside reportcomplete handler should be from the report JSON already.
 
If you initialize the component without report property and set the report later via API, the first reportcomplete will be dispatched after the initialization and flexmonster.getReport() will return an empty report in this case. The second reportcomplete will be dispatched in the result of report setting and flexmonster.getReport() will return the appropriate report. Thus, please make sure that you are checking the report in the right moment in reportcomplete handler.
 
Please let me know if the above information was helpful.
 
Kind regards,
Iryna

Public
mstrukov January 10, 2017

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!

Public
Iryna Kulchytska Flexmonster January 11, 2017

Hi Maxim,

Could you please send us a video to see how it works?
I think property pageYOffset is not related to the issue because we don’t use standard methods for scrolling.
Also, I want to inform you that scrolling algorithm was improved in the version 2.3. Not sure if it resolves this specific problem but it works much butter in any case.

Regards,
 Iryna

Public
mstrukov January 11, 2017

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!

Public
mstrukov January 11, 2017

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.
 
 
 

Public
Dmytro Zvazhii Flexmonster January 12, 2017

Hello Maxim,
Thank you for your questions.
1. Speaking about scroll back issue, there are no plans on fixing it in 2.2 version.
2. We prepared an MVC project example for you https://monosnap.com/file/qHjl5fUUX31Gihi2UZNizUEMZvIVz7 . Please let us know if it works for you.
Best regards,
Dmytro.

Public
mstrukov January 13, 2017

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

Public
mstrukov January 13, 2017

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!

Public
Dmytro Zvazhii Flexmonster January 16, 2017

Hello Maxim,
We have checked the configfile.json report and noticed that caption for volume measure has null value:
{
"uniqueName": "Volume",
"aggregation": "sum",
"caption": null,
"grandTotalCaption": null,
"format": "format1",
"active": true,
"formula": null
},

The null value is not correct for the caption and it causes the issue. If you remove it everything will work fine. Also, we followed the steps you had described, but we didn’t manage to get the same report with Volume caption equal null . Could you please give us some more information about the report you were saving? It will help us a lot in our investigation.
Best regards,
Dmytro.

Public
mstrukov January 17, 2017

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!

Public
Iryna Kulchytska Flexmonster January 17, 2017

Hi Maxim,
 
We are glad to hear that the issue is resolved.
The minor release 2.307 is available for download now. It contains several updates for you.
Also, the result of our investigation on the difference between HTML5 and Flash versions in displaying zero values in charts. Actually, zero values are displayed in both versions HTML5 and Flash. But Flash version displays non-existing facts as 0 on charts. Here is a small example illustrating this case. The following CSV:

Color,Country,Price
yellow,Canada,500
yellow,Germany,100
yellow,United States,1200
green,United States,1000
green,Germany,0

will be shown in Flash version as follows https://www.screencast.com/t/8UKEjtckCwJQ
and will be shown in HTML5 version as follows https://www.screencast.com/t/kljTpze0kX
Thus, from our point of view HTML5 version works correctly.
 
Kind regards,
Iryna

Public
mstrukov January 19, 2017

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!

Public
Iryna Kulchytska Flexmonster January 21, 2017

Hi Maxim,

Thank you for posting these issues.
We will provide the necessary fix in the minor build 2.309 (ETA Feb 13th)
Kind regards,
 Iryna

Public
mstrukov January 23, 2017

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

Public
Dmytro Zvazhii Flexmonster January 31, 2017

Hello Maxim,
We had investigated on the “No data to display” label issue and prepared a workaround for you. The label has the .fm-charts-msg CSS style. Therefore if you want to disable the label please add the following custom style:
 
.fm-charts-msg {
  display: none !important;
}
 
 
Also, we prepared a jsFiddle example for you http://jsfiddle.net/flexmonster/nco6vfd8/.
Please let us know if it solves your issue.
Best regards,
Dmytro.

Public
mstrukov January 31, 2017

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.

Public
mstrukov January 31, 2017

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?

Public
Ian Sadovy Flexmonster February 2, 2017

Hello Maxim,
 
Thank you for the feedback.
 
1) The issue with “Hours”. Could you please share the CSV file once again as it seems that we do not have an access to it (http://take.ms/dsnws)?
2) As for the “No data to display” message, it does make sense. We are already working on the fix.
 
Please let me know if it works for you.
 
Also, could we ask you to post the new questions in the separate threads?
So it will be easier to manage the requests.
 
Thanks,
Ian

Public
mstrukov February 2, 2017

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

Public
mstrukov February 14, 2017

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.

Public
Tanya Gryshko Flexmonster February 14, 2017

Hello Maxim,
I am glad to inform you that the minor release 2.309 is available for download now.
You are welcome to update the component. The issue with dragging measures to the hierarchies list was fixed.
Regards,
Tanya

Public
mstrukov February 14, 2017

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

Public
Tanya Gryshko Flexmonster February 14, 2017

Hello Maxim,
The issue with blinking "No data to display" label was fixed as well.
To see the whole list of fixes please refer to our Release notes.
Regards,
Tanya

Public
mstrukov February 15, 2017

 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.
 

Public
Iryna Kulchytska Flexmonster February 16, 2017

Hi Maxim,
Thank you for providing us with the detailed steps to reproduce.
We are sorry to inform you that the fix for this issue will be ready only in the version 2.310 ETA Feb 27. Will it work for you or you would like to get the update earlier?
Kind regards,
Iryna

Public
mstrukov February 17, 2017

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

Public
Iryna Kulchytska Flexmonster February 17, 2017

Hi Maxim,
 
Thank you for your understanding.
We will make sure it’s fixed in the version 2.310.
 
Kind regards,
Iryna

Public
Dmytro Zvazhii Flexmonster February 27, 2017

Hello Maxim,
I am glad to inform you that the minor release 2.310 is available for download now. You are welcome to update the component.
Kind regards,
Dmytro.

This question is now closed