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

      0  

    Question Answered: How to create series for chart dynamically

    Answered: How to create series for chart dynamically


    I am trying to genrate the series of a line chart dynamically.
    The requirement is to generate the line on Y-axis, dependending upon the number of series user asks for.
    I do some processing in a java script function and it genrates a JSON string for the series.
    Now, when I copy paste the same string and try to generate the chart it works. The same doesn't work if I directly try to use the string which is formed by the JS function.
    I get the error : "series.type is undefined" on Mozilla firefox error console.
    Please suggest, what's worong I am doing?
    Is there any other way of doing what generateSeries() does here. Please avise.



    ----------------------------
    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>
    <script type="text/javascript" src="ext.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="ext-all.css" />
    <link rel="stylesheet" type="text/css" href="example.css" />
    <script type="text/javascript" src="bootstrap.js"></script>
    <!--<script type="text/javascript" src="example-data.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 () {

    function generateSeries( seriesCount, xAxisString, yAxisStringArray ) {

    alert('Inside generateSeries ' + seriesCount );
    alert('xAxisString='+ xAxisString + " "+ 'yAxisStringArray'+ yAxisStringArray[0] );


    for (var i=0; i < yAxisStringArray.length; i++) {
    var chartSeries = yAxisStringArray[i];
    // var cylon = (i + 1) % 2 == 0; //every second man is a toaster

    alert('chartSeries ' + i+'=' +chartSeries);
    }

    //start of series
    var series = '[' ;

    for (var i=0; i < yAxisStringArray.length; i++) {

    var newSeries= "{" +
    "type: 'line', "+
    "highlight: { size: 7, radius: 7 }," +
    "axis: 'left'," +
    "xField:'" + xAxisString + "'," +
    "yField:'"+ yAxisStringArray[i]+"',"+
    "markerConfig: { type: 'cross', size: 4,radius: 4,'stroke-width': 0 }"+
    "}";
    series = series + newSeries;

    if (i!=yAxisStringArray.length-1){
    series = series +',' ;
    }

    }

    series = series + ']';
    //end of series

    alert ("series=" + series);

    // The below the copy paste of the output of the alert msg and it works fine
    /*series = [
    {
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    xField: 'month',
    yField:'Defects Raised',
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    }
    },
    {
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    xField: 'month',
    yField:'Defects Fixed',
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    }
    }
    ]; */

    return series;
    }


    var yAxisSrings = ['Defects Raised', 'Defects Fixed'];
    var series1= generateSeries( 2,"month", yAxisSrings );

    var myStore= Ext.create('Ext.data.JsonStore', {
    fields: ['month', 'Defects Raised','Defects Fixed'],
    data : [
    {
    "month": "Jan",
    "Defects Raised": 10,
    "Defects Fixed": 8
    },
    {
    "month": "Feb",
    "Defects Raised": 14,
    "Defects Fixed": 10
    },
    {
    "month": "Mar",
    "Defects Raised": 20,
    "Defects Fixed": 17
    },
    {
    "month": "Apr",
    "Defects Raised": 8,
    "Defects Fixed": 12
    },

    {
    "month": "May",
    "Defects Raised": 15,
    "Defects Fixed": 15
    },

    {
    "month": "Jun",
    "Defects Raised": 25,
    "Defects Fixed": 20
    },
    ]
    }); //close of Ext.create

    // mystore contains the JSON data
    var panelone = Ext.create('Ext.Panel', {
    width: 500,
    height: 400,
    hidden: false,
    // maximizable: true,
    title: 'Testing Report over Months',
    // 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: ['Defects Raised','Defects Fixed'],
    title: 'No of Defects',
    minorTickSteps: 1,
    grid: {
    odd: {
    opacity: 1,
    fill: '#ddd',
    stroke: '#bbb',
    'stroke-width': 0.5
    }
    }
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['month'],
    title: 'Months'
    }],
    series: series1



    }
    });


    });
    </script>

    <!-- HTML Code -->
    </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>
    <div id="renderGraph1" style="margin-bottom:15px"></div>

    </p>
    </div>
    </body>
    </html>



  2. I resolved the problem by converting the json string for series into json object, using below line of code just before returning from generateSeries( ):

    series= eval('(' + series + ')');

    Still, any other suggestion or solution is welcome!

    Regards-Kislay

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

      0  

    Default


    I resolved the problem by converting the json string for series into json object, using below line of code just before returning from generateSeries( ):

    series= eval('(' + series + ')');

    Still, any other suggestion or solution is welcome!

    Regards-Kislay

  4. #3
    Touch Premium Member
    Join Date
    Sep 2010
    Location
    Boston, MA
    Posts
    24
    Vote Rating
    1
    Answers
    1
    ncooley527 is on a distinguished road

      0  

    Default


    Why not use Ext.JSON.decode and EXT.JSON.encode? Less chances for abuse there...

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

      0  

    Default


    Thanks for your response. Agreed!

    This solution I used quite a few months back...and i just marked it resolved so that it doesnt remain unanswered.

Thread Participants: 1

Tags for this Thread