1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    bigrowedogg is on a distinguished road

      0  

    Default How to capture the exact series name from item click on a line chart

    How to capture the exact series name from item click on a line chart


    I am trying to capture the exact series name from the item click on a line chart my code looks like the following

    Code:
    function showChart() {
       var store = Ext.data.JsonStore{ (
            fields: [ 'date', 'sales', 'rev' ],
            url: 'chartRender.jsp'
            root: 'data',
            autoLoad: true
       } );
    
      var chartPanel = new Ext.Panel ( {
           title: 'Sales and Revenue Chart'
           renderTo: 'container',
           width: 1000,
           height: 500,
           layout: 'fit',
         
           items: {
             xtype: 'linechart',
             store: store,
             xField: 'date',
         
             xAxis: new Ext.chart.CategoryAxis( {
                      title: 'date'
             } ),
             yAxis: new Ext.chart.NumericAxis ( {
                     title: 'USD'
             } ),
     
             series: [ {
                 yField: 'sales',
                  displayName: 'Sales'
             }, { 
                 yField: 'rev',
                 displayName: 'Revenue'
             } ],
    
            listeners: {
                 itemclick: function(o) {
                        // HOW DO I GET THE NAME OF THE SERIES THE USER CLICKED?
                        // WHAT IS THE "o" OBJECT BEING PASS IN AND WHAT METHODS OR CONTANTS CAN I CALL ON IT?
                        // THE CODE BELOW ONLY GIVES THE INDEX TO THE STORE BUT DOES NOT SAY WHICH SERIES WAS CLICKED BY THE USER
                        var rec = store.getAt(o.index);
                 }
    
            }
      });
    }

    Please help the Ext JS Documentation is not very good and I get confused just trying to find what other listeners can I use and how to use them. I have been trying to figure this out for two days with no progress.

  2. #2
    Ext User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    bigrowedogg is on a distinguished road

      0  

    Default


    I figured this out using FireBug in FireFox. It turns out that the "o" object being passed into the ItemClick function has other public properties and one of them seriesIndex. So my listener code is revised to:

    Code:
    listeners: {
                 itemclick: function(o) {
                     //THIS SERIESINDEX POINTS TO WHICH FIELD WAS SELECTED
                     //IF YOUR FIELDS ARE IN SOME ARRAY THIS WILL WORK NICELY -- I JUST WISH THERE WAS GOOD DOCUMENTATION ON THIS
                     alert ( "Selected: " + o.seriesIndex );   
                    var rec = store.getAt(o.index);
                 }
    
            }

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    1
    Vote Rating
    0
    cindoralla is on a distinguished road

      0  

    Default


    Thanks for your help, bigroweddogg. It has puzzled me for several days.

Similar Threads

  1. Line Chart with series, but values not at the same date
    By pouniok in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 19 Feb 2013, 11:13 AM
  2. Time Series Chart
    By bsautner in forum Ext GWT: Discussion
    Replies: 8
    Last Post: 30 Mar 2010, 6:58 AM
  3. Chart Series refresh - best way?
    By Copernicus in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 15 Aug 2009, 2:36 AM
  4. Chart Series
    By a.ti in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Jun 2009, 7:39 AM
  5. Handle Click Event on Line Chart ?
    By ektanit in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 1 May 2009, 11:09 AM

Thread Participants: 1