[Solved] Angular kendo area chart with time axis

[Rajesh]

Hi,

I am trying to bind angular $scope data to a kendo area chart with an x-axis that shows the date and a y axis that shows values.

<div kendo-chart="connectorMetadata.appDowntimeChart"
                           k-title="{ text: 'APP DOWNTIME', visible: false }"
                           k-legend="{ visible: false }"
                           k-chart-area="{ background: '', height:220  }"
                           k-series-defaults="{ type: 'area', markers: { visible: true }, area: { line: { style: 'smooth' } } }"
                           k-series="[{ xField: 'date', yField: 'devicesUpCount' }, { xField: 'date', yField: 'devicesDownCount' }]"
                           k-x-axis="{
                                labels: { format: '{0}' },
                                title: { text: 'Time' }
                             }"
                           k-y-axis="{
                                labels: { format: '{0}' },
                                title: { text: 'Count of devices' }
                             }"
                           k-data-source="connectorMetadata.appDowntimeKSeries"
                           k-tooltip="{
                                visible: true,
                                format: '{0}%',
                                template: ' #= value # #= series.name #'
                            }"
                     >
                     </div>

The datasource has the following contents
$scope.connectorMetadata.appDowntimeKSeries = new kendo.data.DataSource({
        transport: {
            read: function(options) {

                angular.forEach($scope.connectorMetadata.appDowntimeData, function(row){
                    row.date = new Date(row.epochTime);
                })

                options.success($scope.connectorMetadata.appDowntimeData);
            }
        }
    });

where $scope.connectorMetadata.appDowntimeData is an array of objects like the below
{"epochTime":"1409179532000","devicesUpCount":"9","devicesDownCount":"49"}

The charts do not show any data. I call $scope.connectorMetadata.appDowntimeChart.dataSource.read() every time the data is updated.

What am I doing wrong here ?

[Rajesh]

I've update the example and while I have it showing some data, it still does not work

<div kendo-chart="connectorMetadata.appDowntimeKChart"
                           k-title="{ text: 'APP DOWNTIME', visible: false }"
                           k-legend="{ visible: false }"
                           k-chart-area="{ background: '', height:220  }"
                           k-series-defaults="{ type: 'area', markers: { visible: true }, area: { line: { style: 'smooth' } } }"
                           k-series="[{ name: 'Running devices', categoryField: 'date', field: 'devicesUpCount', color:'#d9ce68' }, { name: 'Stopped Devices', categoryField: 'date', field: 'devicesDownCount', color:'#bd84b1' }]"
                           k-x-axis="{
                                labels: { format: '{0}' },
                                title: { text: 'Time' }
                             }"
                           k-y-axis="{
                                labels: { format: '{0}' },
                                title: { text: 'Count of devices' }
                             }"
                           k-category-axis="{
                                visible: false
                        }"
                           k-data-source="connectorMetadata.appDowntimeKSeries"
                           k-tooltip="{
                                visible: true,
                                format: '{0}',
                                template: ' #= value # #= series.name #'
                            }"
                     >
                     </div>

$scope.connectorMetadata.appDowntimeKSeries = new kendo.data.DataSource({
        transport: {
            read: function(options) {

                angular.forEach($scope.connectorMetadata.appDowntimeData, function(row){
                    row.date = new Date(row.epochTime * 1000);
                })

                options.success($scope.connectorMetadata.appDowntimeData);
            }
        }
    });

where $scope.connectorMetadata.appDowntimeData is an array of objects like the below
{"epochTime":"1409179532000","devicesUpCount":"9","devicesDownCount":"49"}

[T. Tsonev]

Hello,

Please accept my apologies for the delayed response.

The area chart is a categorical chart and will use the category axis and value axis. The x/y axis will be ignored for this chart type.
The rest of the configuration looks fine.

Can you share a screenshot or perhaps a sample data set? I just want to be sure that I'm not missing something.

Regards,
T. Tsonev
Telerik

 

 

[Rajesh]

Hi Tsonev,

Thanks for your revert. My data looks like this and I need to create an area chart with the deviceUpCount and devicesDownCount over a time axis with Angular. Any help would be very much appreciated.

{"events" : [{"epochTime":"1409179532000","devicesUpCount":"9","devicesDownCount":"49"},{"epochTime":"1409179534000","devicesUpCount":"41","devicesDownCount":"82"},{"epochTime":"1409179536000","devicesUpCount":"76","devicesDownCount":"17"},{"epochTime":"1409179538000","devicesUpCount":"37","devicesDownCount":"69"}]}

[T. Tsonev]

Hello,

I've prepared a simple demo with the provided sample data set.

I've got something rendered right away, but I did a few tweaks to make it look better.

First, I switched the date axis to automatic fitting which should take care of scaling the chart:
k-category-axis="{ baseUnit: 'fit' }"

Next, I enabled interpolation for the missing values in the data set.
k-series-defaults="{
    type: 'area',
    area: { line: { style: 'smooth' } },
    missingValues: 'interpolate' }"

This is needed as date series will display in chronological order.
While the original data set contains values for each point it doesn't necessarily provide data for any time resolution.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Rajesh]

Thanks. This is just wonderful.  Really appreciate your writing up an example for this.

Can the second series also start from where the first one ends ? Essentially the devicesUpCount + the deviceDownCount add up to the total number of devices. So it would be nice if the graph works just like http://demos.telerik.com/kendo-ui/area-charts/index.

Also what's the best way to ensure there is no redraw of the graph when the scope variable is updated. The flicker a scope update creates is very noticeable.

-Rajesh

[T. Tsonev]

Hi,

Sure thing, we refer to this as stacking:
  type: 'area',
  stack: true

Note that the model fields must be numbers for this to work. I've added a schema to ensure this:
  schema: {
    model: {
      fields: {
        devicesUpCount: { type: "number" },
        devicesDownCount: { type: "number" }
      }
    }
  }

The updates are by design, but can be remedied by turning transitions off as in my updated demo.

Regards,
T. Tsonev
Telerik

 

 

[Rajesh]

Hi Tsonev,

Thanks a ton. Your's response could not have been more timely and helpful. It came in a half hour before my demo :)

If I could get a little greedy here, Can the transition only be between the current and new values rather than start from 0 again. For instance, if I have a stacked progress bar where a value changes from 5 to 8, can I have the widget transition from 5 to 8 rather than redraw the graph set to 8.

[T. Tsonev]

Hello,

I'm glad this helped.

Dynamic transitions are not quite there yet, but we hope to have them at some point.
We're currently replacing parts of the Chart infrastructure that will hopefully allow us to do that.

Regards,
T. Tsonev
Telerik