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
