Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Exercise 3-7: Visualizing Data

Page of 168

Overview

In this lab, you will perform the following tasks:

  • Define a model and store for plotting data in a chart.
  • Dynamically load data into a store.
  • Define a column chart.
  • Format the axes of a column chart.

Description

During this exercise you will enhance the Congressional Earmark Browser by implementing a column chart, depicted below, that depicts their relative success at funding projects for their constituents.

In this exercise you will enhance the Earmarks view.

Steps

Open the Project

  1. Run Sencha Architect
  2. Select File > Open Project...
  3. 3. Select /paht/to/arch101/desktop/lab/exercise7/exercise7.xds. Note that this is the solution from the prior walkthrough.
Define the Chart Data Model
  1. In the Project Inspector, click on the [+] and select Model.
  2. In the Project Inspector, click on the MyModel2 model.
  3. Modify the following Ext.data.Model property:
    • userClassName: ChartDatum
  4. In the Config panel, click on the [+] adjacent to the Fields property and enter the following field names:

    label,value

  5. In the Config panel, click on the [+] adjacent to the proxy attribute and select JsonP Proxy
  6. In the Project Inspector, click on the JsonP proxy and configure the url property to the following:

    http://webapps.figleaf.com/arch101/dataservices/desktop/earmark.cfc?method=getSponsorStats
Define the Chart Data Store
  1. In the Project Inspector, click on the [+] and select Store.
  2. In the Project Inspector, click on the MyStore3 store and configure the following properties:
    • userClassName: ChartData
    • remoteFilter: checked
    • storeId: ChartData
    • model: ChartDatum
Load Data into the Chart Store
  1. In the Project Inspector, in the Sponsors controller, double-click on the selectionchange event.
  2. At the end of the function, insert the following code to load data into the ChartData store:
Ext.getStore('ChartData').clearFilter(true);
Ext.getStore('ChartData').filter([
 {property: 'IDSPONSOR', value: aSponsorIds.join(',')}
]);

Define the Chart View
  1. In the Project Inspector, click on the SponsorChart view.
  2. From the Toolbox, drag a Column Chart object and drop it onto the SponsorChart view.
  3. Configure the following property:
    • store: ChartData
  4. In the Project Inspector, click on MyColumnSeries and configure the following properties:
    • xField: label
    • yField: value
  5. In the Config panel, click the button adjacent to the label property and modify the code as follows:
{
  'display':'insideEnd',
  'field':'value',
  'color':'#333',
  'text-anchor':'middle'
}
  1. In the Project Inspector, click on the Category Axis and configure the following properties:
    • fields: label
    • title: Representative
  2. Click on the button adjacent to the label property and enter the following syntax into the code editor:
{
 rotate: { degrees: 45 },
 renderer: function(s) {
   return Ext.String.ellipsis(s,10);    
 }
}
  1. In the Project Inspector, click on the Numeric Axis object and configure the following properties:
    • fields: value
    • title: Expenditures ($000)
    • minimum: 0
  2. Click on the button adjacent to the label property and enter the following syntax into the code editor:
{
    renderer: function(v) {
        return Ext.util.Format.currency(v,null,0);
    }
}
  1. Click Save
  2. Click Preview.
  3. Select multiple congressional representatives. You should see a chart appear that displays their relative performance.
  4.  

- End of Exercise -

Page of 168
comments powered by Disqus