Unable to bind correctly a chart created by template

[Cedric]

Hi,

I'm trying to generate bar chart by using 'data-' configuration & template, but i'm unable to obtain any display.

The desired result is a listview containing several listview containing several bar graph. Each level is generated by a template.

The project can be seen here : http://dojo.telerik.com/@cco/iGix

Any help should be appreciated.
Thanks in advance.

- Mins -

[Cedric]

May be with more informations :
The datasource on the activityChart seems to be correct (it contains the right datas), but nothing is displayed
​

<div class="demo-section k-content">
  <div id="detailChart" data-role="listview" data-template="processTemplate" data-bind="source:ds"></div>
</div>

<script type="text/x-kendo-template" id="processTemplate">
  <div>
    <div class="processTitle" style="text-align:center;">#: ProcessName#</div>
    <div class="activityList" data-role="listview" data-bind="source:Activities" data-template="activityTemplate" ></div>
  </div>
</script>

<script type="text/x-kendo-template" id="activityTemplate">
    <div>
        <div class="activityTitle" style="text-align:center;">#: ActivityDescription#</div>
        <div class="activityChart" data-role="chart" data-bind="source:Status" data-bound="onActivityChartDataBound"></div>
    </div>
</script>

[T. Tsonev]

Hello,

It seems that calling setOptions in the dataBound event doesn't rebind the series.
We'll investigate, but for the moment my suggestion is to keep all the configuration declarative as to eliminate the call to setOptions:

        <div class="activityChart" data-role="chart" data-bind="source:Status"
        data-series="[{ field : 'InitializedCount', name: 'Initialized Count' },
                      { field : 'RunningCount', name: 'Running Count' },
                      { field : 'WaitingCount', name: 'Waiting Count' }]"
        data-series-defaults="{ type: 'bar', stack: true }"
        data-legend="{ visible: false }"
        data-value-axis="{ max: 30, line: { visible: false }, minorGridLines: { visible: true } }"
        data-category-axis: { majorGridLines: { visible: false } }"
        data-tooltip="{ visible: true, template: '\#= series.name \#: \#= value \#' }"></div>

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Cedric]

Thanks a lot, you solution works like a charm.

- Ced -