How to relate between ExtJS grid and Jquery chart

Question

I have an ExtJS grid and a Jquery Gauge chart. I want to interact between the chart and the grid. If we select a row of a the grid then the corresponding changes will be reflected in the chart.. This is the code for the grid....

Ext.define('Gamma.view.EdgesGridChart' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.edgesGridChart',
id: 'edgesGridChart',

height: 300,
width: Ext.getBody().getViewSize().width*0.4,
animate: true,
shadow: true,
title : 'Call Information',
store : 'Edges',
loadMask: true,
autoheight: true,
theme: 'Base',
dockedItems: [{
    xtype: 'pagingtoolbar',
    store: 'Edges',  
    dock: 'bottom',
    displayInfo: true,
    items: [
            { 
                xtype: 'tbseparator'
            }
    ]
}],
plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
              clicksToEdit: 1
         })        
],
selModel: {
    selType: 'cellmodel'
},
initComponent: function() {
    this.columns = [{
        header: 'SOURCE', 
        dataIndex: 'source',
        flex: 1
    },{
        header: 'TARGET', 
        dataIndex: 'target',
        flex: 1
    }, {
        header: 'DIR',
        dataIndex: 'dir',
        flex: 1
    }, {
        header: 'PEG', 
        dataIndex: 'peg', 
        flex: 1
    }, {
        header: 'WEIGHT',
        dataIndex: 'weight',
        flex: 1
    }];
this.callParent(arguments);

}

});

This is the code for the gauge chart....

 $(document).ready(function(){
        var gradient1 = {
            type: 'linearGradient',
            x0: 0,
            y0: 0.5,
            x1: 1,
            y1: 0.5,
            colorStops: [{ offset: 0, color: '#C5F80B' },
                         { offset: 1, color: '#6B8901'}]
        };

        var gradient2 = {
            type: 'linearGradient',
            x0: 0.5,
            y0: 0,
            x1: 0.5,
            y1: 1,
            colorStops: [{ offset: 0, color: '#FF3366' },
                         { offset: 1, color: '#B2183E'}]
        };

        var anchorGradient = {
            type: 'radialGradient',
            x0: 0.35,
            y0: 0.35,
            r0: 0.0,
            x1: 0.35,
            y1: 0.35,
            r1: 1,
            colorStops: [{ offset: 0, color: '#4F6169' },
                         { offset: 1, color: '#252E32'}]
        };

        $('#jqRadialGauge').jqRadialGauge({
            background: '#F7F7F7',
            border: {
                lineWidth: 6,
                strokeStyle: '#76786A',
                padding: 16
            },
            shadows: {
                enabled: true
            },
            anchor: {
                visible: true,
                fillStyle: anchorGradient,
                radius: 0.05
            },
            tooltips: {
                disabled: false,
                highlighting: true
            },
            annotations: [
                            {
                                text: 'Wing Span',
                                font: '18px sans-serif',
                                horizontalOffset: 0.5,
                                verticalOffset: 0.8
                            }
                         ],
            scales: [
                     {
                         minimum: 0,
                         maximum: 150,
                         startAngle: 140,
                         endAngle: 400,
                         majorTickMarks: {
                             length: 12,
                             lineWidth: 2,
                             interval: 10,
                             offset: 0.84
                         },
                         minorTickMarks: {
                             visible: true,
                             length: 8,
                             lineWidth: 2,
                             interval: 2,
                             offset: 0.84
                         },
                         labels: {
                             orientation: 'horizontal',
                             interval: 10,
                             offset: 1.00
                         },
                         needles: [
                                    {
                                        value: 56,
                                        type: 'pointer',
                                        outerOffset: 0.8,
                                        mediumOffset: 0.7,
                                        width: 10,
                                        fillStyle: '#252E32'
                                    }
                                  ],
                         ranges: [
                                    {
                                        outerOffset: 0.82,
                                        innerStartOffset: 0.76,
                                        innerEndOffset: 0.68,
                                        startValue: 0,
                                        endValue: 100,
                                        fillStyle: gradient1
                                    },
                                    {
                                        outerOffset: 0.82,
                                        innerStartOffset: 0.68,
                                        innerEndOffset: 0.60,
                                        startValue: 110,
                                        endValue: 150,
                                        fillStyle: gradient2
                                    }
                                 ]
                     }
                    ]
        });

        $('#jqRadialGauge').bind('tooltipFormat', function (e, data) {

            var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '</br>';

            switch (data.elementType) {

                case 'needle':
                    tooltip += 'Value: ' + data.value;
                    break;
                case 'range':
                    tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
            }

            return tooltip;
        });
    });

score 2 · Answer 1 · answered Feb 25 '13 at 17:50

The jqRadialGauge plugin can be updated using the following code:

            var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
            scales[0].needles[0].value = Math.random() * 100;

            $('#jqRadialGauge').jqRadialGauge('update');

In the case that you want to update the jqRadialGauge's needle when ExtJS grid row is clicked you can try using the following code:

   $('#edgesGridChart').on('rowclick', function(grid, rowIndex, columnIndex, e) {
            var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
            scales[0].needles[0].value = rowIndex;

            $('#jqRadialGauge').jqRadialGauge('update');
        }, this);

The code in the second snippet shows how to set the jqRadialGauge first needle to the row index of the clicked row.

Best Regards,
Maxim Milev

Disclaimer: I work for jqChart.

abhi · Accepted Answer · 2013-02-26T17:30:13.540

Once you are done with catching click event, try using this method.

 selectionchange : function(){
    var grid = Ext.getCmp('edgesGridChart');
    var selectedRecords= grid.getView().getSelectionModel().getSelection();
    myData = selectedRecords[0].get('columnName');

    var jquery= $('#jqRadialGauge').jqRadialGauge('option', 'scales');
    jquery[0].needles[0].value = myData ;
    $('#jqRadialGauge').jqRadialGauge('update');

},

score 0 · Answer 3 · answered Feb 25 '13 at 16:07

0

This is high level explanation of how you can achieve...actual implementation will vary.

On row click of grid, set the values and update the data of the jquery model, after that you need to find a way to refresh the chart when the data model is updated.

All this could possibly be done using a jquery custom event that gets triggered from extjs row edit/click event.

answered Feb 25 '13 at 16:07

SriN

54
8

well thanks for showing processing steps... can u help me a little bit with some sample code – Feb 26 '13 at 07:06

How to relate between ExtJS grid and Jquery chart

3 Answers3