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

      0  

    Question Problem while dynamically generating series for a chart

    Problem while dynamically generating series for a chart


    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.



    My 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>



    Attached Files

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    Pune
    Posts
    71
    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

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