Table of Contents
- Getting Started
- Example Chart
- Loading Google Charts
- Loading Data via JSONP
- Creating the DataTable
- Creating the Chart
- Putting It All Together
- Final Thoughts
This tutorial assumes you already have pushed data to a stream on data.sparkfun.com,
and that you know the
public key to your stream. If you need help posting data to a stream, check out
the usage docs for more info.
We are going to use this weather station stream in this tutorial, but you can replace the fields and public key with the appropriate info from your stream.
Here is a live demo of the line chart we will be making. You can use any of the types of charts in the example gallery, but we will only be using the line chart during this tutorial. Due to the size of streams, we will only be requesting the first page of data. This will allow us to graph the most recent data without having to wait for megabytes of JSON to load.
Loading Google Charts
Google Charts needs to be loaded before it can be used. In order to ensure we create the chart after the library is
loaded, we need to create a callback for the loader to call after it has finished loading. In this example, we
will call our callback
Example Load Google Charts, and call drawChart once the library is loaded
Loading Data via JSONP
We will be using jQuery in this example to load data via a JSONP request. JSONP allows you to request data from data.sparkfun.com without violating the same-origin policy. Below is an example of how you can make a JSONP request for your stream’s data. We will be using this approach to fill in chart data.
Example Make a JSONP request for the first page of data
Creating the DataTable
Google Charts use DataTables
as their data source, and we will need to create one to connect our data to the line chart. Now that you know how to load your data with jQuery,
you are ready to create a DataTable and fill it with data. You will first need to tell the DataTable which columns it should create,
and the data type for each column. Available data types include:
In our example, we will be using
number. You can add as many columns as you need to your chart, but we are only adding three in this example.
Example Create a DataTable and add column definitions
Now that you have added your column definitions to the DataTable, you are ready to load it with your logged data. Row data
is always returned from the server as strings, so you will need to convert the data to the appropriate data type before
adding it to the DataTable. You will need to add your data to the array passed to
addRow in the order of your column
definition. In this example, we will be using the
windspeedmph, which are
fields that were defined during the creation of the weather station data stream.
Example Loop through data and add rows to the DataTable
Creating the Chart
The chart creation process is fairly simple once you have created the DataTable. We will be adding our chart
to a HTML div with the id of
Example Create chart and add it to div
Putting It All Together
You can read more about how to interact with phant by visiting phant.io/docs. If you spot any errors, or have any issues, let us know in the comment section below.