How to fill dynamic json value in drill down highchart

Question

I'm trying to populate below json dynamically in drill down highchart, but data is not populating as expected.

I would like to fetch all user and put it in graph and in the drill down of each user i've to show success,error,cancel, visit,enroll, uninstall

I created rill down highchart with static data, please find the below link below:

This graph is my expected result:

http://jsfiddle.net/jqueryb/ndfk7vgd/2/

My JSON:

var result=    [
      {
        "userId": "user1",
        "success": 1,
        "error": 0,
        "cancel": 0,
        "visit": 3,
        "enroll": 2,
        "uninstall": 0
      },
      {
        "userId": "user2",
        "success": 2,
        "error": 0,
        "cancel": 0,
        "visit": 4,
        "enroll": 2,
        "uninstall": 0
      },
      {
        "userId": "user3",
        "success": 1,
        "error": 0,
        "cancel": 0,
        "visit": 2,
        "enroll": 1,
        "uninstall": 0
      },
      {
        "userId": "user4",
        "success": 0,
        "error": 0,
        "cancel": 2,
        "visit": 4,
        "enroll": 2,
        "uninstall": 0
      }
    ]

I tried below code to populate value dynamically in drill down but no luck :(

<script type="text/javascript">
    function loadChart(result) {
        var user_data = [];
        $.each(JSON.parse(JSON.stringify(result)), function(idx, obj) {
            user_data.push(['{ name:' + obj.userId + ',y:1}']);
        });
        var test_data = '[' + user_data + ']';
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Basic drilldown'
            },
            xAxis: {
                type: 'category'
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Things',
                colorByPoint: true,
                data: test_data
            }]
        });

    }
</script>

It would be very grateful if someone can help me to solve this issue. Thanks in advance.

build your data and pass it in correctly. you have to build your series data first. Also you have no built your drill down data yet. — Hieu Le, Sep 24 '15 at 06:33
yes I've not build drill down because my series data itself not coming properly, I tried to built series data dynamically but data not populating properly. If you ** test_data ** coming dynamically but i'm doing something wrong there :( — jquery beginner, Sep 24 '15 at 06:37

score 4 · Accepted Answer · edited May 07 '16 at 00:09

From a php while loop, how do you echo the var results section below to use in the chart when the var results are from a query result?

var result = [
{
    "userId": "user1",
    "success": 1,
    "error": 0,
    "cancel": 0,
    "visit": 3,
    "enroll": 2,
    "uninstall": 0
},
{
    "userId": "user2",
    "success": 2,
    "error": 0,
    "cancel": 0,
    "visit": 4,
    "enroll": 2,
    "uninstall": 0
},

etc...

];

Build your data correctly for highcharts:

When data is in json form, you can just use js basic objects to build it.

See it working here: http://jsfiddle.net/x934L81p/1/

Build your series data like this:

    var user = {};
    user.name = obj.userId;
    user.y = 1;
    user.drilldown = obj.userId;
    user_data.push(user);

Then build your drilldown in the same loop:

    var drilldown_user = {};
    drilldown_user.id = obj.userId;

    drilldown_user.data = [];        
    drilldown_user.data.push(['success', obj.success]);
    drilldown_user.data.push(['error', obj.error]);
    drilldown_user.data.push(['cancel', obj.cancel]);
    drilldown_user.data.push(['visit', obj.visit]);
    drilldown_user.data.push(['enroll', obj.enroll]);
    drilldown_user.data.push(['uninstall', obj.uninstall]);

    drill_down_data.push(drilldown_user);

Putting it all together:

var user_data = [];
var drill_down_data = [];

$.each(JSON.parse(JSON.stringify(result)), function(idx, obj) {
    var user = {};
    user.name = obj.userId;
    user.y = 1;
    user.drilldown = obj.userId;

    user_data.push(user);

    var drilldown_user = {};
    drilldown_user.id = obj.userId;

    drilldown_user.data = [];
    drilldown_user.data.push(['success', obj.success]);
    drilldown_user.data.push(['error', obj.error]);
    drilldown_user.data.push(['cancel', obj.cancel]);
    drilldown_user.data.push(['visit', obj.visit]);
    drilldown_user.data.push(['enroll', obj.enroll]);
    drilldown_user.data.push(['uninstall', obj.uninstall]);

    drill_down_data.push(drilldown_user);

});

How to fill dynamic json value in drill down highchart

1 Answers1