Passing a data string as a function parameter for HighCharts

Question

I know this name seems a little strange, I could not explain it better.

This is what I need. I have this javascript function, and I need to pass the data as a string variable:

var chart; function drawChart() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); } 

I need to pass this data as a parameter to my function

[['Firefox', 45.0], ['IE', 26.8], {name: "Chrome", y: 12.8, sliced: true, selected: true}, ['Safari', 8.5], ['Opera ', 6.2], [' Other ', 0.7]]

How can i do this?

I want it to look something like this

 var chart; function drawChart(dataString) { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: dataString }] }); } 

I tried @ moonwave99 solution:

 var browsers = [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]; 

and

 ........... series: [{ type: 'pie', name: 'Browser share', data: JSON.stringify(browsers) }] ............ 

And my result is this:

Solution : http://jsfiddle.net/USzVy/1/

 var browsers = [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]; function drawChart() { var data_str = JSON.stringify(browsers); var options ={ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, series: [{ type: 'pie', name: 'Browser share', data: JSON.parse(data_str) }] } chart = new Highcharts.Chart(options); } 

thanks

Answer 1

First, define your data as an array, not a string:

  var data = [["Firefox",45.0],["IE",26.8],{name: "Chrome",y: 12.8, sliced: true,selected: true},["Safari",8.5],["Opera",6.2],["Others",0.7]]; 

Then enter and pass as a parameter the function:

  var data_str = JSON.stringify(data); drawChart(data); 

Then convert back to JSON

  series: [{ ... data: JSON.parse(data) } 

Answer 2

Use JSON.stringify :

 var browsers = [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] ... data : JSON.stringify(browsers) ... 

EDIT see the fiddle .

EDIT2: I looked at this library API , and you don't need a string, but an array of options! Read the documents and you will do it.

Answer 3

 function drawChart(data) { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, series: [{ type: 'pie', name: 'Browser share', data: JSON.parse(data) }] }); } var data = "[ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]"; drawChart(data); 

Answer 4

 var chart; function drawChart(dataString) { // options to create the chart var options = { chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, series: [{ type: 'pie', name: 'Browser share', data: dataString // using the parameter }] }; chart = new Highcharts.Chart(options); } // here you get the dataString some way var dataString = [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]; drawChart(dataString); 

Answer 5

Great solutions, I tested your codes, but my chart doesn’t show anything, so I kept track of my values, which I passed as parameters, and my problem was that I send my values ​​as a string, I solve it just converting my data with using the parseInt () command.

  function graficar(var1,var2,var3,var4){ var chart; var datos=[]; datos[0]=parseInt(var1); datos[1]=parseInt(var2); datos[2]=parseInt(var3); datos[3]=parseInt(var4); var datos_str =JSON.stringify(datos); alert(datos_str); chart = new Highcharts.Chart({ chart: { renderTo: 'grafico', type: 'column' }, title: { text: 'Titulo de ventas' }, xAxis: { categories: ['30%', '40%', '50%', '60%'] }, tooltip: { formatter: function() { return ''+ this.series.name +': '+ this.y +''; } }, credits: { enabled: false }, series: [{ name: 'Valores', data: JSON.parse(datos_str) 

.. .. ...

thanks