Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass Data String as parameter to a Function for HighCharts

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:

enter image description here

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

like image 298
MaVRoSCy Avatar asked Dec 21 '22 15:12

MaVRoSCy


2 Answers

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)
    }
like image 130
balafi Avatar answered Feb 01 '23 22:02

balafi


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.

like image 39
moonwave99 Avatar answered Feb 01 '23 23:02

moonwave99