This is a migrated thread and some comments may be shown as answers.

angular kendo stacked bar with repeating labels

5 Answers 235 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Rajesh
Top achievements
Rank 1
Rajesh asked on 16 Feb 2015, 04:31 PM
Hi,

I'd like to create an angular kendo stacked bar chart where the same key repeats multiple times.

To illustrate, I want to use the k-series and k-datasource like the following

<div kendo-chart
             k-chart-area='{background:"", height:40, width:800}'
             k-series-defaults="{ overlay: {gradient: 'none'},type: 'bar', markers: { visible: false }, stack: 'true' }"
             k-series="[
                            {name: 'App Stopped', field: 'stoppedDuration', color: '#65c178', labels: {visible: 'true', position: 'left', background: ''} },
                            {name: 'App Started', field: 'runningDuration', color: '#5da2f7', labels: {visible: 'true', position: 'left', background: ''}}
                       ]"
             k-data-source="thismonthseventdata"
             k-value-axis="{labels: { format: '{0}' }, visible: false, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }, axisCrossingValue:0}"
             k-category-axis="{line: { visible: false }, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }}"
                >
        </div>

in the scope variable thismonthseventdata, I'd like to have the same key repeat itself. i.e 

thismonthseventdata.data([{runningDuration:3, stoppedDuration:5, runningDuration:3}]);

This is however not possible since I cannot have a javascript object with duplicate keys. How can I achieve this with kendo stack charts and angular ?

I know I can do this with k-series only without a k-datasource but the data cannot bind to dynamic scope data.

Thanks,
Rajesh

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Feb 2015, 09:09 PM
Hello,

You should be able to use data grouping in this case. It will work not only for two, but for any number of groups.
$scope.thismonthseventdata = {
  data: [{
    type: "Running",
    duration:3
  }, {
    type: "Stopped",
    duration:5
   }, {
    type: "Running",
    "duration": 3
   }],
   group: {
     field: "type",
     dir: "asc"
   }
}

<div kendo-chart
     k-series-colors="['#65c178', '#5da2f7']
     k-series="[{name: 'App #= group.value #', field: 'duration', labels: {visible: 'true', position: 'left', background: ''} }]"
/>

I hope this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajesh
Top achievements
Rank 1
answered on 19 Feb 2015, 06:59 AM
Thanks for your revert. I am looking to create a graph like this.

http://dojo.telerik.com/@rtv/OwaFu

with data bound to a dataSource. How can I modify your above example to display data in this manner ? 
I see that with your example the next running is grouped in a different set.
0
Accepted
T. Tsonev
Telerik team
answered on 23 Feb 2015, 08:35 AM
Hello,

From the sample I see that you need all data points to be on the same stack.

This means we'll need as many series as you have data points.
We can achieve this by grouping on an unique field:
data: [{
  id: 1,
  type: "running",
  duration:10
}, {
  id: 2,
  type: "stopped",
  duration:30
}, {
  id: 3,
  type: "running",
  "duration": 40
}],
group: {
  field: "id",
  dir: "asc"
}

 
The order of the "id" field will determine the order of the points in the stack.
This is the updated snippet. I hope this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajesh
Top achievements
Rank 1
answered on 15 Mar 2015, 05:29 PM
Hi Tsonev,

Thanks a ton. This works just the way I wanted it. I have the epochTime as one of the fields. Would it be possible to use this field instead of the id to display the date on the x-axis ?

-Rajesh
0
T. Tsonev
Telerik team
answered on 18 Mar 2015, 06:55 AM
Hello,

I'm not quite sure I understand the question. Currently, the id is used for grouping and the X-axis shows the duration.

Replacing the id with a timestamp will have no adverse effect as long as the timestamp is unique.

Replacing the duration with a timestamp will also work. In this case you might want to define a label template for the value axis.
k-value-axis="{ lables: { template: "#: new Date(value) #" }"

I hope this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Integration with other JS libraries
Asked by
Rajesh
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Rajesh
Top achievements
Rank 1
Share this question
or