My chart has a calories vs time data. The calories has values every 15 min. I want to make the bars closer. I am posting a sample of the data and also a link to the jsFiddle. Also, is it possible to have the entire 24 hours displayed on the chart and show only the ones which are having values...
var data= [{"IntraDayFifteenMinuteActivityKey":443124,"id":"abcd","datetimedata":"7/20/2014 4:15:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443125,"id":"abcd","datetimedata":"7/20/2014 4:30:00 AM","caloriesOut":"20","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443126,"id":"abcd","datetimedata":"7/20/2014 4:45:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443127,"id":"abcd","datetimedata":"7/20/2014 5:00:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443128,"id":"abcd","datetimedata":"7/20/2014 5:15:00 AM","caloriesOut":"17","distance":"0.00442800018936396","elevation":"0","floors":"0","steps":"6","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443129,"id":"abcd","datetimedata":"7/20/2014 5:30:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"}]
$("#IntraDayDataChart").kendoChart({
dataSource: data,
seriesColors: [color],
chartArea: {
background: ""
},
title: {
text: "Intraday Data",
font: "14px Arial,Helvetica,sans-serif bold"
},
legend: {
visible: false,
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "column",
overlay: {
gradient: "none"
},
gap: .1
},
series: [{
name: type,
field: type
}],
categoryAxis: {
field: "datetimedata",
majorGridLines: {
visible: false
},
majorTicks: {
visible:false
},
type: "date",
baseUnit: "minutes",
labels: {
dateFormats: {
minutes: "h tt"
},
step:180
}
},
valueAxis: {
majorGridLines: {
visible: true
},
majorTicks: {
visible:false
},
labels: {
visible: false
},
title: {
text: type,
font: "14px Arial,Helvetica,sans-serif"
},
visible: false
},
tooltip: {
visible: true,
template: '#=kendo.toString(new Date(dataItem.datetimedata),"g")# <br /> #=kendo.toString(Number(dataItem.' + type + '),"n2")# ' + type
}
});
}
}
Link to Fiddle
To make your chart lines thicker you need to decrease the gap in the series.
$("#chart").kendoChart({
series: [ {
gap: 0
}]
});
Here is the API reference
http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-series.gap
They have a tutorial of how to do this on the fly as well.
http://demos.telerik.com/kendo-ui/bar-charts/gap-spacing
For only displaying the time with data you would have to define the CategoryAxis as type 'category' instead of type 'date'. When you define it as a date kendo will fill in all the missing data points with blank so that it looks right. For this to work you may have to convert you dates to something that will order right as a category.
You instead could have kendo auto aggregate your data such that it will chunk together time. You can set this by setting the baseUnit in the CaregoryAxis to 'fit'
$("#chart").kendoChart({
categoryAxis: {
baseUnit: "fit"
}
});
Related
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
My chart is plotting x-axis points from Jan 1 1970. My js is below. Is the format of my x-coordinates what is causing the problem, and if so, how can I get these dates right?
var chart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [{
data: [{x:15-04-2018,y:10},{x:16-04-2018,y:20},{x:17-04-2018,y:30}],
borderColor: '#3e95cd',
fill: false
}]},
options: {
scales: {
xAxes: [{
type: 'time',
unit: 'day' ,
distribution: 'linear',
ticks: { source: 'data' },
time: { displayFormats: { day: 'MMM DD' } }
}]
},
title: {
display: true,
text: 'Student Assessment Cluster Scores'
},
} });
The date values must be entered as a javascript Date object. Just like the documentation says,
data: [{
x: new Date(),
y: 1
}, {
t: new Date(),
y: 10
}]
So in my question, the dates could be represented by:
data: [
{x:new date(15-04-2018),y:10},
{x:new date(16-04-2018),y:20},
{x:new date(17-04-2018),y:30}
]
In the example: http://jsbin.com/AreqameT/1/edit Can the labels below the bar chart made clickable in kendo charts?
The text "Sales and Contracting" and other labels should be made clickable. Can this be done?
JS code:
$("#chart").kendoChart({
legend: {
position: "bottom"
},
seriesDefaults: {
labels:{
visible:true,
template: '#=kendo.format("{0:0}", value)#'
}
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
labels: {
visible: true,
template: '#alert(1)#"'
},
target: {
color: "transparent",
border: {
width: 2,
dashType: "dot",
color: "#444"
},
line: {
width: 0
}
},
data: [
{
score: 93.7,
average: 65.2
}, {
score: 80.2,
average: 22.2
}, {
score: 60.8,
average: 35.2
}, {
score: 82.1,
average: 45.2
}, {
score: 74.2,
average: 55.2
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
HTML code:
<body>
<div id="chart"></div>
</body>
Thanks in advance.
Using a newer version of Kendo (your jsBin uses a 2013 version... update to 2014.2) you can use categoryAxis.labels.template to add a link to your labels.
categoryAxis: {
labels: {
rotation: -45,
template: '<a xlink:href="http://www.google.com">#: value #</a>'
},
(note the addition of xlink: in the tag)
To better explain, the labels are actually part of an SVG image, not plain HTML. However, SVG supports links: http://www.w3.org/TR/SVG/linking.html#Links
For some reason the older 2013 version of Kendo seem to remove the link from the template though. I tried it with 2014.2.716 and it seemed to work.
Your Jsbin eg not working. Attach a event axisLabelClick or legendItemClick
axisLabelClick: function(e) {
console.log(e.axis.type, e.value);
}
legendItemClick: function(e) {
console.log(e.axis.type, e.value);
}
this might work
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 .