Rendering FusionCharts in ExtJS form

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ritesh Pandey

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<!-- This example shows how to use charts from FusionCharts Suite XT in a Form Component of Sencha ExtJS. We create an instance of column chart, and place it in a ExtJS component. -->

JavaScript

/*
 * Here an ExtJS application named 'Fiddle' is created.
 * We create the different components of ExtJS in the launch callback function.
 */
Ext.application({
    name: 'Fiddle',
    launch: function () {
        /*
         * Here we defined the view porion of the ExtJS.
         * This is the outer container which encapsulates all the view.
         * We place our form as one of the items in this container.
         */
        Ext.create('Ext.container.Container', {
            border: 1,
            style: {
                borderColor: '#99bce8',
                borderStyle: 'solid'
            },
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'form',
                border: false,
                title: 'Sales in this week',
                bodyPadding: 5,
                // Fields will be arranged vertically, stretched to full width
                //layout: 'anchor',
                //defaults: {
                //    anchor: '100%'
                //},

                // The fields
                defaultType: 'numberfield',
                items: [{
                    fieldLabel: 'Monday',
                    name: 'Monday',
                    value: 100
                }, {
                    fieldLabel: 'Tuesday',
                    name: 'Tuesday',
                    value: 110
                }, {
                    fieldLabel: 'Wednesday',
                    name: 'Wednesday',
                    value: 160
                }, {
                    fieldLabel: 'Thursday',
                    name: 'Thursday',
                    value: 190
                }, {
                    fieldLabel: 'Friday',
                    name: 'Friday',
                    value: 10
                }, {
                    fieldLabel: 'Saturday',
                    name: 'Saturday',
                    value: 200
                }, {
                    fieldLabel: 'Sunday',
                    name: 'Sunday',
           ...