I'm creating a stacked bar chart and almost everytime, the bars on my chart are overflowing.
I'm not sure what could be causing this, I found that people had issues with sorting data source in chrome but this is not specific to chrome. Sometime depending on the default sort I set, it would show up correctly, but if I changed the sorting, it would go back to messed up. On top of this, sometime the values are interchanged but if I checked the datasource.data(), it would still be okay.
I tried calling redraw, refresh on the chart, read on the datasource, I'm a bit lost here
Thanks for any help!
http://jsfiddle.net/2mMMC/
$(document).ready(function () {
var data = {
data: [{"name":"R-24","series":"Moving","Idle":0,"Moving":1396,"Stopped":0,"count":"0.39"},
{"name":"R-25","series":"Moving","Idle":0,"Moving":6795,"Stopped":0,"count":"1.89"},
{"name":"P-24","series":"Moving","Idle":0,"Moving":2622,"Stopped":0,"count":"0.73"},
{"name":"RF-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":796,"count":"0.22"},
{"name":"RF-25","series":"Stopped","Idle":0,"Moving":0,"Stopped":27024,"count":"7.51"},
{"name":"P-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":26430,"count":"7.34"}
],
group: [{
field: 'series'
}],
sort: [{
field: "series",
dir: "asc"
}]
};
$("#chart").kendoChart({
dataSource: data,
series: [{
field: 'count',
stack: true,
type: 'bar'
}],
categoryAxis: [{
field: 'name'
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
});
Related
I have a simple data structure that I am pushing into a Kendo UI Barchart and stacking associated rows via a common grouped field in Kendo UI jQuery.
The Barchart is displayed as intended, but the ONLY customization I am unable to achieve is to show the "stacked" category labels which show what the elements have been grouped into, "Democrat" and "Republican" in the below sample.
Sample code:
function createChart() {
$("#stackie").kendoChart({
seriesDefaults: {
type: "bar",
stack: {
type: true
},
labels: {
visible: true,
background: "transparent",
position: "center",
template: "${series.name} ${value}"
}
},
series: [
{"stack": "Democrat", name: "New York", data: [854]},
{"stack": "Democrat",name: "Boston", data: [190]},
{"stack": "Republican",name: "Texas", data: [190]},
{"stack": "Democrat",name: "Philadelphia", data: [390]},
{"stack": "Democrat",name: "Atlanta", data: [390]},
{"stack": "Republican",name: "Florida", data: [390]},
{"stack": "Republican",name: "Alabama", data: [390]},
{"stack": "Republican",name: "Detroit", data: [390]}
],
valueAxis: {
labels: {
template: "#= kendo.format('{0:N0}', value) #"
},
line: {
visible: false
}
},
categoryAxis: {
field: "stack",
visible: true
},
legend: {
position: "none"
}
});
}
Whatever options I set for the "categoryaxis" seem to be ignored and I end up with a stacked barchart with no category grouping labels as below:
There doesnt seem to be an easy/intuitive way to get at the underlying "stacked" data. I would also want to show the aggregated totals for each "stack" too.
Any ideas? Thanks
I have the following kendo definition:
$("#availabilityChart").kendoChart({
seriesDefaults: {
type: "column"
},
legend: {
position: "bottom",
},
seriesColors: ["#1C64AF"],
series: [{
name: availabilityDataSelector,
data: seriesData,
field: "metricValue",
categoryField: "month",
}],
categoryAxis: [{
type: "date",
baseUnit: "months",
labels: {
dateFormats: {
days: "MMM"
}
}
}],
valueAxis: [{
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
Firstly, the chart is not the full width of the containing div - which I would like to have.
Secondly, when I click on an item in the legend (I only have one) the chart resizes and becomes a 100% width - how can I have this from the start?
Lastly, I want to disable the click on the legend. I just want it to show but remove the ability to click on items.
Thank you.
To prevent legend click behavior use the legendItemClick event:
legendItemClick : function ( e ){
e.preventDefault();
},
Unless you have some CSS overriding the width, the chart should automatically fill the container width.
DEMO
Is there any way I can show a portion of the kendo label text in a different color?
Kindly find the chart implementation here http://jsfiddle.net/52c3K/16/
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
the highlighted portion of the label in red and bold.
Your help is very much appreciated
This is a bit hard since we can't just use the template, I tried to play with visual and done some tweaking here and there. There result aren't perfect but please check it here on jsFiddle
I will try to explain what i have done there
i use the labels.visual configuration
e.text basically contains your label string, but i did some looping on dataSource for full data (but there is weakness in this since there may duplicate text on e.text)
make use of new kendo.drawing.Group(); specifically the drawDOM function + kendo template
make use of new kendo.drawing.Layout() to append the drawed DOM on the correct place , i followed this some of the tips here
And do take note in your fiddle the kendo version is 2013, well i used the 2018.1.221
I am using a kendo chart. I have stacked columns in my chart. I am using shared tooltip. The problem is that by default even if i am not hovering over the series bars(hovering just above the bars) the tooltip shows up. I want the tooltip to be displayed only when my mouse is over the bar.Is there a way to change this default behaviour?
<div id="chart">
</div>
<script>
$("#chart").kendoChart({
seriesDefaults: { type: "column", stack: "true" },
series: [{ data: [1,2,3] },{ data: [4,5,6] },{ data: [7,8,9] }],
tooltip: {
visible: true,
shared: true
}
});
</script>
Kendo requires JQuery, so you have to initialize the kendoChart inside a JQuery function. What threw me off is the fact it was still working...just not with the desired functionality. I'm surprised the chart didn't just stop working altogether. Either way, If you update your code as below, you should see the tooltip working as expected.
<div id="chart">
</div>
<script>
$(function() {
$("#chart").kendoChart({
seriesDefaults: { type: "column", stack: "true" },
series: [{ data: [1,2,3] },{ data: [4,5,6] },{ data: [7,8,9] }],
tooltip: {
visible: true,
shared: true
}
});
});
</script>
I also created a Dojo showing the working example: http://dojo.telerik.com/iboqU
I am trying to achieve a behaviour as below:
But my chart is shown as below. It has only one record in the json array
Even if there is no data for some days on a week, i need to show the weekdays as in the first image.
Fiddle here
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Orange"],
seriesDefaults: {
type: "column",
gap: .5,
overlay: {
gradient: "none"
}
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
aggregate: "avg",
}],
categoryAxis: {
type: "date",
baseUnit: "weeks",
labels: {
rotation: -45,
dateFormats: {
weeks: "ddd"
}
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
}
});
So all you need to do is append end points to your array of data. You can do this in your controller that returns data or later with JavaScript (which will cause you to redraw the chart unless you catch the data before you place it in the chart.)
You will need to make an array of Json objects like the rest of your data. It may look somthing like this. startDate and endDate being your chosen range.
function endPoints(){
return [{createddate:startDate,weight:0},{createddate:endDate,weight:0}];
}
You can append these data points with something like this.
function addDataToChart(data) {
var ds = $('#kk').data('kendoChart').dataSource;
ds.data($.merge(data, endPoints()));
//You can use ds.data() if you want to use the data that is already in the chart
}
In my own Dashboard project I would get the data with my own Ajax calls and append endPoints before it was placed in the chart. The full ajax function could look like this.
$.ajax({
url:'URLtoReturnData'
dataType:'json',
success:function(data){addDataToChart(data);},
error:function(e){errorHandler(e);}
});
I hope this helps.
This a workaround to get dates with no values to be displayed. The workaround is to have weight as 0.000000000000000001 for dates that has got no weight values against it. Also i have updated the category baseunit to days and added some sample data for you so that you can have a look at it how it appears. What you can do is put 0.000000000000000001 for dates that have 0 value against it when you are returning the JSON Markup. Code as below:
#*Sample Data:*#
var _data=[{"weight":149.91,"createddate":"8/1/2014"},
{"weight":0.000000000000000001,"createddate":"8/2/2014"},
{"weight":200,"createddate":"8/3/2014"},
{"weight":0.000000000000000001,"createddate":"8/4/2014"}]
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Red"],
seriesDefaults: {
type: "column",
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
}],
categoryAxis: {
type: "date",
baseUnit: "days",
labels: {
rotation: -45,
dateFormats: {
days: "ddd"
}
},
}
});
Please have a look at this JSFiddle for the same to see output