Hi,
You are using the API incorrectly.
The correct way is to use only once the load method, like:
google.load('visualization', '1', {packages:['corechart','gauge']});
And then use a unified drawing function, so your code will look like this:
<script src="https://www.google.com/jsapi";></script>
<script>
google.load('visualization', '1', {packages:['corechart','gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
drawChart1();
drawChart2();
}
function drawChart1() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);
data.setValue(0, 0, 'Auslastung');
data.setValue(0, 1, 0);
var chart = new
google.visualization.Gauge(document.getElementById('job-load'));
var options = {
width: 170, height: 170, redFrom: 90, redTo: 100,
yellowFrom:80, yellowTo: 90, minorTicks: 5
};
chart.draw(data, options);
}
function drawChart2() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Prozente');
data.addColumn('number', null);
data.addRows([
['Mo', 0],
['Di', 0],
['Mi', 0],
['Do', 0],
['Fr', 0]
]);
var options = {
width: 190, height: 120,
title: 'Auslastung in %',
legend: 'none'
};
var chart = new
google.visualization.AreaChart(document.getElementById('job-day-load'));
chart.draw(data, options);
}
</script>
<div id="job-load"></div>
<div id="job-day-load"></div>
On Tue, Dec 20, 2011 at 10:31 AM, M. Isler <[email protected]> wrote:
> I'm working on a web app using the GV API for statistics etc.
> We've implemented two charts at the moment, the first one (Gauge)
> works fine.
>
> We got the problems since I've implemented the second one (AreaChart).
> In IE or Safari there are no problems, just firefox.
>
> There are two scenarios:
> - Firefox takes a lot of time to load the chart. Finally the chart is
> not displayed and there are some JS errors (see below).
> - Firefox crashes down just after the chart is initialized (report
> also below).
>
> We are using jQuery and HTML5 on a LAMP stack.
> That should have any influence, but whatever..
>
> Hope you can help me. Thank you!
>
> -------------------------------
> code for reproduction
> -------------------------------
>
> <script src="https://www.google.com/jsapi";></script><script>
> google.load('visualization', '1', {packages:['gauge']});
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Label');
> data.addColumn('number', 'Value');
> data.addRows(1);
> data.setValue(0, 0, 'Auslastung');
> data.setValue(0, 1, 0);
>
> var chart = new
> google.visualization.Gauge(document.getElementById('job-load'));
> var options = {
> width: 170, height: 170, redFrom: 90, redTo: 100,
> yellowFrom:80, yellowTo: 90, minorTicks: 5
> };
> chart.draw(data, options);
> }
> </script><script>
> google.load('visualization', '1', {packages:['corechart']});
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Prozente');
> data.addColumn('number', null);
> data.addRows([
> ['Mo', 0],
> ['Di', 0],
> ['Mi', 0],
> ['Do', 0],
> ['Fr', 0]
> ]);
>
> var options = {
> width: 190, height: 120,
> title: 'Auslastung in %',
> legend: 'none'
> };
>
> var chart = new
> google.visualization.AreaChart(document.getElementById('job-day-
> load'));
> chart.draw(data, options);
> }
> </script>
> <div id="job-load"></div>
> <div id="job-day-load"></div>
>
>
> -------------------------------
> JS errors
> -------------------------------
>
> Error: out of memory
> Error: google.visualization.AreaChart is not a constructor
>
>
> -------------------------------
> FF crash report
> -------------------------------
>
> AdapterDeviceID: 0607
> AdapterVendorID: 10de
> Add-ons: [email protected]:1.8.4,[email protected]:
> 1.5,[email protected]:3.0.4,{8f8fe09b-0bd3-4470-bc1b-8cad42b8203a}:
> 0.17,{c45c406e-ab73-11d8-be73-000a95be3b12}:1.1.9,{e3f6c2cc-d8db-498c-
> af6c-499fb211db97}:1.12.0.1,{e968fc70-8f95-4ab9-9e79-304de2a71ee1}:
> 0.7.3,{972ce4c6-7e08-4474-a285-3208198ce6fd}:8.0
> AvailableVirtualMemory: 86196224
> BuildID: 20111104165243
> CrashTime: 1324369056
> EMCheckCompatibility: true
> FramePoisonBase: 00000000f0de0000
> FramePoisonSize: 65536
> InstallTime: 1320855252
> Notes: AdapterVendorID: 10de, AdapterDeviceID: 0607,
> AdapterDriverVersion: 8.16.11.9107
> D3D10 Layers? D3D10 Layers-
> D3D9 Layers? D3D9 Layers-
>
> ProductName: Firefox
> ReleaseChannel: release
> SecondsSinceLastCrash: 120
> StartupTime: 1324368949
> SystemMemoryUsePercentage: 71
> Theme: classic/1.0
> Throttleable: 1
> TotalVirtualMemory: 4294836224
> Vendor: Mozilla
> Version: 8.0
> Winsock_LSP: MSAFD-Tcpip [TCP/IP] : 2 : 1 : %SystemRoot%
> \system32\mswsock.dll
> MSAFD-Tcpip [UDP/IP] : 2 : 2 :
> MSAFD-Tcpip [RAW/IP] : 2 : 3 : %SystemRoot%\system32\mswsock.dll
> MSAFD-Tcpip [TCP/IPv6] : 2 : 1 :
> MSAFD-Tcpip [UDP/IPv6] : 2 : 2 : %SystemRoot%\system32\mswsock.dll
> MSAFD-Tcpip [RAW/IPv6] : 2 : 3 :
> RSVP-TCPv6-Dienstanbieter : 2 : 1 : %SystemRoot%
> \system32\mswsock.dll
> RSVP-TCP-Dienstanbieter : 2 : 1 :
> RSVP-UDPv6-Dienstanbieter : 2 : 2 : %SystemRoot%
> \system32\mswsock.dll
> RSVP-UDP-Dienstanbieter : 2 : 2 :
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/google-visualization-api?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
