Skip to main content

Work with Chart

Setting Chart configuration#

You can change configuration of Chart on the fly with the help of the setConfig() method. It takes as a parameter an object with updated chart configuration.

var config = {    type: "radar",    scales: {        radial:{            value: "month",            maxTicks: 7        }    },    series: [        {            id: "A",            value: "company A",            fill: "#000000",            alpha: 0.3,            color: "#000000"        },        {            id: "B",            value: "company B",            fill: "#FFFF33",            alpha: 0.3,            color: "#FFFF33"        }    ]}
chart.setConfig(config);

Related sample: Chart. Change Configuration On The Fly

Getting series configuration#

The Chart API gives you the possibility to get an object with the configuration of a certain series. Use the getSeries() method for this purpose. It takes the id of a series as a parameter:

var config = chart.getSeries("A");/* => {    "strokeWidth": 2, "active": true,    "tooltip": true, "paddings": 5,    "color": "none", "fill": "none",    "pointType": "circle", "id": "A",    "value": "company A", "pointColor": "blue",    "type": "radar",    "scales": [        "radial"    ]}*/

Related sample: Chart. Get Series

Iterating over series#

It is possible to iterate over chart series using the eachSeries(). As a parameter it takes a handler function that will perform iteration. Pass an array with series objects as a parameter of the handler function:

var chart = new dhx.Chart("chart", {    type: "radar",    scales: {        radial:{            value: "month",            maxTicks: 7        }    },    series: [        {            id: "A",            value: "company A",            fill: "#000000",            alpha: 0.3,            color: "#000000"        },        {            id: "B",            value: "company B",            fill: "#FFFF33",            alpha: 0.3,            color: "#FFFF33"        }    ]}); chart.eachSeries(function(seria){    seria.config.fill});// -> ["#394E79", "#5E83BA", "#C2D2E9"]

Related sample: Chart. Each Series

Adding items into Chart#

The API of Data Collection allows you to perform operations with Chart data items. For example, you can add more items (points) into your Chart using the method, like this:

var config = {    type:"line",    scales: {        "bottom" : {            text: "text",            showText: false        },        "left" : {            maxTicks: 10,            max: 100,            min: 0        }    },    series: [        {            value: "value",            color: "#5E83BA",            strokeWidth: 2        }    ]};
var chart = new dhx.Chart("chart", config);chart.data.parse([    {        value: Math.random() * 100,        text: "u" + Date.now() + 1    },    {        value: Math.random() * 100,        text: "u" + Date.now() + 2    },    {        value: Math.random() * 100,        text: "u" + Date.now() + 3    }]);function add() {    chart.data.add({        value: Math.random() * 100,        text: "u" + Date.now()    });};

The method takes as a parameter an object with two properties:

valuethe value of an item
textthe text of an item on the X-axis

A new data item is added relative to the X-axis. In case of adding many items, you need to increase the value of each new data item position to add it correctly.

Related sample: Chart. Adding Data On The Fly