Extjs add chart to grid column -


i had grid view in extjs, need show bar chart in each row show percentage of values. how can achieve in extjs? maybe image want build.

enter image description here

one way accomplish through deferred rendering of chart. this:

  1. create grid column custom renderer.
  2. in renderer, output div known id. div contain chart.
  3. you defer call (with ext.defer) custom function, passing in id (and required info chart). function render chart.
  4. inside function, create chart , make renderto element passed-in id.

this code approximates should do. want refactor more sensibly.

ext.create('ext.grid.panel', {     height: 300,     store: main_data,     columns: [         { text: 'name', dataindex: 'name', sortable: true },         { text: 'chart', renderer: function (value, meta, record) {             var id = ext.id();             ext.defer(function (id) {                 var chart = ext.create('ext.chart.chart', {                     store: chart_data,                     width: 200,                     height: 100,                     // other chart configuration...                     renderto: id                 });             }, 50, undefined, [id]);             return "<div id='" + id + "'></div>";         } }      ] }); 

Comments

Popular posts from this blog

java - How to Configure JAXRS and Spring With Annotations -

visual studio - TFS will not accept changes I've made to a Java project -

php - Create image in codeigniter on the fly -