High Charts - chart not loading but doesnt shows any error

Question

I am new to JSON and High Charts. I am in need to display dynamic Lines with High Charts. I am using JSON format for this. I am really confused with what is wrong in my code. I dont get any error in Firebug, but the chart is not rendering. Below is my JSON.

{
"data": [
    {
        "AccountName": "[email protected]",
        "Campaign": [
            {
                "id": 1138,
                "name": "Samsung Corporate v2",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 78,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1133,
                "name": "Samsung Corporate Fan Gate oCPM",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 90,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 647,
                "name": "Samsung Corporate Fan Gate",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 646,
                "name": "Samsung Corporate Timeline",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1548,
                "name": "Sauza Tequila v2.0",
                "accountid": 108139269338750,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 953,
                "name": "Samsung Corporate Timeline O C P M",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 738,
                "name": "MSN EN FB",
                "accountid": 106388236165899,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1511,
                "name": "Samsung Passions Program",
                "accountid": 106680966134773,
                "FBImpression": 2786134,
                "CLImpression": 2786134,
                "FBClick": 566,
                "CLClick": 566,
                "FBSpent": 679.77001953125,
                "CLSpent": 679.77001953125,
                "FBConnection": 396,
                "CLConnection": 358
            },
            {
                "id": 917,
                "name": "Samsung Passion App",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1606,
                "name": "Samsung Corporate v2 oCPM",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            }
        ]
    }
]
}

Here goes my html file.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js"></script>
<div id="errq" style="height: 400px"></div>
<script>
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'errq',
                type: 'line'
            },
            title: {
                text: 'shannon.way'
            },
            tooltip: {
                formatter: function() {
                    return this.series.name + ':' + '<b> ' + this.y + '</b>';
                },
                style: {
                    fontSize: '10px'
                }

            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: ''
                },

            },
            xAxis: {
                labels: {
                    enabled: false
                }
            },
            series: [{
                name: 'Budget Spent',

                data: []},
            {
                name: 'Impressions',
                data: []},
            {
                name: 'Clicks',
                data: []},
            {
                name: 'Likes',
                data: []}

                                    ]
        };
        $.getJSON('accounts.json', null, function(data) {
            var str = JSON.stringify(data);

    /* options.series[0].data = data[0].CLImp;    
                         options.series[1].data = data[0].CLClick;  
                 options.series[2].data =    data[0].CLSpent;  
                 options.series[3].data = data[0].CLLikes;  
                      chart = new Highcharts.Chart(options);*/



            var json_parsed = $.parseJSON(str);
            var CLimp = new Array();
            for (var u = 0; u < json_parsed.data.length; u++) {
                var user = json_parsed.data[u];
                for (i = 0; i < user.Campaign.length; i++) {
                    CLimp[i] = parseInt(user.Campaign[i].CLImpression);

                }

            }
            var imp = CLimp.join(",");
            alert(imp);
            options.series[0].data = imp;
            chart = new Highcharts.Chart(options);
        });
    });
</script>

When I alert(imp); I get 78,90,0,0,0,0,0,2786134,0,0 but can't figure it out why the chart is not rendering. Kindly do advice me on this.

can you give more explenation about the error code? Use for example Chrome (right click) -> inspect element. Then shows the error in the inspector's tab. — damoiser
– damoiser, Commented Nov 1, 2012 at 14:39
Why are you converting your object into a string and then the string into an object again? (var str = JSON.stringify(data); and var json_parsed = $.parseJSON(str);) The callback of $.getJSON already gives data in the right format (JSON-decoded). — mgibsonbr
– mgibsonbr, Commented Nov 2, 2012 at 1:14

mgibsonbr · Accepted Answer · 2012-11-02 01:06:45Z

1

Highcharts does not expect data in string format, but in array format. Your problem is that you converted your array into a string:

        var imp = CLimp.join(",");
        alert(imp);
        options.series[0].data = imp;

Just use the array directly and it should work:

        options.series[0].data = CLimp;

Working example at jsFiddle.

answered Nov 2, 2012 at 1:06

mgibsonbr

22.1k7 gold badges73 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

High Charts - chart not loading but doesnt shows any error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related