Getting Data from JSON

Overview

AnyChart js charting library supports several ways of setting data. This article quickly demonstrates main aspects of using JSON format in AnyChart component. Last sample of this article demonstrates cartesian chart with advanced settings. For the information on other ways of setting data see UData Sets and Supported Data Formats articles.

You can also load JSON settings from files using Data Adapter as described in Data Adapter.

JSON or JavaScript Object Notation, is an open standard format that uses human-readable text to transmit data objects consisting of attribute-value pairs. It is used primarily to transmit data between a server and web application, as an alternative to XML. For more information visit https://en.wikipedia.org/wiki/JSON

Schema

JSON Schema specifies a JSON-based format to define the structure of JSON data (visit https://en.wikipedia.org/wiki/JSON#Schema_and_metadata for more information). All objects of this schema correspond to JavaScript methods and parameters of a chart. AnyChart JSON schema varies from version to version. For example, JSON Schema for AnyChart version 8.7.1 is located at https://cdn.anychart.com/schemas/8.7.1/json-schema.json. Whenever you use AnyChart JSON schema - make sure its corresponds to the version of AnyChart.

JSON vs JavaScript

To load chart configuration in JSON format you should use fromJson() method. Setting data using JSON format is very similar to the way of setting data in JavaScript. The name of every object in JSON configuration corresponds to the name of a method or parameter in JavaScript. Snippet below demonstrates configuration of the simple chart.

// JSON data
var json = {
  // chart settings
  "chart": {
    // chart type
    "type": "pie",
    // chart data
    "data": [
      {"x": "Apples", "value": "128.14", fill: "green"},
      {"x": "Oranges", "value": "128.14", fill: "orange"},
    ],
    // chart container
    "container": "container"
  }
};

var chart = anychart.fromJson(json);

// draw chart
chart.draw();

This configuration creates chart like the one below

Playground

Note: Pie chart can have only one data series, thus JSON configuration for pie chart requires no "series" object.

JSON configuration can contain string, object, array, number, boolean and null. The variety of acceptable data formats makes the AnyChart JSON structure very similar to JavaScript configuration. To find out any required method or parameter use AnyChart API. API describes how every method and parameter are used. The structure is pretty much the same for JSON configuration. For example, you can find column() method in API to create column chart.

var chart = anychart.column([128.14, 112.61, 163.21, 229.98]);
chart.container('container');
chart.draw();

The same chart can be created using JSON

var chart = anychart.fromJson({
  "chart": {
    "type": "column",
    "series":[{
      "data": [128.14, 112.61, 163.21, 229.98],
    }],
    "container": "container"
  }
});

chart.draw();

As you can see, JSON format isn't limited only to setting chart type and its data, but can set container for the chart as well.

Another example: Y-Scale is configured using yScale() method and in JavaScript you use code like this:

// set chart type
var chart = anychart.column();

chart.yScale()    // adjust y scale
  .minimum(100)   // set minimum value
  .maximum(350);  // set maximum value

and in JSON format this looks like

"chart": {          // create chart
  "type": "column", // set column type
  "yScale": {       // invoke y scale
    "minimum": 100, // set minimum value
    "maximum": 350  // set maximum value
  }
}

Playground

Serialization

Predefined settings from JavaScript format can be serialized into JSON format. Method toJson() transfers current chart settings into JSON object. This method creates an object that contains all chart settings and it can be used to store chart data and configuration, but note, that when label or tooltip text formatting function is redefined in JavaScript code - it can't be serialized.

Playground

Multiple Series

JSON data set can contain one or several series - almost the same way you can do this in JavaScript. Sample below demonstrates chart with several series from JSON.

// series settings
"series": [{
  // first series data
  "data": [
    {"x": "P1", "value": "128.14"},
    {"x": "P2", "value": "112.61"},
    {"x": "P3", "value": "163.21"},
    {"x": "P4", "value": "229.98"},
    {"x": "P5", "value": "90.54"}
  ]
},{
  // second series data
  "data": [
    {"x": "P1", "value": "90.54"},
    {"x": "P2", "value": "104.19"},
    {"x": "P3", "value": "150.67"},
    {"x": "P4", "value": "120.43"},
    {"x": "P5", "value": "200.34"}
  ]
}]

Here is a sample with multiple series:

Playground

Settings

Axes

Data from JSON can contain all possible settings for controlling chart grid, axis line along with tick marks and labels, axis scale and other visual appearance settings. Sample below demonstrates setting axes names and adjusting scales orientation.

// x axes settings
"xAxes": [{               // settings for default x axis
  "orientation": "top",   // set axis position
  "title":{               // settings for axis title
    "enabled": false      // disable title
  }
}],

// y axes settings
"yAxes": [{               // settings for default y axis
  "orientation": "right", // set axis position
  "title":{               // settings for axis title
    "enabled": false      // disable title
  }
}],

// y scale settings
"yScale": {
  "inverted": true        // enable y scale inversion
}

Here is a sample with adjusted axes:

Playground

Visualization

Visual settings are vital for a chart. JSON can control any method and parameter of a chart to configure desirable chart appearance. Here is configuration for column chart of golden color with brick hatch.

"fill":"gold",
"stroke": "gray",
"hoverStroke": "darkred",
"hatchFill": {
  "type": "diagonal-brick",
  "color": "gray"
},
"hoverHatchFill":{
  "type:": "diagonal-brick",
  "color": "darkred"
}

Sample with this configuration is below

Playground

Samples

As addition to the presented material, here is a table of main methods and parameters of JavaScript data set comparing with JSON data set (the full list of all the methods and parameters can be found in API).

Chart Type
JavaScript Configuration JSON Configuration

// set chart type
var chart = anychart.line();

// set series type
chart.spline(
  // set series data
  [
    ['January', 10000],
    ['February', 12000],
    ['March', 18000],
    ['April', 11000],
    ['May', 9000]
  ]);

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

// set chart type
{chart: {type: "line",

  // set series type
  series:[{seriesType: "spline",
    // set series data
    data: [
      {x: "January", value: 10000},
      {x: "February", value: 12000},
      {x: "March", value: 18000},
      {x: "April", value: 11000},
      {x: "May", value: 9000}
    ]}],

  // set chart container
  container: "container"}}

Playground

Chart Title
JavaScript Configuration JSON Configuration

// title settings
chart.title()
  // set title text
  .text('Sales Performance')
  // title background settings
  .background()
    // enable background
    .enabled(true)
    // background inner color
    .fill('#FFD700')
    // set background border
    .stroke('#D8D8D8')
    // set background corners
    .cornerType('round')
    // set corners size
    .corners(10);

  // title settings
  title: {
    // set title text
    text: "Sales Performance",
    // title background settings
    background: {
      // enable background
      enabled: "true",
      // background inner color
      fill: "#FFD700",
      // set background border
      stroke: "#D8D8D8",
      // set background corners
      cornerType: "round",
      // set corners size
      corners: 10}},

Playground

Multiple Series
JavaScript Configuration JSON Configuration

// set chart type
var chart = anychart.area();

// type of first series
chart.area([
  // data for first series
  ['January', '12000'],
  ['February', '15000'],
  ['March', '16000'],
  ['April', '15000'],
  ['May', '14000']
]);

// type of second series
chart.splineArea([
  // data for second series
  ['January', '10000'],
  ['February', '12000'],
  ['March', '18000'],
  ['April', '11000'],
  ['May', '9000']
]);

chart.container('container');

// set chart type
{chart:{type: "area",

  // type of the first series
  series:[{ seriesType: "area",
    //data for first series
    data:[{x:"January", value: 12000},
      {x: "February", value: 15000},
      {x: "March", value: 16000},
      {x: "April", value: 15000},
      {x: "May", value: 14000}
    ]},

  // type of the second series
  {seriesType: "splineArea",
    // data for the second series
    data:[{x: "January", value: 10000},
      {x: "February", value: 12000},
      {x: "March", value: 18000},
      {x: "April", value: 11000},
      {x: "May", value: 9000}]
  }],

  container: "container"}}

Playground

Axes Settings
JavaScript Configuration JSON Configuration

// set interval of default y scale
chart.yScale().ticks()
  .interval(100000);

// settings for custom y scale

var newYScale = anychart.scales.linear();
newYScale
  .minimum(0)
  .maximum(100)
  .ticks()
    .interval(10);
newYScale.minorTicks()
  .interval(2);

// y axes settings
chart.yAxis().title()
  .text("Basic Y Axis");
chart.yAxis(1)
  .orientation("right")
  .scale(newYScale)
  .title()
    .text("Extra Y Axis");
  .minorTicks()
    .enabled(true);

  // set interval of default y scale
  yScale: {ticks:
    {interval: 100000}},

  // settings for custom y scale
  scales: [ {}, {},
    {
    type: "linear",
    minimum: 0,
    maximum: 100,
    ticks: {
      interval: 10},
    minorTicks: {
      interval: 2} }],

  // y axes settings
  yAxes: [{
    title: "Basic Y Axis"
  },{
    orientation: "right",
    scale: "newScale",
    title:{
      text: "Extra Y Axis"},
      minorTicks: {
        enabled: true} }],

Playground

Labels Settings
JavaScript Configuration JSON Configuration

// range marker
chart.rangeMarker()
  .scale(chart.yScale())
  .from(0)
  .to(30000)
  .fill({
    keys: [
      '.1 green',
      '.5 yellow',
      '.9 red'
    ],
    angle: -90,
    opacity: 0.5
  });

// text marker at the top
chart.textMarker()
  .scale(chart.yScale())
  .offsetX(10)
  .value(25000)
  .text('Good')
  .fontSize(15)
  .fontWeight(600);

// text marker at the center
chart.textMarker(1)
  .scale(chart.yScale())
  .offsetX(10)
  .value(15000)
  .text('Average')
  .fontSize(15)
  .fontWeight(600);

// text marker at the bottom
chart.textMarker(2)
  .scale(chart.yScale())
  .offsetX(10)
  .value(5000)
  .text('Severe')
  .fontSize(12)
  .fontWeight(600);

  // set range marker
  rangeAxesMarkers: [{
    scale: 1,
    from: 0,
    to: 30000,
    fill: {
      keys: [
        ".1 green",
        ".5 yellow",
        ".9 red"
      ],
      angle: -90,
      opacity: 0.5
    }}],

  // set text marker at the top
  "textAxesMarkers": [{
      "scale": 1,
      "offsetX": 10,
      "value": 25000,
      "fontSize": 15,
      "text": "Good",
      "fontWeight": 600},

    // set text marker at the center
    {
      "scale": 1,
      "offsetX": 10,
      "value": 15000,
      "text": "Average",
      "fontSize": 15,
      "fontWeight": 600},

    // set text marker at the bottom
    {
      "scale": 1,
      "offsetX": 10,
      "value": 5000,
      "text": "Severe",
      "fontSize": 12,
      "fontWeight": 600}],

Playground

Complex

Previous samples demonstrate separate additional features. Next sample is a bit more complex. It demonstrates html5 cartesian chart with several line series, customized axes, scales, grids and titles.

Playground