Google Charts Are One Of The Perfect Ways To Represent Data In Charts. We deploy our code in the specific hardware while building IoT Devices. IoT usually comprises of sensors and actuators, and while dealing with IoT on a large platform comprising of large data, It is so difficult for us to analyze the patterns of data or to study the data manually.
Therefore, we require a visual aid to clearly look over the sensor data. It is often said that visuals create a more deep impact than simple tabular data, hence here comes the need of data Visualization.
Google Charts
it is an interactive feature in form of a Web service that creates graphical charts from user-supplied information. The user supplies data and a formatting specification expressed in JavaScript embedded in a web page; in response, the service sends an image of the chart.
There are many data visualisation libraries available and Google-charts is among the top libraries available. Some salient feature of Google Library are:
- Free to use and has an open-source environment.
- Highly customizable with a wide range of charts.
- Highly user-friendly, i.e., easy to have a grasp on.
- Compatible with mainly all browsers in nearly all operating systems.
Google-Charts is solely a charting library based on jS (JavaScript). As we have describe the need for a visual aid for a better grip on data analysis, it is design in order to enhance the web applications. It provides a wide range of charts, for example, line graph, bar graph, scatter graph, area graph, histograms, pie charts, and so on, which we can implement, we have described few of them below.
Line Graph:
In a line graph, we basically put all data points according to their value on the respective axis, then we connect them continuously bylines, one to one.
For depicting the IoT sensor data using a line graph from the google chart library. we code our IoT module including the following JavaScript code snippet and note that every command enter below is case sensitive.
We can explain the meaning of every line in the above code:
- At first, by using setChartLibrary(), we specify the charting library we are going to use, which is google chart here.
- Now we will assign a name for the graph by writing setChartTitle().
- After giving the title we will specify the kind of chart we need to plot (which is Line Graph here) by writing, setChartType().
- We can also specify the axis parameters by assigning a name to the respective axes by writing, setAxisName().
- Here is the final step, i.e., by writing plotChart() at the end with time and variable to be plot against time as the passed parameters, we can plot our sensor data.
Bar Graph in Google Charts:
A bar graph is the simplest data illustration technique, here we represent data in form of bars. We need not define a bar graph is very much detail and moving on how to implement it in our code for sensor data analysation.
We have already studied the need for all these statements in the line graph section, but what we have changed for a bar graph is only the chart type from line-graph to bar-graph. In the third line of the above piece of code, we have written setChartType(‘barGraph’)
Scatter Graph:
This is a more diversified type of chart which is use generally for larger size data representation in a larger time period for example population-related data analysis in a city or state. As the name suggests this displays data in a very scattered format against two defined parameters.
The javascript code snippet below we have only change the chart type here:
Area Graph:
An area graph is use to display graphically quantitative data as it is based on the line chart. The area between the axis of the independent variable and plot a variable line are commonly emphasize with colours.
Below js code explains it well, the thing to notice is that we have not changed anything in the code except for the fact that we have changed the chart type to areaGraph.
Gauge Graph in Google Charts:
We have often come across gauge charts in our day to day life, for instance, the speedometer is also a gauge meter.
Technically saying; Gauge chart which is also a dial chart or speedometer chart basically uses a single needle to show information as a reading on a dial. In this kind of chart, a needle is used to indicate data levels as coloured bands. These types of charts are also used in executive dashboard reports for showing key business representatives.
Below javascript code snippet explains how to use the chart :
We can also explain each line of code:
setChartLibrary(), setChartTitle(), setChartType() and setAxisName() are already described in the above charts,
- setDimensions() : It measures the length and breadth of the gauge meter and helps to resize it.
- setMaxValue(): This defines the maximum value of the gauge graph.
- setYellow(): This provides the extent of Yellow colour band in the gauge.
- setRed(): This provides the extent of Red colour band in the gauge.
- setGreen(): This provides the extent of Green colour band in the gauge.
- plotChart():It is the final step, with the variable to be plotted against time as the passed parameters, we can plot our sensor data.
Thus, the need for google charts as a charting library to enhance your IoT sensor data is just like what a blackboard is for a teacher. It works to represent highly useful data in a pictorial way to look at it easily.
Written By: Priyanshi Omer
Reviewed by: Batta Pruthvi
