Getting Data from JSON

Overview
Schema
JSON vs JavaScript
Serialization
Multiple Series
Settings
- Axes
- Visualization
Samples
Complex

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