javascript - Multiple Google Gauges with different option sets -
javascript - Multiple Google Gauges with different option sets -
i'm trying insert multiple instances of google gauges (or highchart gauges) on page. want utilize different alternative sets , place them apart. cannot utilize solution presented here, think: google charts multiple gauges
i've given effort here: http://jsfiddle.net/tcmsu475/1/
i'm missing fundamental. it's same highchart charts. cannot seem draw 1 chart in 1 div , in div.
the code (for future reference):
... <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}"></script> <div id="chart1_div" /> <div id="chart2_div" /> ... $(function () { var chart1_data = google.visualization.arraytodatatable([ ['label', 'value'], ['band1', 100], ]); var options1 = { width: 500, height: 120, redfrom: 75, redto: 100, yellowfrom: 25, yellowto: 75, greenfrom: 0, greento: 25, minorticks: 5, greencolor: '#ccffcc', yellowcolor: '#ffffcc', redcolor: '#f78181' }; var chart1 = new google.visualization.gauge(document.getelementbyid('chart1_div')); chart1.draw(chart1_data, options1); /* ========================================================= */ var chart2_data = google.visualization.arraytodatatable([ ['label', 'value'], ['band2', 50], ]); var options2 = { width: 500, height: 120, redfrom: 90, redto: 100, yellowfrom: 50, yellowto: 90, greenfrom: 0, greento: 50, minorticks: 5, greencolor: '#ccffcc', yellowcolor: '#ffffcc', redcolor: '#f78181' }; var chart2 = new google.visualization.gauge(document.getelementbyid('chart2_div')); chart2.draw(chart2_data, options2); }); ...
you need define divs differently , works:
<div id="chart1_div"></div> <div id="chart2_div"></div>
http://jsfiddle.net/lgahj01z/
javascript jquery html highcharts
Comments
Post a Comment