I want to merge two arrays and display them on chart but can't do it. Please show the correct syntax of drawing that type of chart. If someobdy could provide a jsfiddle link it would be better for my understanding. Thanks.

$(function () {
    var name = ['chrome','firefox','opera'];
    var data = [11.22,81.54,6];
    var final = [name,data];

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Results",
            colorByPoint: true,
            data:JSON.parse(final)
        }]
    });
});

I want to merge two arrays and display them on chart but can't do it. Please show the correct syntax of drawing that type of chart. If someobdy could provide a jsfiddle link it would be better for my understanding. Thanks.

$(function () {
    var name = ['chrome','firefox','opera'];
    var data = [11.22,81.54,6];
    var final = [name,data];

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Results",
            colorByPoint: true,
            data:JSON.parse(final)
        }]
    });
});

• javascript
• highcharts

• i am trying this before post data: JSON.parse("[" + final + "]") – Albertestein Commented Sep 5, 2015 at 8:54

1 Answer 1

You don`t have to merge arrays. You have to build new array with list of objects. Those objects should have structure based on arrays that you provided. Propriety "name", of each object, should get its value form the "name" array. Propriety 'y', in its turn should get value from the "data" array. Something like:

var final = [
   {
       name: 'chrome',
       y: '11,22'
   },
   {
       name: 'firefox',
       y: '81.5'
   },
   {
       name: 'opera',
       y: '6'
   }   
]

That is how you can get it:

var name = ['chrome','firefox','opera'];
var data = [11.22,81.54,6];
var final = [];

for(var i=0; i < name.length; i++) {
    final.push({
        name: name[i],
        y: data[i]           
    });        
}  

Here is the fiddle: http://jsfiddle/ujahc83h/2/