jquery beginner jquery beginner - 7 months ago 374
Javascript Question

How to fill dynamic json value in drill down highchart

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.

Answer

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);

});