Hello,
I found this tutorial how to create chart in HTML with jQuery. In our old system we use HTML notation for chart definition like this:
<div id="chart" kendo-chart="chart" k-options="model.chartOptions" k-rebind="model.chartOptions.series" k-on-series-click="events.click(kendoEvent)" ng-mouseleave="events.hover({})"></div>
In controller (we use AngularJS) the $scope.model variable is set like this:
angular.merge($scope.model, {
chartInfo: {},
chartOptions: {
seriesDefaults: {
...
},
legend: {
position: "bottom"
},
valueAxis: {
visible: true,
labels: {
template: "#= kendo.toString(value, 'n') #"
},
min: null
},
chartArea: {
height: 625
},
categoryAxis:{},
transitions: false,
series: {
data: []
},
}
});
Series property is filled from HTTP request result:
$scope.model.chartOptions.series = $scope.model.values;
The problem is that this way of filling series and watching them via k-rebind results in enormous delay (about 30 seconds), because we are loading cca 10 000 items into the chart. For some reason when the $apply and $digest functions are run because the series property has changed, there are two copyings of whole data (including the 10-thousand-item array) processed.
I think I cannot do anything about the middle part (chart rendering), but suppose I can get rid of the two copy parts (before and after rendering) which are probably caused by the 'watcher' - k-rebind. I couldn't check this information because I haven't found any documentation about this, all tutorials are for jQuery $('#chart')....
So can I do anything about it? I tried also filling series in jQuery style and refreshing chart after loading data from BE, but without success...
Thanks for any help.
UPDATE
So, I switched to 'really jQuery' way and my testing code now looks like this:
<div id="chart2"></div>
$("#chart2").kendoChart({
title: { text: "Some title" },
seriesDefaults: {
categoryField: "endTimestamp",
field: "value",
type: "line"
},
valueAxis: {
visible: true
},
categoryAxis: {
type: "date",
baseUnit: "minutes",
baseUnitStep: 15,
},
series: [{
name: "First serie",
data: [
{
value: 150,
startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
},
{
value: 162,
startTimestamp: new Date(2021, 8, 1, 0, 15, 0),
endTimestamp: new Date(2021, 8, 1, 0, 30, 0)
}
]
}],
});
Everything shows fine. But when I try to add another serie into chart
chart2.options.series.push({
name: "Second serie",
data: [
{
value: 110,
startTimestamp: newDate(2021, 8, 1, 0, 0, 0),
endTimestamp: newDate(2021, 8, 1, 0, 15, 0)
},
{
value: 90,
startTimestamp: newDate(2021, 8, 1, 0, 15, 0),
endTimestamp: newDate(2021, 8, 1, 0, 30, 0)
},
{
value: 100,
startTimestamp: newDate(2021, 8, 1, 0, 30, 0),
endTimestamp: newDate(2021, 8, 1, 0, 45, 0)
}]
});
and refresh the chart (the 'series' array contains two items, as it should)
chart2.refresh();
the 'data' property in both series is suddenly empty and so nothing is shown.
I tried also chart2.redraw(), but this one is useless as it does not show the third value in "Second serie", it shows just 110 and 90. And I really need to add data to series and to show all of them.
I'm now looking at 'dataSource' property of kendo chart, but haven't found any way how to assign multiple series into it (it's not in the tutorial).
Thanks for help!