First, you should call google.load only once, loading all of the packages
that you need:
google.load("visualization", "1", {packages:["corechart", "gauge"]});
Then, since both of your charts are using the same data source, it makes
sense to combine them together into a single drawing function (so you only
have to make one trip to the server to get your data):
function drawCharts () {
var queryOptions = {
csvColumns: ['string', 'string', 'string', 'string', 'string',
'number', 'number', 'number', 'string', 'string', 'string', 'number',
'string', 'string', 'string', 'string'],
csvHasHeader: true
};
var csvUrl = 'http://localhost/output.csv';
var query = new google.visualization.Query(csvUrl,queryOptions);
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var maxLicensebyDate = google.visualization.data.group(data, [3], [{
type: 'number',
label: 'License',
column: 6,
aggregation: google.visualization.data.max
}]);
var dataView1 = new google.visualization.DataView(maxLicensebyDate);
var chart = new
google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(dataView1, {
title: 'Daywise License Utilization',
hAxis: {
title: 'Date'
},
vAxis: {
title: 'License'
}
});
var dataView2 = new google.visualization.DataView(data);
dataView2.setColumns(6);
var GaugeChart = new
google.visualization.Gauge(document.getElementById('gaugechart'));
GaugeChart.draw(dataView2, {
width: 400,
height: 250,
redFrom: 18,
redTo: 20,
yellowFrom:15,
yellowTo: 17,
minorTicks: 5,
min: 1,
max: 20,
animation: {
duration: 400,
easing: 'linear'
}
});
}
}
google.setOnLoadCallback(drawCharts);
On Tuesday, February 11, 2014 9:59:27 AM UTC-5, Ashok Kumar wrote:
>
> Hi,
>
> I am not able to display 2 different graphs on the same HTML page. Please
> find below my code.
>
> <!DOCTYPE html>
> <html>
> <head>
> <title>Google Chart Example</title>
> <script src="https://www.google.com/jsapi";></script>
> <script src="http://code.jquery.com/jquery-1.10.1.min.js";></script>
> <script src="http://localhost/jquery.csv-0.71.js";></script>
> <script type="text/javascript">
> google.load("visualization", "1", {packages:["corechart"]});
> google.load("visualization", "1", {packages:["gauge"]});
> </script>
> <script>
> function Initalize()
> {
> drawChart();
> drawGauge();
> }
> function drawChart()
> {
> var queryOptions =
> {
> csvColumns:
> ['string','string','string','string','string','number','number','number','string','string','string','number','string','string','string','string'],
>
> csvHasHeader: true
> }
> csvUrl= 'http://localhost/output.csv';
> var query = new google.visualization.Query(csvUrl,queryOptions);
> query.send(handleQueryResponse);
> function handleQueryResponse(response)
> {
> if (response.isError())
> {
> alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());
> return;
> }
> var data = response.getDataTable();
> /*var GaugeData = response.getDataTable();
> var RowId = GaugeData.getNumberOfRows()-1;*/
> var maxLicensebyDate = google.visualization.data.group(data,[3],[{
> type: 'number',
> label: 'License',
> column: 6,
> aggregation: google.visualization.data.max
> }]);
> var dataView1 = new google.visualization.DataView(maxLicensebyDate);
> /*var dataView2 = new google.visualization.DataView(GaugeData);
> dataView2.setRows([RowId]);
> dataView2.setColumns(6);*/
> var chart = new
> google.visualization.ColumnChart(document.getElementById('chart'));
> //var GaugeChart = new
> google.visualization.Gauge(document.getElementById('gaugechart'));
> chart.draw(dataView1,{title: 'Daywise License Utilization',hAxis: {title:
> 'Date'},vAxis: {title: 'License'}});
> //GaugeChart.draw(dataView2,{width: 400, height: 250,redFrom: 18, redTo:
> 20,yellowFrom:15, yellowTo: 17,minorTicks: 5,min: 1,max:
> 20,animation:{duration: 400,easing: 'linear'}});
> }
> }
> function drawGauge()
> {
> var queryOptions =
> {
> csvColumns:
> ['string','string','string','string','string','number','number','number','string','string','string','number','string','string','string','string'],
>
> csvHasHeader: true
> }
> csvUrl= 'http://localhost/output.csv';
> var query = new google.visualization.Query(csvUrl,queryOptions);
> query.send(handleGaugeResponse);
> function handleGaugeResponse(response)
> {
> if (response.isError())
> {
> alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());
> return;
> }
> var GaugeData = response.getDataTable();
> var RowId = GaugeData.getNumberOfRows()-1;
> var dataView2 = new google.visualization.DataView(GaugeData);
> console.log(RowId);
> //dataView2.setRows([RowId]);
> dataView2.setColumns(6);
> //console.log(dataView2);
> var FilteredView = dataView2.toDataTable();
> console.log(FilteredView);
> var GaugeChart = new
> google.visualization.Gauge(document.getElementById('gaugechart'));
> GaugeChart.draw(dataView2,{width: 400, height: 250,redFrom: 18, redTo:
> 20,yellowFrom:15, yellowTo: 17,minorTicks: 5,min: 1,max:
> 20,animation:{duration: 400,easing: 'linear'}});
> }
> }
> google.setOnLoadCallback(Initalize);
> </script>
> </head>
> <body>
> <div id="chart"></div>
> <div id="gaugechart">test</div>
> </body>
> </html>
>
>
>
--
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/groups/opt_out.
