Kendo UI Column Chart with Sparse Data displays incorrectly - javascript

I am using KendoUI to display a column chart, but when I have sparse data (there is not a data point for every single category/series combination), the charts are completely wrong. I am hoping I am just doing something wrong!
Take the following data:
Category Series Value
---------------------------
1 Foo 10
2 Foo 12
2 Bar 9
I would like to create a chart where:
the series are grouped, and keys are in the legend
the categories are displayed along the x-axis, sorted ascending
the values are the height of the columns
If I generate the chart, I get the following result:
There are several things wrong with this chart:
The column for the third data point (2, Bar, 9) displays in the first column in orange - should be in the second column
The axis label for category 2 is displayed first - should be second
There is no axis label for category 1
However, if I add a 4th data point to my data source, the data displays correctly:
Category Series Value
---------------------------
1 Foo 10
2 Foo 12
2 Bar 9
1 Bar 7
I have a JS fiddle that illustrates the problem at http://jsfiddle.net/blackstarzes/eep2tn2g/1/
For completeness, the code I have:
HTML
<div id="chart"></div>
JS
var dr = [
{
"Category": "1",
"Series": "Foo",
"Value": 10
},
{
"Category": "2",
"Series": "Foo",
"Value": 12
},
{
"Category": "2",
"Series": "Bar",
"Value": 9
},
];
//Uncomment the following line to see the correct data
//dr.push({"Category": "1", "Series": "Bar", "Value": 7});
var ds = new kendo.data.DataSource({
data: dr,
group: { field: "Series"},
sort: [{field: "Category", dir: "asc"}]
})
$("#chart").kendoChart({
dataSource: ds,
seriesDefaults: {
type: 'column',
labels: {
visible: true,
template: "#=kendo.format('{0:0}', value)#"
}
},
legend: {
visible: true,
position: "bottom"
},
series: [{
field: "Value"}],
categoryAxis: {
field: "Category"
},
tooltip: {
visible: true,
template: "#= dataItem.Series # #= dataItem.Category # #= dataItem.Value #"
}
});
Thanks in advance for the help!

Related

Non-static values for chart using CanvasJS?

I'm trying to figure out how to make a dynamic bar chart using CanvasJs.
The basic set up for the chart is as follows:
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
My goal is to use a simple variable to update the dataPoints instead of static numbers such as 10,15, 25.
User's will input numbers and the chart should update based on their input.
Is this possible to do? Setting "Y" to a variable breaks the chart thus far. I'm unsure how to make this work.
I've also tried setting var input = $('input').html
and setting y as input but it does not work.
Thanks!
If anyone else is trying to figure this out here is how this is handled:
Use variable to assign data points in creating CanvasJS graph?.
This also works with Charts.JS.

Bar Chart Highchart.JS to C3.JS

I need to convert this Highcharts.JS chart to C3.JS chart
http://i.imgur.com/iwk3pyO.png
This was the Highcharts.JS code:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.
https://jsfiddle.net/joefclarin/dh5epj0v/
Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:
Instead of
regions: [
{start: 0, end: 1, class: 'red-color'}
]
You need to hack the end value according to how many items are less than 1 in your categories?. You code would be probably like this:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
then in your chart option:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
In your case, fctGetItemLessThan1() - 1 = 9, the result is as follow

Highcharts overlay multiple datetime series

I want to overlay two datetime x-axis which are not from the same daterange but have the same number of points (point index x from series 1 should be next to point index x from series 2).
I tried to achieve this with two x-axis where one being hidden.
I basically seems to work but the bars only align at certain zoom levels.
Zoomed-In:
Zoomed-Out:
Here is a jsfiddle with the settings I tried:
"xAxis": [{
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
visible: false
}, {
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
}
I think you want to use categories - that way you will get points axis evenly spaced, take a look: http://jsfiddle.net/8wahvryx/2/
"xAxis": [{
"type": "category",
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
}, {
"type": "category",
visible: false
}]
And if you don't want to change your data format, you can override keys from array (by default it is [x, y]) to support names:
plotOptions: {
column: {
keys: ['name', 'y']
}
},
Note: In categorised axis, point.name is used as category name below the point. Use xAxis.labels.formatter or xAxis.labels.format to change timestamps to hours.
The solution from #pawel fus might work in most cases, unfortunately did not for for me.
I ended up using the exact same values for the x-axis of both series and only set a different name for each value.

Format X axis interval in the Chart - Kendo UI

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.

Force date Axis in Kendo Dataviz to have all values

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"
}
});

Categories