Rendering FusionCharts in ExtJS grid from Sencha

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 Grid Component of Sencha ExtJS). We create multiple instances of column, line and area chart, and place each of them in a cell of the grid. -->

JavaScript

Ext.application({
    name: 'Fiddle',
    launch: function () {
        /*
         * Create an Ext data store with the values that will be fed into the chart.
         * The store will have three fields namely 'column2d', 'line', 'areas2d'.
         * The store has an id 'sampleStore'.
         */
        Ext.create('Ext.data.Store', {
            storeId: 'sampleStore',
            fields: ['column2d', 'line', 'area2d'],
            data: [{
                column2d: {
                    "chart": {
                        "showLabels": 0,
                            "showValues": 0,
                            "showYAxisValues": 0,
                            "bgAlpha": 0,
                            "divLineAlpha": 0,
                            "canvasBgAlpha": 0,
                            "theme": "fint"
                    },
                        "data": [{
                        "label": "Jan",
                            "value": "420000"
                    }, {
                        "label": "Feb",
                            "value": "810000"
                    }, {
                        "label": "Mar",
                            "value": "720000"
                    }, {
                        "label": "Apr",
                            "value": "550000"
                    }, {
                        "label": "May",
                            "value": "910000"
                    }, {
                        "label": "Jun",
                            "value": "510000"
                    }, {
                        "label": "Jul",
                            "value": "680000"
                    }, {
                        "label": "Aug",
                            "value": "620000"
                    }, {
                        "label": "Sep",
                            "value": "610000"
                    }, {
                        "label": "Oct",
                            "value": "490000"
                    }, {
     ...