CODEWITHSUNDEEP
highcharts
user752746
user752746

Reputation: 617

Highcharts JSON load issue

I have a sample Highchart that I'm try to load JSON data without any luck. I see the data return in firebug but the chart bar and line doesn't get drawn. You can see my chart here jsfiddle.net. I know I'm missing something, but I can't seem to put my fingers on it. Any help would greatly appreciated, thank you in advance.

This is my code:

$(function() {
var options = {
    chart: {
        renderTo: 'container',
        zoomType: 'xy'
    },
    title: {
        text: 'JSON Chart'
    },
    subtitle: {
        text: '2012 vs 2011'
    },
    credits: false,
    xAxis: [{
        categories:['1','2','3','4','5','6','7','8','9','10']
    }],
    yAxis: [{ // Primary yAxis
        min: 0,
        max: 15000,
        tickInterval: 1000,
    labels: {
        formatter: function() {
            return Highcharts.numberFormat(this.value, 0);
        },
        style: {
        color: '#89A54E'
        }
    },
    title: {
        text: '2012',
        style: {
            color: '#89A54E'
        }
    }
    }, { // Secondary yAxis
        min: 0,
        max: 15000,
        tickInterval: 1000,
    labels: {
        formatter: function() {
           return Highcharts.numberFormat(this.value, 0);
        },
        style: {
            color: '#4572A7'
        }
    },
    title: {
        text: '2011',
        style: {
            color: '#4572A7'
        }
    },                        
    opposite: true
    }],
    tooltip: {
        formatter: function() {
           return Highcharts.numberFormat(this.y, 0);
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 40,
        floating: true,
        backgroundColor: '#FFFFFF'
    },
    series: [{
        name: '2011',
        type: 'column',
        yAxis: 1,
        data: []        
    }, {
        name: '2012',
        type: 'spline',
        data: []
       }]
     };
});
$.getJSON('data.cfm', function(json) {
options.series = json;               
var chart = new Highcharts.Chart(options);
})

Here's what data.cfm return:

[[9233,14837,11442,8080,10302,5373,2450,9612,18656,8999],[7963,7845,8646,5130,2570,8936,17487,9141,6728,6046]];

Upvotes: 0

Views: 928

Answers (2)

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

Shoulnt it be?

    options.series[0].data=json[0];
    options.series[1].data=json[1];

Upvotes: 2

Gabriel Florit
Gabriel Florit

Reputation: 2918

This might be of use: http://livecoding.gabrielflor.it/3351656

Upvotes: 0

Related Questions