1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Pune
    Posts
    71
    Answers
    5
    Vote Rating
    0
    kislay.kishore is on a distinguished road

      0  

    Default Unanswered: Issue with chart's lengend toggle function

    Unanswered: Issue with chart's lengend toggle function


    Hi,
    I have a multi line chart, it has alomst 12 lines.
    I am facing a wiered issue while using the toggle function of legends.

    When I want to see only one line I toggle off rest of the lines.
    Now, when a click on one of the legends to show only one line at a time, the nodes shows one data-point above.

    For example, instead of showing 4 at 4, 4 shows up at 4.5 and so on.

    The same issue doesnt appear, if there is a line already rendered with higher data points, lets say 5 or above.

    I am using extjs4.1, build date: 2012-04-20.

    Please let me know if this might be a bug (already reported) and already fixed, in the latest release? Or, any workaround available?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Answers
    662
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Are you able to show this in our online examples, or provide a small test case so we can have a closer look? A screen would also be helpful.

    Are you saying the scale is changing as well?

    Scott.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Pune
    Posts
    71
    Answers
    5
    Vote Rating
    0
    kislay.kishore is on a distinguished road

      0  

    Default


    Hi Scott,

    Thanks for your response!

    The scale is not changing, only the data points changes. Please see the descrpency in the screenshot attached.

    I tired to replicate this issue by modifying one of the line chart examples as well, and was able to replicate this issue. I am copying pasting the JS code and html code as below:


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html>
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <
    title>Line Chart</title>
      <
    link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <
    link rel="stylesheet" type="text/css" href="../shared/example.css" />
        <
    script type="text/javascript" src="../../ext-all.js"></script>
     
     
    <script type="text/javascript">
    Ext.require(['Ext.data.*']);
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
    Ext.onReady(function () {
    var myStore= Ext.create('Ext.data.JsonStore', {
        fields: [
      {name: 'month', type:'string'},
      {name: 'Q1', type:'int'},
      {name: 'Q2', type:'int' },
      {name: 'Q3', type:'int' },
      {name: 'Q4', type:'int' }
      
      ],
        data : [
      {
       "month": "Jan",
       "Q1":0,
       "Q2":5,
       "Q3":0,
       "Q4":2
      },
      {
       "month": "Feb",
       "Q1":3,
       "Q2":3,
       "Q3":2,
       "Q4":0
       
      },
      {
       "month": "Mar",
       "Q1":0,
       "Q2":0,
       "Q3":3,
       "Q4":2
       
      } ]
     
      });  
    var panelone = Ext.create('Ext.Panel', {
            width: 500,
            height: 400,
            hidden: false,
            // maximizable: true,
            title: 'Report',
            // renderTo: Ext.getBody(),
            renderTo: 'renderGraph0',
      layout: 'fit',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                    myStore.loadData(myStore);
                }
            }],
            items: {
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: myStore,
                shadow: true,
                theme: 'Category1',
       //theme: 'Red',
                legend: {
                    position: 'bottom'
                },
            axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    position: 'left',
                    fields: ['Q1','Q2','Q3','Q4'],
                    title: 'Questions',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['month'],
                    title: 'Months'
                }],
            series: [{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'month',
                    yField: 'Q1',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
         'fill': '#0000A0',
                        'stroke-width': 0
                    }
                },
        {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                   // smooth: true,
                    xField: 'month',
                    yField: 'Q2',
                    markerConfig: {
                        type: 'circle',
                        size: 6,
                        radius: 6,
                        'stroke-width': 0
                    }
                },
       {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                 //   smooth: true,
                    xField: 'month',
                    yField: 'Q3',
                    markerConfig: {
                        type: 'circle',
                        size: 6,
                        radius: 6,
                        'stroke-width': 0
                    }
                },
       {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    //smooth: true,
                    xField: 'month',
                    yField: 'Q4',
                    markerConfig: {
                        type: 'circle',
                        size: 6,
                        radius: 6,
                        'stroke-width': 0
                    }
                }
       
       ]
            }
        });

    });
    </script>

    </head>
        <body id="docbody">
         <h1>Line Chart Example</h1>
         <div style="margin: 10px;">
            <p>
             Display 2 sets of random data in a line series. Reload data will randomly generate a new set of data in the store. Click on the legend items to remove them from the chart. <a href="Line.js">View Source</a>
       <div id="renderGraph0" style="margin-bottom:15px"></div>
      </p>
         </div>
        </body>
    </html> 
    Attached Images

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    Pune
    Posts
    71
    Answers
    5
    Vote Rating
    0
    kislay.kishore is on a distinguished road

      0  

    Default


    Can anyone please take a look in this issue?

    Thanks!

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Answers
    662
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please upgrade to the latest version. I do not see this behavior in 4.1.1 (Jul '12)

    Toggling Q2 returns it 3 (under red dot)

    Scott.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    Pune
    Posts
    71
    Answers
    5
    Vote Rating
    0
    kislay.kishore is on a distinguished road

      0  

    Default


    Ok! i will try that...but were u able to reproduce this issue with 4.1.x (lower version)?

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Answers
    662
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I was able to duplicate using 4.1.0.

    Scott.

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Location
    Pune
    Posts
    71
    Answers
    5
    Vote Rating
    0
    kislay.kishore is on a distinguished road

      0  

    Default


    ok..thanx....i will try with 4.1.1 and let u know.

Thread Participants: 1

Tags for this Thread