开发者

How to display Tips in Group Line Chart in Extjs 4?

开发者 https://www.devze.com 2023-03-11 16:36 出处:网络
I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for

I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:

Code For Panel and Line charts:

var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
    width: 800,
    height: 600,
    hidden: false,
    id:'ChequesDetailsChartsMonthWiseWinId',
    title: 'Line Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: ChequesDetailsLineChartsMonthwiseStore,
        shadow: true,
        theme: 'Category1',
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
            title: 'Amounts (In Rs)',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['month'],
            title: 'Month of the Year'
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'month',
            yField: 'Honorarium',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
             tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout:开发者_StackOverflow社区 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');

                    this.setTitle("Information for " + 'Honorarium  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'month',
            yField: 'Program Expenses',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
                 tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');

                    this.setTitle("Information for " + 'Program Expenses  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
          //  fill: true,
            xField: 'month',
            yField: 'Assets Amount',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
             tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');

                    this.setTitle("Information for " + 'Assets Amount  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
           // fill: true,
            xField: 'month',
            yField: 'Human Resource',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');

                    this.setTitle("Information for " + 'Human Resource  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }]
    }
});

And Sample Preview is : Line Chart :

How to display Tips in Group Line Chart in Extjs 4?

Line Chart :

How to display Tips in Group Line Chart in Extjs 4?

Please provide me solution of how to display tips in all charts or where I am doing wrong.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号