I have a data array containing objects with two fields, date_time and sale_quantity. In my data source I explicitly set date_time type to date.
When I change the sorting on date_time (ASC/DESC), it doesn't change the resulting chart.
var dataSource = new kendo.data.DataSource({
data: [
{"date_time": "2018-09-15T11:20:07.85", "sale_quantity": 1.000},
{"date_time": "2018-09-15T12:50:33.41", "sale_quantity": 3.000},
{"date_time": "2018-09-15T12:53:12.85", "sale_quantity": 3.000},
{"date_time": "2018-09-15T12:54:30.27", "sale_quantity": 2.000},
{"date_time": "2018-09-15T14:59:48.76", "sale_quantity": 3.000},
{"date_time": "2018-09-03T11:25:30.16", "sale_quantity": 1.000},
{"date_time": "2018-08-30T11:43:48.36", "sale_quantity": 1.000},
{"date_time": "2018-08-30T10:50:29.71", "sale_quantity": 1.000},
{"date_time": "2018-08-30T10:43:02.60", "sale_quantity": 1.000},
{"date_time": "2018-08-30T10:20:57.38", "sale_quantity": 1.000},
{"date_time": "2018-08-29T15:28:45.01", "sale_quantity": 1.000},
{"date_time": "2018-08-29T11:22:40.04", "sale_quantity": 1.000},
{"date_time": "2018-08-28T10:05:00.28", "sale_quantity": 1.000}
],
schema: {
model: {
fields: {
date_time: { type: "date" }
}
}
},
sort: {
field: "date_time",
dir: "asc" // DOESN'T SEEM TO AFFECT RESULTING CHART
}
});
$("#chart").kendoChart({
dataSource: dataSource,
title: {
text: "Past 6 Weeks Sales"
},
categoryAxis: {
labels: {
dateFormats: {
weeks: "Week dd/MM"
}
},
baseUnit: "weeks"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent"
}
},
series: [{
field: "sale_quantity",
categoryField: "date_time",
aggregate: "sum"
}]
});
I have set up the exact same data source and used it with a grid, and sorting works fine. I can't figure out why it works with the grid and not with the chart.
Here are the two fiddles: Chart, Grid
Related
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}
]
Here is a DOJO for the issue http://dojo.telerik.com/aweDi/2
I have a chart that I want to display two different lines for each grouped item. The legend shows the same grouped item twice, once for each series, I need that grouped item named different for each series. any clues how to do that?
$("#rightLine").kendoChart({
dataSource: {
data: ko.toJS(my.rightLine()),
group: { field: "Grp_Value" },
sort: {
field: "MonthTrxDateFirst",
dir: "asc"
},
schema: {
model: {
fields: {
date: {
type: "date"
}
}
}
}
},
legend: {
position: "top"
},
series: [{
type: "line",
field: col
}
, {
type: "line",
field: col2
}
],
categoryAxis: {
field: "MonthTrxDateFirst",
labels: {
rotation: -90,
dateFormats:
{
minutes: "HH:mm",
hours: "HH:mm",
days: "dd/MM",
months: "MMM 'yy",
years: "yyyy"
}
}, type: "Date", baseUnit: "months",
crosshair: {
visible: true
}
},
valueAxis: {
labels: {
format: ty
}
},
tooltip: {
visible: true,
format: ty,
background: "white",
// template: "#= series.name #: #= value #"
template: tmplate
}
});
I am working on kendo chart. I am loading 30k data on the chart.
You can see in the code I have attached that, when I zoom in and out with mouse scroll, the process becomes very slow. Is it possible to reduce time of execution for each processes? And also first time loading of the chart is also very slow.
I want to know that is 30k data on Kendo chart should be loaded? Is there any limit that Kendo has set for data loading on the chart?
var Chartdata = [];
function createChart() {
$("#chart").kendoChart({
dataSource: {
data: Chartdata
},
series: [{
type: "scatterLine",
xField: "date",
yField: "close"
}, {
type: "scatterLine",
xField: "date",
yField: "volume"
}, {
type: "scatterLine",
xField: "date",
yField: "high"
}, {
type: "scatterLine",
xField: "date",
yField: "low"
}, {
type: "scatterLine",
xField: "date",
yField: "open"
}, {
type: "scatterLine",
xField: "date",
yField: "symbol"
}],
xAxis: {
name: "Date",
baseUnit: "minutes",
BaseUnitSteps: {
second: [1]
},
labels: {
visible: true,
step: 50,
font: "8px Arial,Helvetica,sans-serif",
template: "#= kendo.toString(new Date(value), 'MM/dd/yyyy HH:mm:ss') #"
},
majorUnit: 1,
majorTickType: "none",
majorGridLines: {
step: 5,
},
minorGridLines: {
visible: true,
step: 1,
},
minorTickType: "none",
majorTickType: "none",
},
yAxis: {
majorUnit: 25,
majorTickType: "none",
majorGridLines: {
step: 1,
},
minorGridLines: {
visible: true,
step: 1,
},
minorTickType: "none",
majorTickType: "none",
},
transitions: false,
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
},
zoom: setRange,
}).data("kendoChart");
}
function setRange(e) {
var chart = e.sender;
var options = chart.options;
e.originalEvent.preventDefault();
var xRange = e.axisRanges.Date;
if (xRange) {
var xMinonzoom = xRange.min;
var xMaxonzoom = xRange.max;
var dMaxonzoom = new Date(xMaxonzoom.getYear(), xMaxonzoom.getMonth(), xMaxonzoom.getDay(), xMaxonzoom.getHours(), xMaxonzoom.getMinutes(), xMaxonzoom.getSeconds());
var dMinonzoom = new Date(xMinonzoom.getYear(), xMinonzoom.getMonth(), xMinonzoom.getDay(), xMinonzoom.getHours(), xMinonzoom.getMinutes(), xMinonzoom.getSeconds());
var diff = dMaxonzoom - dMinonzoom;
if (xMaxonzoom - xMinonzoom < 10) {
return;
}
options.xAxis.min = xMinonzoom;
options.xAxis.max = xMaxonzoom;
chart.refresh();
}
}
$(document).ready(function() {
$.ajax({
type: "GET",
cache: true,
url: "https://api.myjson.com/bins/1uan0",
async: false
}).success(function(result) {
var dataresult = result;
$(dataresult).each(function(e, data) {
Chartdata.push({
"date": new Date(Date.parse(data.date)),
"close": data.close,
"volume": data.volume,
"high": data.high,
"low": data.low,
"open": data.open,
"symbol": data.symbol
});
});
createChart();
});
});
#chart circle {
display: none;
}
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://kendochart.webashlar.com/kendochart/Javascripts/kendo.all.min.js"></script>
<div id="chart"></div>
Thank you
I have created a dojo for you so hopefully this points you to the right direction.
Chart Dojo
All I have done is added in some simple filtering so that based on the min and max zoom you have selected for the grid it will only call those items into the datasource for you rather than the entire dataset.
This is achieved via this bit of code:
var datasource = chart.dataSource;
console.log("DataSource Total before Filtering is:: " + datasource.total());
datasource.filter();
datasource.filter([{field:"date", operator:"gte",value : xMinonzoom }, {field:"date", operator: "lte", value:xMaxonzoom}]);
console.log("DataSource Total after Filtering is:: " + datasource.total());
So this shows you the effect the filtering is having on the data source you are returning back.
If you wanted to speed things up further you could potentially look at grouping for larger data sets i.e. when you first load the grid up as the data to me at that point is just noise (in my opinion) and is not really meaningful to me (but it maybe in your use case).
Think how mapping works with instances zoomed out summarized as a number rather than trying to show all the individual data points until you start zooming in and seeing the data individually.
If you need more info then let me know and I will expand the answer/ provide more info if I can.
This is the code for the line chart which has drag function to highlight some data. I would like to get the datasource information in the dragEnd event,currently I am just getting screenX and screenY values.
function createChart(data) {
$("#TimeSeriesPlot").kendoChart({
title: {
text: series_name.toUpperCase()
},
dataSource :{
data:data.timeseries,
},
series: [{
type: "line",
field:"v",
categoryField:"ts",
}],
valueAxis: {
labels: {
format: "{0}"
},title:{
text: "value"
},
line: {
visible: false
},
},
categoryAxis: {
labels: {
type: "date",
},
tooltip: {
visible: true,
// shared:true,
template: "${category} - ${value}"
},
plotAreaClick: onPlotAreaClick,
seriesClick:onSeriesClick ,
dragStart:onDragStart ,
drag:onDrag,
dragEnd:onDragEnd
});
}
}
function onSeriesHover(e) {
console.log(kendo.format("Series hover :: {0} ({1}): {2}",
e.series.name, e.category, e.value));
}
function onSeriesClick(e){
// console.log(selected_anamolies);
// console.log(e.category);
selected_anamolies.push("ts",e.category);
selected_anamolies.push("v",e.value);
}
function onDragStart(e){
// console.log("dragstart"+e.axisRanges.ts);
// console.log("dragstart"+e.sender._highlight._points[0].value);
// console.log("dragstart"+e.sender._highlight._points[0].category);
}
function onDrag(e){
var Rect = kendo.geometry.Rect;
var draw = kendo.drawing;
prevloc=e.originalEvent.x.startLocation;
currentloc=e.originalEvent.x.location;
var rect=new Rect([prevloc,50],[currentloc-prevloc,150]);
var path = draw.Path.fromRect(rect,{ stroke: null,fill:{color:"#d3f1fb",opacity:0.2}});
var chart = e.sender;
// var surface = draw.Surface.create($("#surface"));
chart.surface.draw(path);
//
}
function onDragEnd(e){
console.log(dragEnd)
}
How can I explode pie chart in Kendo DataViz,
my data is coming from database, and my code is like this:
dataSource: {
data: StageData
},
title: {
align: "center",
text: "Clients by Stage",
font: "14px Open Sans",
color: "#3cb2e1"
},
legend: {
visible: false
},
series: [{
type: "pie",
field: "CountClients",
aggregate: "sum",
categoryField: "StageId",
explodeField: function(){
if(categoryField=="Advocate"){
$(this).explode = true;
}
},
overlay: {
gradient: "none"
}
Here I am trying to explode pie when categoryField is "Advocate", But this is not working.
Could anyone suggest me how can I achieve this.
Thanks
I would probably iterate through the StageData, and set an explode value for each object.
$.each(StageData, function(i, s) {
if(s.StageId === 'Advocate') {
s.explode = true;
}
else {
s.explode = false;
}
});
Sample... http://jsbin.com/hiqaj/1/edit