[Solved] Passing colour and a variable to donut kendo-chart

[Vadim]

Hi, 

 I'm having a few issue with the following piece of code:

<div kendo-chart
     k-transitions="true"
     k-theme="'flat'"
     k-legend="{ position: 'bottom',
                 labels: { template: '#= series.name #: #= value #' }}"
     k-series-defaults="{ type: 'donut',
                          holeSize: 45,
                          labels: { position: 'center', visible: true, background: 'transparent', color: 'white' }}"
     k-series-colours="[ '#309B46', '#E61E26' ]"
     k-chart-area="{ height: 170 }"
     k-series="[{ name: 'Normal', field: 'value', color: '#65c178' },
                { name: 'Offline', field: 100 - 'value', color: '#E61E26' }]"
     k-data-source="donutData"
     k-tooltip="{ visible: true,
                  template: '#= series.name #: #= value #' }"
    >

 My controller defines 'value' field, and the chart shows up, but I'm still having a few problems.

1) How can I call this directive with different a field variable without defining almost the same directive again? 
Say I have 'value' and 'value2', and I want to generate chart for each one of them, and call the same directive without explicitly defining it for each of the values.

2) How can I get "field: 100 - 'value'" to resolve in a directive? I don't want to have view logic in my controller 

3) How do I set colours for this chart? Colour parameter in k-series doesn't work even if I pass it from my controller, and neither does k-series-colours

 Thanks in advance for your help.

 Kind Regards,
Dima

[T. Tsonev]

Hi,

Sorry for the delay.

You can build a custom directive to encapsulate the chart, as you'd normally do for any reusable block of content.
We have a tutorial on how to do this for another widget, but it applies to any widget.

You can't have computed expressions in series fields. These should be pre-computed in the model you're binding to.

I'm sure the last issue is caused by the way we spell "color". This seems to be the standard on the web.

I hope this helps.

Regards,
T. Tsonev
Telerik