Hi Aine, The code you copied isn't showing what you are doing with loading and calling your chart drawing function after the ajax call. If you want to copy more of your code, or better, point to a page running your code, then we can tell what you are doing and what the problems might be.
Generally, loading the visualization library takes some time, and you have to use a callback to do the next thing that depends on the visualization library. If you are calling google.load() when the page first loads, then you can also call google.setOnLoadCallback() to draw your chart. But since you also need to wait for the ajax call to finish, you have to wait for two things. It's simpler if you can chain things so your callback function is called first, at which time you can make your ajax call to get your data and then draw the chart. On Mon, Jun 29, 2015 at 9:02 AM, Aine Mitchell <[email protected]> wrote: > Hi, > > > > I am having an issue with my Google charts using an Ajax request to fetch > the chart data. > > > > Through debugging the code I can see the Javascript function which draws > my chart is being called. > > > > The issue is the chart appears for a few seconds then disappears. > > > > From looking through the forum I am thinking it is some kind of issue with > how the Google charts library is loaded. > > > > I am loading the library and calling the Javascript function which draws > the chart after the Dom has completely loaded. > > > > Could you perhaps give me some tips on what is the best way to debug this > situation? > > > > Any assistance you could give me would be much appreciated. > > > Below is a quick example of my chart script > > > > Many thanks. > > Aine > > > > <script type="text/javascript"> > > > google.load("visualization", "1", {packages:["corechart","gauge"]}); > > function drawHitRatioChart(dataPoints) { > > var data = google.visualization.arrayToDataTable([ > ['Label', 'Value'], > ['Hit Ratio', {v: 50, f: ''}] > ]); > > var options = { > width: 450, height: 140, > redFrom: 0, redTo: dataPoints, redColor: > "#C1DAD6", > yellowFrom: dataPoints, yellowTo: 100, > yellowColor: "#ACD1E9", > minorTicks: 10, > max: 100 > > }; > > var chart = new > google.visualization.Gauge(document.getElementById('hitRatioGraph')); > > chart.draw(data, options); > } > > > } > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
