Hi all,
I am very new in kendo UI.
I am trying to create a stacked bar graph using remote connection and my code is as below:
<!doCTYpe html>
<html>
<head>
<link href="kendo.metro.min.css" rel="stylesheet">
<link href="kendo.common.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/Project_Demo/Kendobardata.php",
dataType: "json"
}
},
schema: {
data: "data",
model: {
fields: {
wordpress: {type: "number"},
month: {type: "string"}
}
}
}
});
$("#chart").kendoChart({
dataSource: sharedDataSource,
title: {
text: "Charts Rating"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "wordpress",
field: "wordpress",
color: "#3CB371"},
{
name: "codeigniter",
field: "codeigniter",
color: "#FFA500"
},
{
name: "highcharts",
field: "highcharts",
color: "#FF0000"
}],
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
field: "month",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
</script>
</div>
</body>
</html>
I am finding a difficulty to get the series "name" as dynamic which will come from database.
let say example:
There are 10 "appointment owner", their respective "appointment count" values and "months" are in json format.
I want to create a stacked bar graph in that month will be on category axis and in series appointment owner and appointment count should be their.
Kindly please help me to achieve this.
Thanks,
Amit
3 Answers, 1 is accepted
I am not sure I understand properly the exact issue you are facing. Basically, you can stack the series in the chart by setting the seriesDefaults.stack property to true like in this demo. A sample with the updated version of the provided by you code can be tested here:
http://dojo.telerik.com/@veselinar/oYIxI
If this is not the case - can you elaborate a bit on the scenario you want to achieve and which is the configuration that prevents you from that?
Regards,
Vessy
Telerik by Progress
Rank 1
Hi Vessy,
Sorry for not making you clear.
Basically I want to fetch the series name from database instead of giving a static name, like in my example i have given ( name: "wordpress", name: "codeigniter", name: "highcharts", ).
That's why i had given example that if there are 10 "appointment owner" then i want to display the 10 appointment owner "name" in series dynamically instead of static, because that data will be coming from database.
I hope that this time I have made clear with my issue.
Thank you for the clarification, Amit. The dynamic setting of the series names can be achieved by implementing grouping and utilizing the group's template functionality. This can be done by configuring the group property of the DataSource to the name of the column which will be the criteria for grouping the chart series:
series: [{ type: "line", field: "close", name: "#= group.value # (close)"}]You can examine the following two live demos, demonstrating similar to the described approach:
http://demos.telerik.com/kendo-ui/line-charts/grouped-data
http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked-bar
Regards,
Vessy
Telerik by Progress