How to use a javascript variable in highcharts series?

Question

I want to use a javascript variable in a highchart series , but it doesn't seem to work :

function groupBar(n) {
	var nu;
	nu = parseInt(n); 

	var series_b_tab =  <?php echo json_encode($series_bar)?>; 
	
	var series_b = series_b_tab[n];
	series_b = series_b.join(",");
		
    $('#bar_project_'+n).highcharts({
      
        chart: {
            type: 'column',
            height : 300,
            width: 500
        },
        title: {
            text: 'Logements connectés'
        },
        subtitle: {
            text: 'Source: Valenciennes Métropole'
        },
        xAxis: {
            categories: [<?php echo join($legend_bar,',') ?>],
            title: {
                text: null
            },
            labels: {
             	rotation: -45,
            	style: {
                    fontSize: '9px'
                }
            }
        },
        yAxis: [
        {
            min: 0,
            //max: 8000,
            labels:{
                style :{
                    color: 'red'
                }
            },
            title: {
                
                text: 'Nombre de connexions par type',
                align: 'middle'
            },
            labels: {
                overflow: 'justify'
            },
            opposite: true
        },
        // second yAxis
        {
            min: 0,
            //max: 70,
            labels:{
                style :{
                    color: 'red'
                }
            },
            title: {
            	text: 'Pourcentage (%)',
                align: 'middle'
            },
            labels: {
                overflow: 'justify'
            }
        }],
        tooltip: {
            valueSuffix: ' %'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 50,
            y: 60,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true,
            itemStyle: {
                color: 'black', 
                fontSize: '9px'
            }
        },
        
        plotOptions: {
            series: {
                animation: false
            },
        },
  
        series: [{series_b}]
 

    });
};

an exemple of series_b_tab[n] when n=1 is like this :

{name : ' Commité : 0', type :'column', yAxis : 1 ,data : [2436]},{name : ' Commité : 1', type :'column', yAxis : 1 ,data : [2510,171]}

I don't know how to put the content of series_b in series.

Maybe I could use json_parse ?

thanks for your help !

Answer 1

Your current setup, according to your code, is:

series: [{series_b}]

If your example of the content of the series_b variable is accurate, what you need instead is:

series: [series_b]

As each set of curly braces {} hold one series, and you have your series already encapsulated, and have multiple series.

Your original syntax would only accommodate a single series, assuming the series was not wrapped in curly braces.

If that's not clear, simply paste your example series_b content inside the series: [{ }] section, and also within series: [ ], and look at the difference between the two.

Example:

Original way:
series: [{
    {
        name : ' Commité : 0', 
        type :'column', 
        yAxis : 1 ,
        data : [2436]
    },{
        name : ' Commité : 1', 
        type :'column', 
        yAxis : 1 ,
        data : [2510,171]
    }
}]

.

Proper way:
series: [{
    name : ' Commité : 0', 
    type :'column', 
    yAxis : 1 ,
    data : [2436]
},{
    name : ' Commité : 1', 
    type :'column', 
    yAxis : 1 ,
    data : [2510,171]
}]

Answer 2

Create an Array var series=[] and push your series in and in highcharts do following

Instead of

series: [{series_b}]

use

series:series_b