Google charts are used in this website to create graphs of the data collected by raspberry pi units which report data to the database at this website.
Google chart tools are powerful, simple to use, and free. Cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. No plugins are needed or used. In this implementation I’ve boiled usage down to a set of WordPress shortcodes which can be embedded in the page using the WordPress page editor. No special WordPress page template is required.
| shortcode | description |
| loadchartbase | One and only one of these is required in the page. It sets up the ajax api, chart visualization api, responsive code, empty array of chart attributes, and ajax call to get dynamic data from the database. |
| rangeSlider | This sets up a slider set and render button which allows the user to change the time range of all the graphs on the page. This shortcode is optional and if its not present, the last ten days of data are fetched and graphed. There should not be more than one of this shortcode on a page. |
| chart | This sets where the google chart will be displayed on the page. Attributes determine which sensor data is fetched, which database table to fetch it from, the title of the chart, the type of graph/chart, and any reference lines to draw on the chart. There can be one or more of this shortcode on the same page. |
| chart attribute | description | example |
| start | the start date of the data range | start=”2021-08-24 07:15:29″ |
| sensors | Specifies one or more columns of data to be fetched from the database for graphing. The sensor name must match the field in the database. | sensors=”watertemp,cputemp” |
| table | Specifies which database table to fetch from. The entire sensor set for a chart must come from the same table. | table=”clearpi2″ |
| title | The title will appear above the graph when it is rendered. | title=”temperature readings “ |
| type | Specifies the graph type. Currently only Line and Area are supported. | type=”Line” |
| referencelabel | A horizontal reference line can be drawn on the graph. This specifies one or more labels for the line(s). | referencelabel=”High,Low” |
| referencevalue | A horizontal reference line can be drawn on the graph. This specifies one or more values for the line(s) labelled as in above. | referencevalue=”102269,100914″ |
| sensor | table |
| airtemp, watertemp, pressureAD, depth, cputemp, boxtemp, shedtemp, barometer, barometerSeaLev, baromTemp | clearpi2 |
| data | c_con |
| OCR_value, Consumption | OCR |
Example 1: Chart the last ten days of barometric pressure on a page. Add 2 reference lines for high and low. Start the graph on the date given.
[loadchartbase]
[chart sensors="barometerSeaLev" title="barometer Pascals" table="clearpi2" type="Line" referencelabel="High,Low" referencevalue="102269,100914" start="2021-08-24 07:15:29"]
Example 2: Two temperatures on the same graph and add a range slider so specific time range can be selected.
[loadchartbase]
[chart sensors="cputemp,airtemp" table="clearpi2" title="temperature readings" type="Line"]
[rangeSlider]
Example 3: Two graphs on the same page, with range slider. Use area graph for first one.
[loadchartbase][chart sensors="data" table="c_con" title="pump tank" type="Area"]
[chart sensors="Consumption" table="OCR" title="water consumption" type="Line"]
[rangeSlider]