I'm making a chart using Kendo and have run into a problem.
I'm getting a load of data and passing it into the chart, the data has a date and a value, and my js looks like this:
chart.kendoChart({
title: {
text: "title"
},
seriesDefaults: {
type: "line"
},
dataSource: {
data: []
},
series: [{
name: "Value",
field: "value"
}]
categoryAxis: [{
type: "date",
field: "date",
baseUnit: "months",
min: "2013-07-22T00:00:00",
max: "2014-07-22T00:00:00"
}]
});
The problem is that if there is no Data returned (i.e. an empty array as above) I'd still like to see the Month date labels along the bottom, but there is nothing there (there are still default value labels up the y-axis).
I have looked at the Kendo documentation and cannot find anything there, nor any similar questions on stackoverflow. Can anyone help? Let me know in comments if there is anything I need to clarify/provide. Thanks.
Filling your data with null values for months which have no data can resolve your issue.
Please see this Fiddle as an example:
Also see the sample code below:
var _data=[{"weight":200,"createddate":"1/1/2014"},
{"weight":200,"createddate":"2/1/2014"},
{"weight":200,"createddate":"3/1/2014"},
{"weight":149.91,"createddate":"4/1/2014"},
{"weight":null,"createddate":"5/1/2014"},
{"weight":null,"createddate":"6/1/2014"},
{"weight":null,"createddate":"7/1/2014"},
{"weight":null,"createddate":"8/1/2014"},
{"weight":null,"createddate":"9/1/2014"},
{"weight":null,"createddate":"10/1/2014"},
{"weight":null,"createddate":"11/1/2014"},
{"weight":null,"createddate":"12/1/2014"}]
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Red"],
seriesDefaults: {
type: "column",
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
}],
categoryAxis: {
type: "date",
baseUnit: "months"
}
});
Related
Is there a way to refresh the charts with remote data if you don't use datasource but instead dynamically create a series set with the return data from the API? What I would like to do is have call the API again and rebuilt the chart.
When using Aurelia, there is a 3rd party bridge between kendo and aurelia called the aurelia-kendo-bridge. When using that they have a recreate() function that can be run to reload the charts. I just had to target all my charts and it worked. Thanks very much #Jeroen Vinke for all the help.
using this you can call the api from controller and if you want live update try to refresh the chart at particular time.
$("#chartere").kendoChart({
dataSource: {
transport: {
read: {
url: '#Html.Raw(#Url.Action("method", "controller"))',
dataType: "json"
}
},
group: {
field: "title",
Color: "Color"
}
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
}
},
series: [{
field: "value",
colorField: 'Color',
groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}
}],
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
});
and use this for refresh the chart
chart.dataSource.read();
chart.refresh();
please check this url
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#refresh
Every kendo widget have a setOptions function that allow you to change the widget's option the same way you initialized them. You'll be able to replace the series using that function.
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}]
});
var chart = $("#chart").data("kendoChart");
chart.setOptions({
series: [{
data: [4, 5, 6]
}]
});
chart.refresh();
I have the following code which display the line on the chart. I could not able to find how to format the x axis. I would like to show every thousand interval similar to y axis (0,1000,2000,3000,4000, etc). I am using Kendo UI.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
categoryAxis: {
labels: {
step: 1000,
format: "n0"
},
},
series: [{
type: "area",
line: {
style: "smooth"
},
field: "x",
categoryField: "y"
}],
});
}
Here is my fiddle:
http://jsfiddle.net/nDS3S/37/
If I get right, your code doesn't works because the step doesn't really mean that would be shown a label for each 1000, but in fact it will show a label for each serie. So your chart doesn't have 1000 series, that is why only 0 was displayed.
If you change your step to 5, you will see the labels, but displaying the exactly number for that specific serie.
Check this out.
I'm afraid you can't achieve what you want.
I have some data I wish to display on a chart but it just shows the title and no points get drawn. The JSON data I receive is correct as per my knowledge, I think it's somewhere in the chart function but I can't really point it out.
This is what I have so far:
data.php (the output):
{"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]}
The important bits of the html:
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
xAxis: {
categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
},
yAxis: {
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
It's supposed to show temperature per hour but unfortunately nothing comes up. Any idea what could be wrong?
series should be an array. So you need to just change:
series: json
To:
series: [json]
Working example: http://codepen.io/anon/pen/Kfgsd
Documentation: http://www.highcharts.com/docs/chart-concepts/series
your problem i think that you haven't specified where your chart should be inserted to, afaik you either should specify the renderTo option for the class constructor options or use the $('#container').haighcharts({...}) jquery helper
I'm working with the columnrange chart type, and some of my could end up being much much smaller than the normal size, so I would like to specify the minPointLength so that the small data points are still visible amidst their larger neighbors and can easily be hovered over and clicked on. I have tried placing the minPointLength option in multiple places throughout my code, but it doesn't seem to ever affect the size of the columns. I have gotten minPointLength to work fine on other chart types, but not with the columnrange chart. Here is a little js fiddle I borrowed and modified to attempt to accomplish what I want: http://jsfiddle.net/kdCgU/7/
$(function() {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
xAxis: {
labels: {
enabled: false
}
},
plotOptions: {
series: {
minPointLength: 10, //This doesn't seem to do anything
dataLabels: {
enabled: true,
},
}
},
series: [{
name: "Product A",
data: [[-200, 200]]},
{
name: "Product B",
data: [[-150, 150]]},
{
name: "Product C",
data: [[-100, 100]]},
{ name: "Small Data",
data: [[0, 1]]}
]
});
Any help would be greatly appreciated, thanks!
It is known bug reported here , but is fixed in master branch.
http://jsfiddle.net/sbochan/kdCgU/8/
Like I said in my comment it is a bug. It is already reported on their github here.
It seems to be fixed on the master :
http://jsfiddle.net/xAU6X/
I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>
You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},