Chart in HTML (k-options, k-rebind, ...)

1 Answer 333 Views
Charts
J
Top achievements
Rank 1
J asked on 16 Aug 2021, 07:48 PM | edited on 24 Aug 2021, 02:49 PM

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!

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 19 Aug 2021, 12:59 PM

Hello,

As far as I understand you are filling the Chart data at a later stage, thus I suggest setting the autoBind property to false which will prevent the widget from binding to the data source during initialization.

Additionally, I recommend checking the following article giving more information on managing Chart performance.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

J
Top achievements
Rank 1
commented on 23 Aug 2021, 01:40 PM

Hi, thanks for response, I'll try your suggestions. But let me ask one question - is this 'non-jQuery' approach of binding data to chart by HTML attributes, not via the kendoChart function, documented anywhere?
Georgi Denchev
Telerik team
commented on 26 Aug 2021, 08:27 AM

Hi,

The described approach is documented under the MVVM documentation:

https://docs.telerik.com/kendo-ui/framework/mvvm/overview 

https://docs.telerik.com/kendo-ui/intro/widget-basics/mvvm-initialization 

Each chart type has it's own MVVM demo which you can examine.

For example the Bar Chart:

https://demos.telerik.com/kendo-ui/bar-charts/mvvm 

Let me know if you have any questions.

J
Top achievements
Rank 1
commented on 06 Sep 2021, 06:34 AM | edited

Thank you for answers, but they were wrong. At the end I found my answers here:

https://docs.telerik.com/kendo-ui/framework/AngularJS/introduction

And I realized that 'pure AngularJS approach' is not suitable for me, because the couple-thousand-array, which I wrote about, is copied twice for some strange reason and this causes very big delay. So I chose the jQuery approach and it's perfect.

Nikolay
Telerik team
commented on 09 Sep 2021, 06:26 AM

Hello,

I am glad to hear you managed to resolve the situation and thank you for updating us here.

Please let us know if anything new arises.

regards,

nikolay

Tags
Charts
Asked by
J
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or