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  

    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
    Answers
    5
    Vote Rating
    0
    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
    Answers
    1
    Vote Rating
    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
    Answers
    5
    Vote Rating
    0
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi