<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" href="widget.css" type="text/css">
<script type="text/javascript">
google.load("visualization", "1", {packages:["gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temperatuur', 25],
]);
var data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Vochtigheid %', 40],
]);
var data3 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Windkracht', 3],
]);
var options =
{
width: 800, height: 240,
greenFrom: 10, greenTo: 28,
minorTicks: 5,
min: -30,
max: 50,
};
var options2 =
{
width: 800, height: 240,
greenFrom: 30, greenTo: 70,
minorTicks: 10,
min: 0,
max: 100,
};
var options3 =
{
width: 800, height: 240,
greenFrom:1, greenTo: 7,
minorTicks: 5,
min: 0,
max: 10,
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
var chart3 = new google.visualization.Gauge(document.getElementById('chart_div3'));
chart.draw(data, options);
chart2.draw(data2, options2);
chart3.draw(data3, options3);
}
google.load("visualization", "1", {packages:["corechart"]}); // Visualisatie API laden
$(function()
{
$.getJSON('regenval.json', function(data) //het juiste JSON bestand inladen
{
var table = new google.visualization.DataTable(); //The following example creates a new, empty DataTable - zodat je deze kan vullen
table.addColumn('string', 'Millimeter');
var nummer = data[0].regenval.length;
for(var nummer=0; nummer<data.length; nummer++)
{
table.addColumn('number', data[nummer].afdeling); //voegt een nummer toe aan de chart
}
table.addRows(data[0].regenval.length); //Aantal rijen toevoegen op basis van de JSON inhoud. Pakt hier van het eerste object (het eerste stukje), het aantal jaartallen. Zoveel rijen worden aangemaakt (maar nog niet gevuld)
for(var getal=0; getal<data[0].regenval.length; getal++)
{
table.setCell(getal, 0, data[0].regenval[getal].maand + "");
}
$.each(data,function(index, item){
for(var col=0; col<item.regenval.length;col++) //voor ieder column item doet col=col+1 zolang col kleiner is dan length van regenval
{
table.setCell(col, index + 1, item.regenval[col].aantalmm);
}
});
var optionsregenval =
{
title: 'Gemiddelde regenval: Boedapest, Hongarije', //titel bovenaan de chart
curveType: 'function',
backgroundColor:'white',
animation:
{
duration: 1000,
easing: 'out'
},
hAxis:
{
title: '<- maanden ->',
titleTextStyle: {color: 'blue'},
},
vAxis: //voegt waarden toe aan verticale as
{
title: '<- regenval in millimeter ->', titleTextStyle: {color: 'blue'}, maxValue: '10', minValue: '0',
ticks: [0,1,2,3,4,5,6,7,8]
},
//animation:{
//duration: 1000,
//easing: 'out'
//},
};
var chartregenval = new google.visualization.LineChart(document.getElementById('dediv')); //geeft de var chart een aantal handvaten zodat je deze op line 52 uit kan voeren.
chartregenval.draw(table, optionsregenval); //functie van google om de chart te tekenen met de tbale en options eigenschappen
});
});
</script>
</head>
<body>
<div id="grotechartdiv" >
<div id="chart_div" style="width: 250px; height: 240px;"></div>
<div id="chart_div2" style="width: 250px; height: 240px;"></div>
<div id="chart_div3" style="width: 250px; height: 240px;"></div>
</div>
</body>
</html>
body
{
background-color: yellow;
width: 1000px;
height: 800px;
/*overflow-x: hidden;*/
}
#grotechartdiv
{
border: solid 1px #ff0000;
text-align: center;
width: 100vw;
background-color: azure;
}
[
{
"afdeling": "2013",
"regenval": [
{
"maand": "jan",
"aantalmm": 3
},
{
"maand": "feb",
"aantalmm": 4
},
{
"maand": "mrt",
"aantalmm": 5
},
{
"maand": "apr",
"aantalmm": 5
},
{
"maand": "mei",
"aantalmm": 5
},
{
"maand": "jun",
"aantalmm": 4
},
{
"maand": "jul",
"aantalmm": 5
},
{
"maand": "aug",
"aantalmm": 3
},
{
"maand": "sept",
"aantalmm": 3
},
{
"maand": "okt",
"aantalmm": 3
},
{
"maand": "nov",
"aantalmm": 3
},
{
"maand": "dec",
"aantalmm": 2
}
]
},
{
"afdeling": "2014",
"regenval": [
{
"maand": "jan",
"aantalmm": 4
},
{
"maand": "feb",
"aantalmm": 3
},
{
"maand": "mrt",
"aantalmm": 4
},
{
"maand": "apr",
"aantalmm": 4
},
{
"maand": "mei",
"aantalmm": 2
},
{
"maand": "juni",
"aantalmm": 2
},
{
"maand": "juli",
"aantalmm": 4
},
{
"maand": "aug",
"aantalmm": 1
},
{
"maand": "sep",
"aantalmm": 3
},
{
"maand": "okt",
"aantalmm": 5
},
{
"maand": "nov",
"aantalmm": 6
},
{
"maand": "dec",
"aantalmm": 4
}
]
},
{
"afdeling": "2015 (huidig jaar)",
"regenval": [
{
"maand": "jan",
"aantalmm": 3.19
},
{
"maand": "feb",
"aantalmm": 4.26
},
{
"maand": "mrt",
"aantalmm": 5.42
},
{
"maand": "apr",
"aantalmm": 4.38
},
{
"maand": "mei",
"aantalmm": 3.28
},
{
"maand": "juni",
"aantalmm": 2.36
}
]
}
]
#grotechartdiv > div
{
display: inline-block;
border: solid 1px #000;
}
#dediv
{
border: solid 1px #ff0000;
background-color: crimson;
position: absolute;
top: 400px;
}
I have one dynamic Google lineChart with JSON and 3 static Google gaugeCharts... I want to put them all on one html page. I did look for the answer before asking this question; for instance I don't think I have any variables with the same name. All these charts work. The lineChart works (in a separate html file) completely and the 3 gaugeCharts work as well (also separately in one html document). Honestly I'm pretty lost and can't seem to get my working charts to be shown together in harmony. Can you please help to solve this? As you can see I added all the css html javascript jquery and JSON code. But the problem is just in the html file somewhere.
