Question

i have echoed the data from database in another file.. now i am fetching data . I am new to jquery and highchart.. plz help
my data format passed is :

[
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]},
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}
]

my code for highchart is :

var chartOptions = {
    chart: {
        renderTo: 'container',
        zoomType: 'x',
        defaultSeriesType: 'line',        
        backgroundColor: null,
        plotBackgroundColor: null,
        borderRadius:20,
        plotShadow: false,
        events: {
            load: function() {
                //    event.exporting.buttons.infoButton.symbolX=5;
                //    event.exporting.buttons.infoButton.symbolY=2;
                //    info_img=0;
                   // this.renderer.rect(5, 5, 60, 25, 15).attr({    fill: issue_col[1],    zIndex: 0 }).add();
                    }
        },
        style: {
            zIndex: 1
                },
        marginRight:30

    },
    title: {
        text: 'hello',
         style: { 
            fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: '12px',
             textShadow: 'none'
                }
    },
    xAxis: {
        type:'datetime',
        title: {
        text: null
                }
    },
    yAxis: {
       title: {
       text: 'nothing is coming',
            style: { 
            fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: '12px',
             textShadow: 'none'
                }
             },
       min: 0.0,



    },
    credits: {
        enabled: true,
        position: {
            align: 'center',
            x: 10,
            verticalAlign: 'bottom',
            y: -3
        },
        href: "http://www.interscapetech.com",
        style: {
            cursor: 'pointer',
            color: '#909090',
            fontSize: '9px'
        },
        text: "(c)1997- Interscape Technologies Inc. All rights reserved."
    },
    /*labels:{
        items: [{
            html: "TM",
            style: {
                fontSize:'8px',
                left: '330px',
                top: '140px'
            }
        }],
        style: {
            color: 'grey'
            }
    },*/
    lang:{
          downloadButtonTitle:'Download Chart',
          printButtonTitle :'Print Chart',
          infoButtonTitle:'Chart Information',
           switchButtonTitle:'Click to Enlarge'        
     //      switchButtonTitle:'Switch to Bar Chart'
      },

    navigation:{
        buttonOptions:{
            align:'right',
            verticalAlign:'middle',
            height:15,
            symbolFill: '#4572A7',
            hoverSymbolFill: '#768F3E',
            hoverBorderColor:'#92A8CD',
            borderColor:'#3D96AE',
            backgroundColor:'white',
            borderRadius:5,
            borderWidth:2,
            width:20,
            symbolX:10,
            symbolY:8,
            symbolSize:10
        }
    },
    subtitle: {
        text: '',
        align:'left',
        style: {
            fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: '12px',
             textShadow: 'none',
             color: 'white'
                },
        x:3,    //-165 if center
        y:12
    },
    plotOptions: {
        line: {
            lineWidth: 1,
            marker: {
               enabled: false,
               states: {
                  hover: {
                     enabled: true,
                     radius: 5
                         }
                       }

                    },
            shadow: false,
            states: {
               hover: {
                  lineWidth: 1                  
                      }
                    },
            zindex:1
            },
        series:[{
                zindex:1
            }]
    }
    ,
    tooltip: {
        formatter: function() {
            var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x);
            var s = '<b>'+ ctime +'</b>';
            $.each(this.points, function(i, point) {
                var result=Math.round(point.y*10)/10;
                s += '<br/>'+ point.series.name +': '+result;
            });
            return s;
        },
        shared: true,
        backgroundColor: '#FCFFC5'
    },
    legend: {
        itemStyle: { 
            fontFamily: 'Arial',
             fontSize: '12px',
             textShadow: 'none'
                },
         enabled: true
//        symbolPadding: 10
    },
    series: []
   };

$(document).ready(function()
    {

      var url='highchars_test2.php';
alert('helo');

   $.getJSON(url, function(seriesData){

    $(seriesData).each(function(i, pdata){
    console.log();
                if(i==(seriesData.length-1) || i==(seriesData.length-2))
                {}
                else
                {
                    alert(pdata['data']);
                    chartOptions.series.push(pdata);
                }
            });
               chart = new Highcharts.Chart(chartOptions);
   });
   });

cannot create the chart.. plz help..

Answer 1

in series a data is not formatted properly ( opening bracket missing)
I added that and its working
check this out http://jsfiddle.net/q6LVV/