Plotr Datasets
Plotr Project Page › Documentation › Plotr Datasets
Understanding datasets when using Plotr is very important. While it’s not hard to understand, you need to know a couple of things before you can work with them.
What’s a dataset?
A dataset is an Array of Arrays. Datasets are defined in objects, these objects are treated like hashes. Each dataset is represented with a different key, these keys need to be unique, but the value corresponding to the key doesn’t have to be unique. Such an object containing three datasets might look like this:
var data_obj = {
'dataset1': [[0, 1], [1, 2.2], [2, 1.414], [3, 4], [4, 3.4]],
'another': [[0, 0.7], [1, 2.67], [2, 1.34], [3, 3], [4, 3.2]],
'dataset3': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]]
};
The Array that represents the dataset is an array of (x, y) values.
Adding datasets to a chart
There are two ways to add datasets to a chart: using a data object or using a table. When you’ve already seen the Plotr Configurator I guess you know how to add a dataset by using a data object:
// Define data.
var data_obj = {
'myFirstDataset': [[0, 1], [1, 2.2], [2, 1.414], [3, 4], [4, 3.4]],
'mySecondDataset': [[0, 0.7], [1, 2.67], [2, 1.34], [3, 3], [4, 3.2]],
'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]],
'myFourthDataset': [[0, 0.86], [1, 0.83], [2, 0.2], [3, 1.73], [4, 0.76]],
'myFifthDataset': [[0, 0.45], [1, 0.2], [2, 0.5], [3, 0.8], [4, 0.1]]
};
...
var chart = new Plotr.BarChart('plotr', options);
// Add the datasets
chart.addDataset(data_obj);
...
When you have more than one Object with datasets, you can call addDataset() again. The passed object will be merged with the stored datasets.
// Define data.
var obj1 = {
'd1': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
'd2': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
'd3': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]]
};
var obj2 = {
'd0': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
'd3': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]]
};
...
var chart = new Plotr.BarChart('plotr', options);
// Chart has datasets 'd1', 'd2' and 'd3'
chart.addDataset(obj1);
// Chart has datasets 'd0', 'd1', 'd2' and 'd3' ('d3' from obj2)
chart.addDataset(obj2);
...
This stuff is pretty straightforward. Using data from tables is a little harder, but you should be able to format and parse your own tables after reading the next paragraph.
Adding table data to Plotr charts
A table needs to be coded in a way Plotr can parse it. When the table is correctly formatted, Plotr can read the datasets from it, and also read the labels. In order to add labels, a
element must be present in the table. All data should be within the
3 Responses to “Plotr Datasets”
-
grapher | 2 years, 6 months ago | #
hi, im rendering the graph dynamically by getting the values from a table in the database. how do i change the labels for the x axis? currently, it just displays numbers (1-12) but i want it to display the values i got from the table.
-
baskar | 2 years, 2 months ago | #
I am not sure how this array of array mean. I am trying to get a simple pie-chart with values (70,23,4,3). How do I represent in the array of array ? Can someone please let me know.
‘d1′: [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
Comments are closed.
Recent articles
- Django Series 1: A custom login page → read this 1 year, 5 months ago - 107 comments
- Upcoming Django Series → read this 1 year, 5 months ago - 17 comments
- Delayed Image Preloading Using Mootools → read this 1 year, 8 months ago - 17 comments
- Javascripts Loop Benchmarks → read this 2 years ago - 1 comment
- Writing A Feed Reader → read this 2 years, 1 month ago - 1 comment
- Sending Javascript Functions Over JSON → read this 2 years, 1 month ago - 6 comments
Projects
Recent comments
- Django Series 1: A custom login page → read comment1 week, 1 day ago
- Upcoming Django Series → read comment1 week, 1 day ago
- Upcoming Django Series → read comment1 week, 1 day ago
- Upcoming Django Series → read comment2 months, 1 week ago
- Upcoming Django Series → read comment3 months ago
- Upcoming Django Series → read comment3 months, 1 week ago
I want to use Plotr for dynamic charting, i.e., a chart that updates every 1-2 seconds based on a newly generated dataset. Can you provide a sample on this page that would do that? I think many people would need something like this.
I’m currently using Plotr with ExtJS. I can use the Ext.TaskMgr class to create the polling mechanism, but I’m not sure how to return the dataset from the server.
But your sample wouldn’t have to show the use of ExtJS…