Creating charts on dashboard

First create four empty panels and make it so that the component test (CT) can display them. These panels are for a pie chart, bar chart, line chart, and a radar chart. This process is very simple and now you should have four empty panels prepared.

To create each chart class as before, we will copy a different view.html and create a new HTML, modify the title and the JavaScript file.

Pie chart for CT

Let's create the class name with MyApp.view.dashboard.Pie. Please see the following source files for the code:

• 01_making_charts_on_dashboard/ct/dashboard/pie_view.html

• 01_making_charts_on_dashboard/ct/dashboard/pie_view.js

  ...
  Ext.onReady(function() {
      Ext.create('MyApp.view.dashboard.Pie', {
          width: 800,
          height: 600,
          renderTo: Ext.getBody()
      });
  });
  ...

We'll now implement the class specified in the previous code (source file: 01_making_charts_on_dashboard/app/view/dashboard/Pie.js).

Ext.define('MyApp.view.dashboard.Pie', {
    extend: 'Ext...