Using Data Sets

Why we need Data Sets?

Quite often you need to use the same set of values in the different series of one chart or different charts. For example, here is some data about a weather in three cities, and we want to see difference on the line chart:

Date New York San Francisco Los Angeles
2014/6/25 28 23 28
2014/6/26 26 21 26
2014/6/27 27 19 26
2014/6/28 25 21 27
2014/6/29 29 22 28
2014/6/30 28 25 27

In many cases you are forced to create three sets to create a line chart with three series:








Date New York Date San Francisco Date Los Angeles
2014/6/25 28 2014/6/25 23 2014/6/25 28
2014/6/26 26 2014/6/26 21 2014/6/26 26
2014/6/27 27 2014/6/27 19 2014/6/27 26
2014/6/28 25 2014/6/28 21 2014/6/28 27
2014/6/29 29 2014/6/29 22 2014/6/29 28
2014/6/30 28 2014/6/30 25 2014/6/30 27

In simple cases it is not so difficult and you can allow some data duplication. But when you start to create something complex, like a dashboard – it may become a 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

In this case each row represents only the point value. Other point properties such as x, index, name etc will be autogenerated.

var data = [
// column 0
    28,   //row 0
    26,   //    1
    27,   //    2
    "25", //    3
    "29"  //    4
];

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

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

// set container id for the chart  
pieChart.container('container');

// initiate chart drawing
pieChart.draw();

JsFiddle Playground

Object

If you want to specify point properties explicitly, you can use an Object as a row.

var data = [
      // column 0
  {name: 'Product A', value: 1222},                // row 0
  {name: 'Product B', value: 2431},                //    1
  {name: 'Product C', value: 3624},                //    2
  {name: 'Product D', value: 5243},                //    3
  {name: 'Product E', value: 8813, fill: 'gold'}   //    4
];

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

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

// set container id for the chart
pieChart.container('container');

// initiate chart drawing
pieChart.draw();

JsFiddle Playground

Array

If you want to create more than one series or a chart with similar data, it is recommended to use Array as a row. Zero column values of the each row will represent series X (argument), each of the following columns value will represent a series value.
As a result we will create a chart with 3 line series:

 var data = [
        // column 0    1    2    3
        ["2014/6/25",  28,  23,  28], // 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.lineChart.apply(null, dataMappingList);
  
    //set container
    lineChart.container('container');

    // initiate chart drawing
    lineChart.draw();

JsFiddle Playground

Data Mapping

Data mapping is useful (and must have) option when you want to show the same data in different ways, for example in different charts, grouped or sorted differently.

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 a data set
var dataSet = anychart.data.set(data);

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

// initiate chart drawing
lineChart.draw();

// map x and value from the data set
var dataView = dataSet.mapAs({x: [0], value: [1]});

// create a pie chart using mapped data set 
var pieChart = anychart.pieChart(dataView);

// initiate chart drawing
pieChart.draw();

We map zero column of the Data Set as X, and the first column of the Data Set as value.
Result of the mapAs call very similar to the Data Set itself, you can use it in the any chart or series create function exactly as any Data Set.

JsFiddle Playground

You are looking at an outdated 7.3.0 version of this document. Switch to the 8.0.1 version to see the up to date information.