You should only be using one chart.draw call per chart instance. That's why
it appears to be replacing itself. Please look at the documentation page
for instructions on how to draw multiple gauges. You can find that page
here: https://developers.google.com/chart/interactive/docs/gallery/gauge

On Thu, Mar 5, 2015 at 1:23 PM saqib shabbir <[email protected]>
wrote:

> Hello,
>
> I am having a issue with trying to get the guage to update with the new
> data being pushed in.
>
> the data is coming from sparkfun, I have created a table for it in the
> HTML file attached but if you run it, the output is a gauge for each entry
> of the same variable.  so instead of getting just 15 gauges, i am getting
> 45 as there are 3 data entries so far on the sparfun spreadsheet.
>
>
> please can anyone guide me in the right direction to solve this issue!
>
> <!DOCTYPE html>
> <html>
>   <head>
>     <!-- EXTERNAL LIBS-->
>     <script src="
> https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";></script
> >
>     <script src="https://www.google.com/jsapi";></script>
>     <!-- EXAMPLE SCRIPT -->
>     <script>
>       // onload callback
>       function drawChart() {
>         var public_key = 'o85jyKNrXEIK32Gw4byN';
>         // JSONP request
>         var jsonData = $.ajax({
>           url: 'https://data.sparkfun.com/output/' + public_key + '.json',
>           //type: 'get',
>           data: {page: 1},
>           dataType: 'jsonp',
>         }).done(function (results) {
>           var data = new google.visualization.DataTable();
>
>           data.addColumn('number', 'AirTemp');
>           data.addColumn('number', 'CamErr');
>           data.addColumn('number', 'CrankErr');
>           data.addColumn('number', 'FuelCon');
>           data.addColumn('number', 'FuelPress');
>           data.addColumn('number', 'Gear');
>           data.addColumn('number', 'KPH');
>           data.addColumn('number', 'Lambda');
>           data.addColumn('number', 'MAPKpa');
>           data.addColumn('number', 'OilPress');
>           data.addColumn('number', 'OilTemp');
>           data.addColumn('number', 'RPM');
>           data.addColumn('number', 'TPS');
>           data.addColumn('number', 'Volts');
>           data.addColumn('number', 'WaterTemp');
>
>           $.each(results, function (i, row) {
>             data.addRow([
>               parseFloat(row.AirTemp),
>               parseFloat(row.CamErr),
>               parseFloat(row.CrankErr),
>               parseFloat(row.FuelCon),
>               parseFloat(row.FuelPress),
>               parseFloat(row.Gear),
>               parseFloat(row.KPH),
>               parseFloat(row.Lambda),
>               parseFloat(row.MAPKpa),
>               parseFloat(row.OilPress),
>               parseFloat(row.OilTemp),
>               parseFloat(row.RPM),
>               parseFloat(row.TPS),
>               parseFloat(row.Volts),
>               parseFloat(row.WaterTemp)
>             ]);
>           });
>           var chart = new google.visualization.Gauge($('#chart').get(0));
>           chart.draw(data, {
>             title: 'AirTemp'
>           });
>
>           chart.draw(data, {
>             Title: 'CamErr'
>           });
>           chart.draw(data, {
>             Title: 'CrankErr'
>           });
>           chart.draw(data, {
>             Title: 'FuelCon'
>           });
>           chart.draw(data, {
>             Title: 'FuelPress'
>           });
>           chart.draw(data, {
>             Title: 'Gear'
>           });
>           chart.draw(data, {
>             Title: 'KPH'
>           });
>           chart.draw(data, {
>             Title: 'Lambda'
>           });
>           chart.draw(data, {
>             Title: 'MAPKpa'
>           });
>           chart.draw(data, {
>             Title: 'OilPress'
>           });
>           chart.draw(data, {
>             Title: 'OilTemp'
>           });
>           chart.draw(data, {
>             Title: 'RPM'
>           });
>           chart.draw(data, {
>             Title: 'TPS'
>           });
>           chart.draw(data, {
>             Title: 'Volts'
>           });
>           chart.draw(data, {
>             Title: 'WaterTemp'
>           });
>         });
>       }
>        //load chart lib
>       google.load('visualization', '1', {
>         packages: ['Gauge']
>       });
>       // call drawChart once google charts is loaded
>       google.setOnLoadCallback(drawChart);
>
>     </script>
>   </head>
>   <body>
>     <div id="chart" style="width: 100%;"></div>
>   </body>
> </html>
>
>
>
>
> the code is attatched so please feel free to run it to see the outcome.
>
> --
> 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/d/optout.
>

-- 
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/d/optout.

Reply via email to