David Sigley
Reputation: 1198
Dynamically adding to Highcharts
I have a json object which I am trying to add to my highcharts options.
I am able to recieve the object via API, and pass it to my highcharts function, But I am unable to add my data to the static data around it.
var datas;
datas = getData();
//getdata();
alert('2datass'+datas);
console.log(datas);
createChart(datas);
function createChart(data){
alert('createChart'+data); // works - outputs createChart[object Object][object Object][object Object][object Object][object Object]
var dynamicData;
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
}
alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]
var series = [data /*This is where my data should sit*/,{
type: 'column',
name: 'Jane',
data: [300, 30]
}, {
type: 'column',
name: 'John',
data: [-200, 50]
}, {
type: 'column',
name: 'Joe',
data: [444, -25]
}, {
type: 'column',
name: 'Jobe',
data: [444, -25]
}, {
type: 'column',
name: 'Jooe',
data: [444, -25]
},{
type: 'column',
name: 'Jane',
data: [300, 30]
}
, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}];
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: series
};
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
}
function getData(){
//alert('ajax');
var receivedData; // store your value here
$.ajax({
type: "GET",
dataType: "json",
url: "API URL",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};
My solution seems to be the wrong one as the dynamic data is not being added. Any help would be greatly appreciated.
UPDATED CODE:
var dynamicData = {
type: 'column',
name: 'FIRST',
data: [300, 30]
};
//Without the following loop, my chart will display the above entry "FIRST"
//With the loop, the chart omits everything in dynamicData
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
}
alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]
//dynamicData should be 'FIRST' and then 5 other returned rows
var series = [dynamicData, {
type: 'column',
name: 'John',
data: [-200, 50]
}, {
type: 'column',
name: 'Joe',
data: [444, -25]
}, {
type: 'column',
name: 'Jobe',
data: [444, -25]
}, {
type: 'column',
name: 'Jooe',
data: [444, -25]
},{
type: 'column',
name: 'Jane',
data: [300, 30]
}
, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}];
AMENDED CODE, USING .push:
// series has been moved straight into the options variable
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: [{
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
};
//I can now push data straight to seriese (although item.difference doesn't
// work .. perhaps because it's an array)
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
options.series.push({
"type": "column",
"name": item.name,
"data": item.data
});
alert('datavalue' +item.data);
}
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
ANSWER!
This seems to do the trick. Thank you to Speransky Danil for struggling along with me - much appreciated.
var datas;
datas = getData();
createChart(datas);
function createChart(data){
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: [{
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
};
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
options.series.push({
"type": "column",
"name": item.name,
"data": [item.data]
});
}
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
}
function getData(){
//alert('ajax');
var receivedData; // store your value here
$.ajax({
type: "GET",
dataType: "json",
url: "API URL",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};
Upvotes: 2
Views: 14674
Answers (2)
David Sigley
Reputation: 1198
This seems to do the trick. Thank you to Speransky Danil for struggling along with me - much appreciated.
var datas;
datas = getData();
createChart(datas);
function createChart(data){
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: [{
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
};
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
options.series.push({
"type": "column",
"name": item.name,
"data": [item.data]
});
}
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
}
function getData(){
//alert('ajax');
var receivedData; // store your value here
$.ajax({
type: "GET",
dataType: "json",
url: "http://a-website.com/apiv1/summery/get/authKey/1/range/day/",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};
Upvotes: 2
Danil Speransky
Reputation: 30453
The problem is in the loop which contains:
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
First time dynamicData is undefined. When we sum undefined and Object we convert both of them to string and concatinate it, so you get string 'undefined'[object Object]', then 'undefined[object Object][object Object]' and so on (converted to string object is '[object Object]').
Upvotes: 3
Related Questions
- How to generate dynamic series data for highcharts?
- Adding a JSON Response to a HighCharts Graph
- Update highcharts with new set of data
- how to set dynamic data in highcharts
- Add Categories and Series dynamically from JSON in HighCharts
- Highcharts dynamic data from an Api
- How can I dynamically set new data in Highcharts?
- Highcharts add series dynamically
- dynamic highcharts with json data
- Adding multiple dynamic series and axes via JSON into Highcharts