O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a live updating chart bound to an editable grid

While the animations in Ext JS 4's charts might be pleasant to watch it's often useful to have charts updating on the fly as your users manipulate data. Here we'll explore how to bind a chart to an editable grid. The user will make changes to the data in the grid and the pie chart will immediately reflect the change.

While you may wish to save the changes made in the grid to your database, you'll notice that the store doesn't need to be reloaded for the pie chart to change.

Creating a live updating chart bound to an editable grid

How to do it...

  1. Start by defining a model for the data we are loading into the chart and grid:
    Ext.define('LanguageShare', ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required