I know this title seems a bit odd, i couldn't explain it better.
Here is what i need. I have this javascript function and i need to pass the data as a String variable to it:
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], ['Others', 0.7] ]
How can i do it?
I want it to look like 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 have tried solution by @moonwave99 :
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 outcome 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
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 stringify and pass as parameter to your function:
var data_str = JSON.stringify(data);
drawChart(data);
Then convert to back to JSON
series: [{
...
data: JSON.parse(data)
}
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 fiddle.
EDIT2: I had a look at this library API, and you don't need a string, but an array of options! Read the docs and you'll have it done.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With