I am working with KendoUI bar chart. Please check this fiddle. In this fiddle I am setting series config at the design time. I want to add series to the chart at run time on click of a button. How can I add series to kendo chart on click of a button.
Currently series is assigned at the design time, i want to do the same at the run time on click of a button.
Code:
<!DOCTYPE html>
<html>
<head>
<base href="">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik/2016.1.112/styles/kendomon-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "World population by age group and sex"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "0-19",
stack: "Female",
data: [854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654]
}, {
name: "20-39",
stack: "Female",
data: [490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439]
}, {
name: "40-64",
stack: "Female",
data: [379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066]
}, {
name: "65-79",
stack: "Female",
data: [97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956]
}, {
name: "80+",
stack: "Female",
data: [16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029]
}, {
name: "0-19",
stack: "Male",
data: [900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165]
}, {
name: "20-39",
stack: "Male",
data: [509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507]
}, {
name: "40-64",
stack: "Male",
data: [364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563]
}, {
name: "65-79",
stack: "Male",
data: [74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156]
}, {
name: "80+",
stack: "Male",
data: [9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223]
}],
seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
valueAxis: {
labels: {
template: "#= kendo.format('{0:N0}', value / 1000) # M"
},
line: {
visible: false
}
},
categoryAxis: {
categories: [1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.stack #s, age #= series.name #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
I am working with KendoUI bar chart. Please check this fiddle. In this fiddle I am setting series config at the design time. I want to add series to the chart at run time on click of a button. How can I add series to kendo chart on click of a button.
Currently series is assigned at the design time, i want to do the same at the run time on click of a button.
Code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik./kendo-ui/bar-charts/grouped-stacked-bar">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik./2016.1.112/styles/kendo.mon-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik./2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik./2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik./2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "World population by age group and sex"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "0-19",
stack: "Female",
data: [854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654]
}, {
name: "20-39",
stack: "Female",
data: [490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439]
}, {
name: "40-64",
stack: "Female",
data: [379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066]
}, {
name: "65-79",
stack: "Female",
data: [97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956]
}, {
name: "80+",
stack: "Female",
data: [16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029]
}, {
name: "0-19",
stack: "Male",
data: [900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165]
}, {
name: "20-39",
stack: "Male",
data: [509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507]
}, {
name: "40-64",
stack: "Male",
data: [364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563]
}, {
name: "65-79",
stack: "Male",
data: [74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156]
}, {
name: "80+",
stack: "Male",
data: [9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223]
}],
seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
valueAxis: {
labels: {
template: "#= kendo.format('{0:N0}', value / 1000) # M"
},
line: {
visible: false
}
},
categoryAxis: {
categories: [1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.stack #s, age #= series.name #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
- Your link is to a telerik page, not a fiddle. Also, please include the relevant code within the question so if the fiddle disappears over time people can still refer to your question. – ezanker Commented Feb 25, 2016 at 19:01
2 Answers
Reset to default 7Ageonix gave a good answer! If you do not want to use a global variable for the chart options, you can get the chart instance from the DOM data-attribute, add the series to the chart instance and then tell the chart to redraw:
var newseries = {
name: "100+",
stack: "Female",
data: [654622, 625844, 784930, 844982, 900941, 39797, 72929, 118435, 118454]
};
//Get the chart
var chart = $("#chart").data("kendoChart");
//add the series
chart.options.series.push(newseries);
//refresh the chart
chart.redraw();
Updated DOJO
If you set the chart options as a global variable, you can then modify options.series and set it to your updated series data source in the button click event and call createChart() again, which will update (recreate) the chart with the updated series.
Create a global chartOptions variable:
var chartOptions =
{
title: {
text: "World population by age group and sex"
},
legend: {
etc. etc.
Then create the chart with the options stored in the variable:
$("#chart").kendoChart(chartOptions);
Finally, update the options.series with the updated data and recreate the chart:
click: function()
{
chartOptions.series = updatedSeries;
$("#chart").kendoChart(chartOptions);
}
I updated your Dojo and added a button that populates a new series on click. http://dojo.telerik./oTeTi/3