javascript - Ext JS 5 clustered chart -
did tried implement clustered chart in ext js 5?
i see example in ext js legasy kitchen sink .
but there no example in usual kitchen sink.
i tried copy example legacy kitchen sink cannot make work on local server. can displayed on attached screenshot :
may problem in ext js version? use 5.0.0.970 , seems latest version now.
i achieved using stacked: false
.
code examples.
chart:
ext.define('app.domain.chart', { extend: 'ext.chart.cartesianchart', title: 'chart', alias: 'widget.appdomainchart', legend: { docked: 'bottom' }, interactions: ['itemhighlight'], colors: ['blue', 'red'], axes: [{ type: 'numeric', position: 'left', adjustbymajorunit: true, grid: true, fields: ['actualparameter'], minimum: 0 }, { type: 'category', position: 'bottom', grid: true, fields: ['controlvalue'], }], series: [{ type: 'bar', axis: 'left', title: ['fact', 'planned'], xfield: 'controlvalue', yfield: ['actualparameter', 'plannedparameter'], display: 'outside', stacked: false, style: { opacity: 0.80 }, highlight: { fillstyle: 'green' }, tooltip: { style: 'background: #fff', renderer: function (storeitem, item) { var browser = item.series.gettitle()[ext.array.indexof(item.series.getyfield(), item.field)]; this.sethtml(browser + ': ' + storeitem.get(item.field) + '.'); } } }] });
data:
{ "data": { "items": [ { "id": 54, "objectname": null, "stagename": null, "result": "result 1", "controlvalue": "control value 1", "plannedparameter": 10.0, "actualparameter": 10.0, "unit": "days", "indicator": 1 }, { "id": 55, "objectname": null, "stagename": null, "result": "", "controlvalue": "control value 2", "plannedparameter": 3.0, "actualparameter": 3.0, "unit": "departments", "indicator": 1 }, { "id": 56, "objectname": null, "stagename": null, "result": "", "controlvalue": "control value 3", "plannedparameter": 100.0, "actualparameter": 100.0, "unit": "%", "indicator": 4 } ], "totalcount": 3 }, "errors": [], "success": true, "totalcount": 3, "globalerrors": [] }
result image: http://screencast.com/t/ilb0myziuj4
Comments
Post a Comment