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
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
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
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 add 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:
- value | the value of an item |
- text | the 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 corrrectly.
Related sample: Chart. Adding Data On The Fly
Back to top