Using Data Sets

• Why do we need Data Sets?
• Creating Data Set
  • Number or String
  • Object
  • Array
• Data Mapping

Why do we need Data Sets?

A situation when we need to analyze different data using the same set of values in the different series of one or different charts happens quite often.

For example, there is some information about the weather in three cities, and we have to show the difference on the html5 line chart:

Usually the solution is to create three sets for a line chart with three series:

In simple cases it is rather simple and you can allow some data duplication. But creating something complex, like a dashboard, may become a real pain, especially when you need to append, update or remove some data from all sets to sync them.

To avoid this we recommend to use Data Sets, which are the natural representation of a table, a view or a database query result.

Creating Data Set

Data Set works with a list of rows. Each row can be represented by one of the following types.

Number or String

This type of setting the data is extremely simple. All you need to do is set the values without naming the axis or making any other settings. All properties such as x, index, name, etc will be autogenerated.

chart = anychart.pie([
    28, 
    26, 
    27, 
    25,
    29,
    28
    ]);

// draw
chart.container('container').draw();

Object

This variant is a bit more complicated. If you want to specify point properties explicitly, you can use an Object as a row.

var data = [
  // column name         value
  {x: '2014/6/25', value: 28},                          // row 0
  {x: '2014/6/26', value: 26},                          //    1
  {x: '2014/6/27', value: 27},                          //    2
  {x: '2014/6/28', value: 25, marker:{fill:'violet'}},  //    3
  {x: '2014/6/29', value: 29, marker:{fill:'red'}},     //    4
  {x: '2014/6/30', value: 28,}                          //    5
];

// create a data set
var dataSet = anychart.data.set(data);

// create a line chart using the data set
var lineChart = anychart.line(dataSet);

// set container id for the chart
lineChart.container('container');
lineChart.title('New York weather');
lineChart.getSeries(0).name('New York');

// initiate chart drawing
lineChart.draw();

In this sample we specified the columns' names, the name of the chart and of the line and marked the lowest and the highest values.

Array

If you want to create more than one series on one chart or a chart with similar data, it is recommended to use Array as a row. Values of "column 0" of each row will represent series X (argument), each of the following columns value will represent a series value.

As a result we will have a js chart with 3 line series:

var data = [
    // column 0    1    2    3
    ["2014/6/25",  28,  23,  25], // row 1
    ["2014/6/26",  26,  21,  26], //     2
    ["2014/6/27",  27,  19,  26], //     3
    ["2014/6/28",  25,  21,  27], //     4
    ["2014/6/29",  29,  22,  28], //     5
    ["2014/6/30",  28,  25,  27]  //     6
];

// create mapping list on one data set
var dataMappingList = anychart.data.mapAsTable(data);

// create line chart
var lineChart = anychart.line(dataMappingList[0], dataMappingList[1], dataMappingList[2]);
lineChart.getSeries(0).name('New York');
lineChart.getSeries(1).name('San Francisco');
lineChart.getSeries(2).name('Los Angeles');

// set container
lineChart.container('container');

// initiate chart drawing
lineChart.draw();

Data Mapping

Data mapping is a great option to show the same data in different ways, for example in different charts, grouped or sorted differently. That's how one can use the same data set to populate two different charts:

var data = [
  // column 0    1    2    3
  ["2014/6/25",  28,  23,  28], // row 0
  ["2014/6/26",  26,  21,  26], //     1
  ["2014/6/27",  27,  19,  26], //     2
  ["2014/6/28",  25,  21,  27], //     3
  ["2014/6/29",  29,  22,  28], //     4
  ["2014/6/30",  28,  25,  27]  //     5
];

// create mapping list on one data set
var dataMappingList = anychart.data.mapAsTable(data);

// create a line chart using the data set
var lineChart = anychart.line(dataMappingList[0], dataMappingList[1], dataMappingList[2]);

// map x and value from the data set
var colChart = anychart.column(dataMappingList[0], dataMappingList[1], dataMappingList[2]);

This is a sample that utilized data mapping to show data in two different ways: