All geek questions in one place

Dynamic Adding to Highcharts

I have a json object that I am trying to add highcharts to my parameters.

I can get the object through the API and pass it to my highcharts function, but I cannot 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 color }, { name: 'John', y: 23 //color: '#AA4643' // John color }, { name: 'Joe', y: 19 //color: '#89A54E' // Joe 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 wrong as dynamic data is not 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 color }, { name: 'John', y: 23 //color: '#AA4643' // John color }, { name: 'Joe', y: 19 //color: '#89A54E' // Joe color }], center: [30, 80], size: 100, showInLegend: false, dataLabels: { enabled: false } }];

CHANGED 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 color }, { name: 'John', y: 23 //color: '#AA4643' // John color }, { name: 'Joe', y: 19 //color: '#89A54E' // Joe 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 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 like a trick. Thanks to Speransky Danil for the fact that he is fighting 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 color }, { name: 'John', y: 23 //color: '#AA4643' // John color }, { name: 'Joe', y: 19 //color: '#89A54E' // Joe 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; };
+2
source share
2 answers

The problem is a loop that contains:

 dynamicData = dynamicData + { type: 'column', name: item.name, data: [item.difference] };

The first time dynamicData is undefined . When we summarize undefined and Object , we convert both of them to string and concatenate, so you get the string 'undefined'[object Object]' , then 'undefined[object Object][object Object]' , etc. (Converted to string object is '[object Object]' ).

+3
source

This seems like a trick. Thanks to Speransky Danil for the fact that he is fighting 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 color }, { name: 'John', y: 23 //color: '#AA4643' // John color }, { name: 'Joe', y: 19 //color: '#89A54E' // Joe 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; };
+2
source

Source: https://habr.com/ru/post/985164/

More articles:


All Articles