mganley2000

Lines And Bars Not Displaying In Html5 Chart

Recommended Posts

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.

 

post-23548-0-62310600-1321458257_thumb.png

 

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites
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! biggrin.gif

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

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

 

Awaiting for your response.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now