The code below displays two bars in a stacked bar chart using a pane.
My problem is that only part of the chart is shown, you can see that the x-axis starts at 94%. So it looks like the value 50(bar 1) is smaller than 2(bar 2). Why is only part of the chart shown and how can I fix this?
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
},
labels: {
visible : true,
position: "insideBase"
}
},
panes:[{
name: "pane1"
}],
series: [{
data: [50],
axis: "axis1",
categoryAxis: "catAxis1"
},
{
data: [2],
axis: "axis1",
categoryAxis: "catAxis1"
}],
valueAxis: [{
name: "axis1",
pane: "pane1"
}],
categoryAxis: [{
name: "catAxis1",
pane: "pane1"
}]
});
</script>
Just add a min value of 0 to the valueAxis:
valueAxis: [{
min: 0,
name: "axis1",
pane: "pane1"
}],
DEMO
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
I am trying to create a KendoChart, then I wanted to have the bars to be on a stripes format. How to do that? I think I need to add "style" in "seriesDefaults" section or in the "series" section.
I have the code snippets below:
$("#chart").kendoChart({
title: {
text: "Sample"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848]
},{
name: "World",
data: [1.988, 2.733, 3.994]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
Here is the link for kendo UI bar chart: http://jsfiddle.net/nayanakalkur/ZPUr4/119/
In the fiddle example, X-axis is at '0'. How can i move the axis up or down the Y axis?
Suppose i want have the X-axis at 'y' value 10? How can this be done?
Code for the same:
HTML code:
<div id="example" class="k-content">
<div id="chart"></div>
</div>
Javascript code:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
}
},
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0
}, {
name: "Unique visitors",
data: series2,
gap: 1.0
}],
valueAxis: {
line: {
visible: false
},
title: {
text: "Availability"
}
},
categoryAxis: {
majorGridLines: {
visible: true,
position: "bottom"
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks in advance.
Set valueAxis.min to 10:
valueAxis: {
min: 10,
line: {
visible: false
},
title: {
text: "Availability"
}
},
Your JSFiddle modified in here: http://jsfiddle.net/OnaBai/ZPUr4/120/
EDIT: If you want that the axis crosses at one specific value, then set valueAxis.axisCrossingValue to the value.
Example:
valueAxis: {
axisCrossingValue: -50000,
line: { visible: false },
title: { text: "Availability" },
},
And the JSFiddle modified http://jsfiddle.net/OnaBai/ZPUr4/126/
I use kendo dataviz chart and want to add notes. This is the code I've written
$("#resultChart").kendoChart({
dataSource: resultsDataSource,
title: {
text: "Results"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
field: "Points",
name: "Points",
noteTextField: "EventName",
notes: {
label: {
position: "outside"
},
position: "bottom"
}
}],
valueAxis: {
labels: {
format: "{0}"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
field: "EventDate",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
Everything is working as needed, i.e. chart is drawn with appropriate data, but notes aren't shown.
Please help me find out why notes aren't shown, if there's data in "EventName" property(I've checked). I want to mention that I am using kendo ui 2013.1.514 version.
Thank you in advance.
In your series definition, you have noteTextField: "EventName", which means you must have the property EventName defined for each item in your DataSource, as #ccsakuweb alluded to.
This means that in your DataSource, the data items should look something like this:
var data = [
{ Id: 1, Name: "Result #1", EventName: "Note 1" },
{ Id: 2, Name: "Result #2", EventName: "Note 2" }
];
Kendo's documentation about the Notes feature is located at http://docs.telerik.com/kendo-ui/dataviz/chart/notes .