Gauge chart doesn't show up with other charts on the same page.
It only works alone.
This is my code:
<?php
if ($_POST['wczytaj']) {
echo '
<!--Div that will hold the line chart-->
<div id="chart_div" style="width:100%;height: 350px;"></div>
<br / >
<br / >
<!--Div that will hold the pie chart-->
<div id="chart_div2" style="width:100%;height: 350px;"></div>
<br / >
<br / >
<!--Div that will hold the gauge chart-->
<div id="chart_div3" style="width:400px;height: 200px;"></div>
<br / >
<br / >
';
}
?>
<script type="text/javascript">
// Load the Visualization API and the package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.
setOnLoadCallback(drawLineChart);
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawPieChart);
function drawLineChart() {
var jsonData = $.ajax({
url: "dane.json",
dataType: "json",
async: false
}).responseText;
var options = {
'title':'Wilgotność Początkowa VS Wilgotność Końcowa',
hAxis: {
title: 'Data - Godzina',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 14,
bold: true
}
},
vAxis: {
title: 'Wilgotność %',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 14,
bold: true
}
}
};
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawPieChart() {
var jsonData = $.ajax({
url: "dane2.json",
dataType: "json",
async: false
}).responseText;
var options = {
title:'Straty Towaru w %',
pieHole: 0.4,
slices: {
0: { color: 'red' },
1: { color: 'blue' },
2: { color: 'orange' }
}
};
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
// Load the Visualization API and the package.
google.charts.load('current', {'packages':['gauge']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawGaugeChart);
function drawGaugeChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new
google.visualization.Gauge(document.getElementById('chart_div3'));
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
}
</script>
Does anyone know wher is the problem?
--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/c8d59ca8-5529-4246-823c-e9731ad53ab3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
