Loader hangs ???

684 views
Skip to first unread message

Martin Noyes

unread,
Sep 3, 2019, 9:53:05 AM9/3/19
to Google Visualization API
My first attempt to use Google Chart. I'm using latest Firefox and I have placed https://www.gstatic.com/charts/loader.js in the head of the html file. Firefox just hangs on loading. No errors shown in console. Full head is:
<head>
    <title>Plot</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">       
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Plot.css">
    <script src="Plot.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);</script>      

</head>

I have the function drawchart() in my separate Javascript file (Plot.js). Must be doing something wrong.

Daniel LaLiberte

unread,
Sep 3, 2019, 10:27:54 AM9/3/19
to Google Visualization API
The problem could very well be in your drawchart function, so it would help to see the relevant parts.  If you could reproduce the problem you are seeing in jsfiddle, or similar, that would help make it very clear what is happening.

--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2f74f574-8c2a-47e3-ae65-93578767ca5c%40googlegroups.com.


--

Martin Noyes

unread,
Sep 3, 2019, 10:55:49 AM9/3/19
to Google Visualization API


On Tuesday, September 3, 2019 at 10:27:54 AM UTC-4, Daniel LaLiberte wrote:
The problem could very well be in your drawchart function, so it would help to see the relevant parts.  If you could reproduce the problem you are seeing in jsfiddle, or similar, that would help make it very clear what is happening.

 The drawchart function is vanilla straight out of Line Chart example:
function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }

The html div is:

<div id="curve_chart"/>

Daniel LaLiberte

unread,
Sep 3, 2019, 12:10:06 PM9/3/19
to Google Visualization API
Here is a jsfiddle with your code that shows it working:  https://jsfiddle.net/dlaliberte/4n6jvt3x/

There are a couple points to be careful of.  

* You need to make sure the loader is finished loading before you make any call to google.charts or google.visualization functions.    Doing the load in a script tag before you use it should generally work, but I notice you load Plot.js first, which may fail if you have any top-level calls to google functions, or maybe it is failing to load for some other reason.   Calling the google functions in the same script as your drawChart function will ensure both are defined and used at the same time. (Be sure to spell it correctly, as well.. "drawchart" vs "drawChart").

* Also make sure your div is defined before you use it in your drawChart function.  You should see a console error if you don't, however.

* The jsfiddle is little picky and non-obvious about how it generates a web page.  Note that the js block uses the "No wrap - bottom of <body>" option.

Hope that helps.

--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/51d8680a-e37d-4f4e-aeac-418590fcf99b%40googlegroups.com.

Martin Noyes

unread,
Sep 6, 2019, 12:00:15 AM9/6/19
to Google Visualization API
Thanks for your reply. I'm really not sure what caused the failure to load. I didn't edit anything but before I remember I had the Firefox console running. Maybe that somehow affected it. At any rate, it's working now and I've moved way beyond that point. My current problem is with the vertical axis numbers and axis title disappearing depending on what the data is I'm trying to display. It's a log/log LineChart. The horizontal axis is straight log and the vertical axis is mirror log. The ticks do tend to gather pretty close together depending on the data but I've reduced the type size to almost zero and it still disappears.
I've been looking for a thread on the forum but haven't found anything good yet on the topic.
Again, thanks for your response.

Daniel LaLiberte

unread,
Sep 6, 2019, 10:23:08 AM9/6/19
to Google Visualization API
The axis tick generation now tries hard to find some alternative that works, but it has the problem that if all alternatives have some problem (including overlapping ticks) then it gives up and doesn't use the 'best' alternative.  So the solution will typically involve giving the axis more space, or requiring larger intervals between ticks.

--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/635b46fc-a2c8-4ed1-ac22-8c0ee64ff50e%40googlegroups.com.

Martin Noyes

unread,
Sep 6, 2019, 10:34:07 AM9/6/19
to Google Visualization API


On Friday, September 6, 2019 at 10:23:08 AM UTC-4, Daniel LaLiberte wrote:
The axis tick generation now tries hard to find some alternative that works, but it has the problem that if all alternatives have some problem (including overlapping ticks) then it gives up and doesn't use the 'best' alternative.  So the solution will typically involve giving the axis more space, or requiring larger intervals between ticks.

HA! HA! I posted this as a new topic and immediately found the solution in an adjacent post concerning label formatting.
this solved all my problems. Instead of explicitly adding tick marks I changed options to gridlines: { count: -1}. That did the trick. Thanks.
 
Reply all
Reply to author
Forward
0 new messages