Encapsulate function to plot N charts

[gabriellima]

Hey everybody, are ok?

So, I am trying plot more two chart using encapsulate function, I did this:

1 - I created a function with highchart:

Code: Select all

function pieChart(div_id, title, data){
	// Radialize the colors
	Highcharts.setOptions({
	    colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
	        return {
	            radialGradient: {
	                cx: 0.5,
	                cy: 0.3,
	                r: 0.7
	            },
	            stops: [
	                [0, color],
	                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
	            ]
	        };
	    })
	});

	// Build the chart
	Highcharts.chart(div_id, {
	    chart: {
	    	plotBackgroundColor: null,
	        plotBorderWidth: null,
	        plotShadow: false
	    },
	    title: {
	        text: title
	    },
	    tooltip: {
	        pointFormat: '{series.name}: <b> {point.y}</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'
	                },
	                connectorColor: 'silver'
	            }
	        }
	    },
	    series: [{
	        name: data.name,
	        type: 'pie',
	        data: data.data.map(function(x){		        	
	        	return {name: x.key, y: x.value}
	    	})
	    }]
	});
}

2 - I call function in JS:

Code: Select all

pieChart("container_1", "Test_1", dados)
pieChart("container_2", "Test_2", dados_2)

3 - HTML code:

Code: Select all

<div id="container_1" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>	
<div id="container_2" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

But the result plot just one chart:
[img]
https://drive.google.com/open?id=1KG154 ... SozyaAmoSU
[/img]

Can anybody help me, please?

[bastss]

Hi gabriellima,

Can you send used data(dados - in your case)? Or can you create your plots at https://jsfiddle.net/ with your data and send the link? It will be much easier to help you.

Kind regards

[gabriellima]

Hey Bastss,

This is the link:

https://jsfiddle.net/m7k45vLw/1/

Thanks.

[bastss]

Gabriellima,

The problem was with function generated radialize colors. To solve it, will help simple condition to check if colors were already 'radializated' and if so, do not 'radializate' them again. If there is created at least one chart, that means gradient is applied.

Example: https://jsfiddle.net/s8oh2zv1/

Best regards!

[gabriellima]

Ooohhhhh God :O
Just it rsrsrs

Thanks very much, bastss.