Data Visualization using Google charts

Projects
1

Can we plot two graphs side by side using Google charts. For eg: linechart and gauge side by side for each sensor.

2

Yes, you can plot multiple graphs of different types using Google charts. You can define multiple graphs of different types one after another. To know more about multiple graphs, refer the topic “Multiple graphs” under the section “Visualization” in the documentation attached.
Documentation : https://docs.boltiot.com/docs

1 Like
3

How to plot on the same line?
What is the code?

4

Hi @Rahulk15,
Please check out this section to learn about plotting multiple graphs. If you want to plot graphs on the same line, you’ll have to use the Bolt Apis and write HTML, CSS, and javascript code. Let me know if you need help regarding that.

5

Please show an example how to plot line chart and gauge on the same line?

6

Hi @Rahulk15 ,
For that, you’ll have to use Google Charts library along with Bolt Platform APIs. Assuming you know how to place elements using HTML and CSS in the same line, you may use the Gauge Chart Example and the Line Chart Example to achieve the same. If you face any trouble in understanding the code/writing the code, let me know.

7 
var Graph1 = new boltGraph();
Graph1.setChartType("lineGraph");
Graph1.setAxisName('X-Axis Name','Temperature->');
Graph1.plotChart('time_stamp','temp');
var Graph2 = new boltGraph();
setChartLibrary('google-chart');
setChartType('gauge'); 
setAxisName('°C'); 
setDimensions(200,200);
setMaxValue(100);
setYellow(35,45);
setRed(45,100);
setGreen(0,30);
plotChart('temp');
var Graph3 = new boltGraph();
Graph3.setChartType("lineGraph");
Graph3.setAxisName('X-Axis Name','Humidity->');
Graph3.plotChart('time_stamp','hum');
var Graph4 = new boltGraph();
setChartLibrary('google-chart');
setChartType('gauge'); 
setAxisName('%'); 
setDimensions(200,200);
setMaxValue(100);
setYellow(45,70);
setRed(70,100);
setGreen(0,45);
plotChart('hum');
var Graph5 = new boltGraph();
Graph5.setChartType("lineGraph");
Graph5.setAxisName('X-Axis Name','Air Quality>');
Graph5.plotChart('time_stamp','airq');
var Graph6 = new boltGraph();
setChartLibrary('google-chart');
setChartType('gauge'); 
setAxisName('ppm'); 
setDimensions(200,200);
setMaxValue(2000);
setYellow(600,1000);
setRed(1000,2000);
setGreen(0,600);
plotChart('airq');
var Graph7 = new boltGraph();
Graph7.setChartType("lineGraph");
Graph7.setAxisName('X-Axis Name','LPG>');
Graph7.plotChart('time_stamp','lpg');
var Graph8 = new boltGraph();
setChartLibrary('google-chart');
setChartType('gauge'); 
setAxisName('ppm'); 
setDimensions(200,200);
setMaxValue(50);
setYellow(1,25);
setRed(25,50);
setGreen(0,1);
plotChart('lpg');
var Graph9 = new boltGraph();
Graph9.setChartType("lineGraph");
Graph9.setAxisName('X-Axis Name','Carbon Monoxide>');
Graph9.plotChart('time_stamp','cbm');
var Graph10 = new boltGraph();
setChartLibrary('google-chart');
setChartType('gauge'); 
setAxisName('ppm'); 
setDimensions(200,200);
setMaxValue(50);
setYellow(2,25);
setRed(25,50);
setGreen(0,2);
plotChart('cbm');
var Graph11 = new boltGraph();
Graph6.setChartType("lineGraph");
Graph6.setAxisName('X-Axis Name','Smoke>');
Graph6.plotChart('time_stamp','smoke');
var Graph12 = new boltGraph();
setChartLibrary('google-chart');
setChartType('gauge'); 
setAxisName('ppm'); 
setDimensions(200,200);
setMaxValue(50);
setYellow(2,25);
setRed(25,50);
setGreen(0,2);
plotChart('smoke');

What should I modify to bring two graphs on same line

8 
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
  ['Price', 'Size'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// Set Options
var options = {
  title: 'House Prices vs Size',
  hAxis: {title: 'Square Meters'},
  vAxis: {title: 'Price in Millions'},
  legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

In this example the data is static but how to plot using real-time values from bolt module?

9

Hi @Rahulk15 ,
You will need to use Apis to fetch the data from your BOLT. Please check out the documentation here.

You can use the setInterval javascript function to periodically fetch the data in real-time by calling the Apis.

For calling the Apis you may make XMLHttpRequest.

Once you fetch the data, you can plot it in real-time.

If you face any trouble while writing the code, let me know.

10

Can I do like:

  1. write the javascript code in bolt editor
  2. then copy the html code from Developer Tools
  3. paste the html code in bolt editor
  4. edit the code in bolt editor for modification
    I tried, it is working but additional static graphs are coming.
    How to remove them?
    I tried to remove them by deleting graph from html code but its not working.
11

Hi @Rahulk15 ,
Can you please share the screenshot of the additional graphs that are coming and also the code so I can better understand the issue.