javascript - 2 different google charts on 1 html page (1 lineChart with JSON and 3xgauge hardcoded) -
<!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 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 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 { 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 1 dynamic google linechart json , 3 static google gaugecharts... want put them on 1 html page. did answer before asking question; instance don't think have variables same name. these charts work. linechart works (in separate html file) , 3 gaugecharts work (also separately in 1 html document). i'm pretty lost , can't seem working charts shown in harmony. can please solve this? can see added css html javascript jquery , json code. problem in html file somewhere.
i don’t think can call them in same function. either make different function each chart, or build function stack of charts. for reference
Comments
Post a Comment