Hi All,
I have a bar chart which has month's in the category axis and 2 metrics in the other axis. The problem which I am facing is that the month data are not aggregating.
Here is the code which have.From this,it is clear that am getting extra "Jan" at the category axis which don't want.I want that value to be aggregated in the same "Jan" which is present first. How can achieve this?
Kindly help me fix this.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.moonlight.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.moonlight.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section0 k-content wide">
<div>
<button id="show_col1" class="k-button" clicked="true" > Total Visits</button>
<button id="hide_col1" class="k-button">Unique Visitors</button>
</div>
<div id="tabstrip">
<ul>
<li class="k-state-active">Quarterly</li>
<li>Monthly</li>
<li>Weekly</li>
</ul>
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<div class="demo-section2 k-content wide">
<div id="chart2"></div>
</div>
<div> Weekly Content</div>
</div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [250000, 324000],
}, {
name: "Unique visitors",
data: [235000, 298000]
}],
valueAxis: {
max: 350000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: ["Q1", "Q2", "Q3", "Q4"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
$("#show_col1").on("click", function() {
var chart = $("#chart").data("kendoChart");
chart.options.series[1].visible = false;
chart.options.series[0].visible = true;
chart.refresh();
});
$("#hide_col1").on("click", function() {
var chart = $("#chart").data("kendoChart");
chart.options.series[0].visible = false
chart.options.series[1].visible = true;
chart.refresh();
});
}
function createChart2() {
$("#chart2").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000,10000],
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000,10000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jan"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
$("#show_col1").on("click", function() {
var chart = $("#chart2").data("kendoChart");
chart.options.series[1].visible = false;
chart.options.series[0].visible = true;
chart.refresh();
});
$("#hide_col1").on("click", function() {
var chart = $("#chart2").data("kendoChart");
chart.options.series[0].visible = false
chart.options.series[1].visible = true;
chart.refresh();
});
}
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
});
$(document).ready(createChart2);
$(document).bind("kendo:skinChange", createChart2);
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
Thanks,
Lakshman
4 Answers, 1 is accepted
Rank 1
Here is the another script which i was trying to run but not getting the aggregating sum values for the month.
<!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 monthdata = [
{"month":"Jan","wordpress":"5","codeigniter":"5","highcharts":"8"},
{"month":"Feb","wordpress":"5","codeigniter":"2","highcharts":"8"},
{"month":"Mar","wordpress":"6","codeigniter":"3","highcharts":"9"},
{"month":"Apr","wordpress":"2","codeigniter":"6","highcharts":"6"},
{"month":"May","wordpress":"5","codeigniter":"7","highcharts":"7"},
{"month":"Jun","wordpress":"7","codeigniter":"1","highcharts":"10"},
{"month":"Jul","wordpress":"2","codeigniter":"2","highcharts":"9"},
{"month":"Aug","wordpress":"1","codeigniter":"6","highcharts":"7"},
{"month":"Sep","wordpress":"6","codeigniter":"6","highcharts":"6"},
{"month":"Oct","wordpress":"7","codeigniter":"4","highcharts":"9"},
{"month":"Nov","wordpress":"3","codeigniter":"6","highcharts":"8"},
{"month":"Dec","wordpress":"4","codeigniter":"3","highcharts":"4"},
{"month":"Jan","wordpress":"5","codeigniter":"6","highcharts":"7"}];
var sharedDataSource = new kendo.data.DataSource({
data: monthdata,
group:{
field: "month",
aggregates:[
{field: "wordpress" , aggregate:"sum"},
{field: "codeigniter" , aggregate:"sum"},
{field: "highcharts" , aggregate:"sum"}
]
},
});
sharedDataSource.read();
var seriesA = [],
seriesB = [],
seriesC = [],
categories = [],
items = sharedDataSource.view(),
length = items.length,
item;
//create the chart series
for (var i = 0; i < length; i++) {
item = items[i];
// This is what I want to do..
//seriesA[0].push(item.aggregates.len.sum);
//seriesA[1].push(item.aggregates.wid.sum);
// or
//seriesA.push([{item.aggregates.len.sum},{item.aggregates.wid.sum}]);
seriesA.push(item.aggregates.wordpress.sum);
seriesB.push(item.aggregates.codeigniter.sum);
seriesC.push(item.aggregates.highcharts.sum);
categories.push(item.value);
}
$(document).ready(function() {
$("#chart").kendoChart({
dataSource: sharedDataSource,
title: {
text: "Chart Rating"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
},
series: [
{
name: "wordpress",
data: seriesA,
color: "#3CB371"},
{
name: "codeigniter",
data: seriesB,
color: "#FFA500"
},
{
name: "highcharts",
data: seriesC,
color: "#FF0000"
}],
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: categories,
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
});
</script>
</div>
</body>
</html>
could any one help me fix this issue.
Thanks,
Lakshman
Rank 1
For the second script,we got the output but the thing is we are not getting the months in order(i.e Jan,Feb....)
schema:
{
model:{
fields:{
wordpress: { type: "number"},
codeigniter: { type: "number"},
highcharts: { type: "number"},
}
}
}
Thanks,
Lakshman
Rank 1
The other issue which we found was that when we added the static data then the result is shown as expected but when we try to bind the data from the database the graph doesn't show up.
transport: {
read: {
url: "http://localhost/Project_Demo/Kendobardata.php",
dataType: "json"
}
},
Is there anything that we have missed?
Thanks,
Lakshman
Up to the questions:
- ...From this,it is clear that i am getting extra "Jan" at the category axis which i don't want...
This outcome is expected and is caused by you have defined the category "Jan" twice (dojo). Keep in mind that when binding to arrays, the values will be plotted as defined in these arrays:
http://docs.telerik.com/kendo-ui/controls/charts/data-binding
-... Here is the another script which i was trying to run but not getting the aggregating sum values for the month....
If I understand correctly, you would like to display the total of all series in a particular category? If this is the case you could follow the approach suggested in this how-to:
http://docs.telerik.com/kendo-ui/controls/charts/how-to/show-stack-total
- ...For the second script,we got the output but the thing is we are not getting the months in order(i.e Jan,Feb....)...
In order to get months in a chronological order you should use date axis:
http://docs.telerik.com/kendo-ui/controls/charts/date-series
http://demos.telerik.com/kendo-ui/bar-charts/date-axis
- ...The other issue which we found was that when we added the static data then the result is shown as expected but when we try to bind the data from the database the graph doesn't show up...
Take a look at the following documentation section - it describes how to bind data to Kendo UI Chart:
http://docs.telerik.com/kendo-ui/controls/charts/data-binding
On a side note, it is accepted to post different questions in separate threads - this will make tracking / handling your support history much easier. If you have further questions, please open new support conversations for each of them.
Regards,
Iliana Nikolova
Telerik by Progress