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 bar chart with external data

A bar chart is an incredibly useful way of presenting quantitative data to users. This recipe will demonstrate how to create a bar chart and have it load data asynchronously from your server.

Creating a bar chart with external data

Getting ready

This recipe requires the use of a web server for serving the chart's data. A JSON file is provided with example data.

How to do it...

  1. Start by defining a model to define the data we are loading:
    Ext.define('Chart', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'name',
            type: 'string'
        }, {
            name: 'value',
            type: 'int'
        }]
    });
  2. Create a store with an AJAX proxy:
    var store = Ext.create('Ext.data.Store', { model: 'Chart', ...

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