Lines And Bars Not Displaying In Html5 Chart

[mganley2000]

Has anyone had an issue where some charts look fine in both Flash and HTML5/JS, while others show fine in Flash, but the HTML5/JS fails to show the data lines or bars?

 

The data points display, but not the visual line. This is a line screenshot, where the line is simply not displaying.

 

 

 

A Doughnut2D charts shows fine in both, so some of the JS rendering is working.

[mganley2000]

I found that disabling the animation attribute solves the issue of the hidden line and bars. They show now, if you use animation='0' in lines and bars.

 

However, the data points on the line are not centered. Seems like some odd behavior. The demos I see on the FusionCharts site have animation enabled, so I cannot explain the problem.

[Guest Angshu]

Hi,

 

Thank you very much for your valuable feedback.

 

Happy FusionCharting!

[mganley2000]

The actual problem was that I was using JQuery 1.7. Many of the current Fusion Charts animations fail with the newest version of JQuery.

 

I had to backtrack to JQuery 1.6.4 for the animations on the bar and line charts to work again.

 

I'm hoping that the Fusion Charts JQuery plugin will be udated and tested with JQuery 1.7 sometime soon.

[Guest Angshu]

Hi,

 

Thank you very much for your valuable feedback.

 

We will definitely get back to you once there is any news from our end.

 

Happy FusionCharting!

[WaterCorp]

I'm having a similar issue using the MSCombiDY2D chart.

The "normal browser" view displays all data series OK, but on iPad/iPhone several plots fail to render: Ref= http://www.watercorporation.com.au/D/dams_storage.cfm

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum!

 

Could you please confirm the FusionCharts and browser version you are using?

 

Awaiting for your response.

[Subrata]

Hello,

 

Here is what I am facing. I have a page where multiple graphs are supposed to load on-demand through javascript and AJAX. the data is ghenerating correctly and the graphs are rendering too. But I cannot see the lines on all graphs only except the one I generate first after the page loads. In the attached image, the arrows are thee tyo expand/collapse each section. When expanded the AJAX call is initiated and data is transferred to JavaScript through a handler, which is working perfectly and an empty grapuh loads in every ocassion.

 

Moreover, if I collapse the graph with lines visible and then re-expand it the lines disappear. Surprisingly the tooltext are visible when I mouseover even on an empty graph.

 

Browser: Firefox 21. jQuery version: 1.8.3 minified. Source: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

 

Please see this screencast here http://screencast.com/t/GCpgCmg7 which will explain the issue more. Below I have attached generated graph XML and Jacascript function

 

Here is the JS function I have written:

----------------------------------------------

function generateAndLoadGraph(profileId, tableId, durationString, dateRange, commaMetrics, graphContainer) {
    var graphContainerId = $(graphContainer).attr("id");
    $.ajax({
        method: "POST",
        url: "graphloader.aspx",
        data: "action=chart&pid=" + profileId + "&opt=" + commaMetrics + "&tid=" + tableId + "&dur=" + durationString + "&dtstr=" + dateRange,
        success: function (msg) {
            var chartRandom = "chart_" + Math.random();
            if (FusionCharts && FusionCharts(chartRandom)) FusionCharts(chartRandom).dispose();
            chartRandom = new FusionCharts("../FusionCharts/MSLine.swf", Math.random(), "418", "250");
            FusionCharts.setCurrentRenderer('javascript');
            //myChart.addParam("wmode", "transparent");
            chartRandom.setXMLData(msg);
            chartRandom.render(graphContainerId);
        }
    });
}

 

Here is the XML being generated when I expand (please note I am using static value to generate same data for each graph for now):

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

<chart bgColor='f2f2f2' labelDisplay='ROTATE' showValues='0'>

<categories>

<category name='05-17'/>

<category name='05-18'/>

<category name='05-19'/>

<category name='05-20'/>

<category name='05-21'/>

<category name='05-22'/>

</categories>

<dataset color='FF0000'>

<set tooltext='Impression (2572.00)' value='2572.00' />

<set tooltext='Impression (2296.00)' value='2296.00' />

<set tooltext='Impression (2852.00)' value='2852.00' />

<set tooltext='Impression (2930.00)' value='2930.00' />

<set tooltext='Impression (3025.00)' value='3025.00' />

<set tooltext='Impression (2874.00)' value='2874.00' />

</dataset>

<dataset color='FF0000'>

<set tooltext='CPC (1.24)' value='1.24' />

<set tooltext='CPC (1.38)' value='1.38' />

<set tooltext='CPC (1.27)' value='1.27' />

<set tooltext='CPC (1.21)' value='1.21' />

<set tooltext='CPC (1.32)' value='1.32' />

<set tooltext='CPC (1.20)' value='1.20' />

</dataset>

<dataset color='FF0000'>

<set tooltext='CTR (0.03)' value='0.03' />

<set tooltext='CTR (0.03)' value='0.03' />

<set tooltext='CTR (0.03)' value='0.03' />

<set tooltext='CTR (0.03)' value='0.03' />

<set tooltext='CTR (0.03)' value='0.03' />

<set tooltext='CTR (0.03)' value='0.03' />

</dataset>

<styles>

<definition>

<style name='XScaleAnim' type='ANIMATION' duration='0.5' start='0' param='_xScale' />

<style name='YScaleAnim' type='ANIMATION' duration='0.5' start='0' param='_yscale' />

<style name='XAnim' type='ANIMATION' duration='0.5' start='0' param='_yscale' />

<style name='AlphaAnim' type='ANIMATION' duration='0.5' start='0' param='_alpha' />

</definition>

<application>

<apply toObject='CANVAS' styles='XScaleAnim, YScaleAnim,AlphaAnim' />

<apply toObject='DIVLINES' styles='XScaleAnim,AlphaAnim' />

<apply toObject='VDIVLINES' styles='YScaleAnim,AlphaAnim' />

<apply toObject='HGRID' styles='YScaleAnim,AlphaAnim' />

</application>

</styles>

</chart>

 

Please help!

 

Regards,

Subrata

[Swarnam]

Hi Subrata,

Can you please confirm the version of FusionCharts used? As per the video link, you are using an older version of FusionCharts along with jQuery 1.8 which results in a  compatibility issue.

 

Can you please try upgrading to the latest version of FusionCharts and check if your issue has been resolved?

Please Note: The latest version of FusionCharts XT has been made compatible with jQuery 1.8

Download link: http://www.fusioncharts.com/download/trials/

Hope this helps.