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

Unable to bind correctly a chart created by template

3 Answers 21 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Cedric
Top achievements
Rank 1
Cedric asked on 05 Aug 2014, 05:26 PM
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 -

3 Answers, 1 is accepted

Sort by
0
Cedric
Top achievements
Rank 1
answered on 06 Aug 2014, 10:22 AM
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>
0
Accepted
T. Tsonev
Telerik team
answered on 07 Aug 2014, 07:05 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Cedric
Top achievements
Rank 1
answered on 07 Aug 2014, 09:07 AM
Thanks a lot, you solution works like a charm.

- Ced - 
Tags
Charts
Asked by
Cedric
Top achievements
Rank 1
Answers by
Cedric
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or