Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Débora Pinheiro

Apresentar DOIS gráficos Highcharts no mesmo formulário

Por , em PHP

Recommended Posts

Débora Pinheiro    0

Débora Pinheiro
Postado

Pessoal, preciso de uma orientação.

 

Gerei um gráfico HIGHCHARTS, que obtem as informações da base, até ai perfeito.

Mas quando quero na mesma página apresentar ou grafico de estilo diferente para dados da base diferentes os graficos não são mais apresentados.

 

Tentei mudar o nome da DIV que o gráfico é apresentado mas mesmo assim não exibe os gráficos.

Alguém sabe o que posso fazer para exibir os dois ou mais gráficos na mesma página?

 

exemplo do meu gráfico 01 :

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
${demo.css}
		</style>
		<script type="text/javascript">
		
		<?php 
			
			$perct_sprint = $_GET["perct_sprint"];
						?>
		
$(function () {
    $('#container2').highcharts({
        chart2: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
		
		
		
		
        series: [
		
			
						
		
		
		
		
		{
            name: 'Year 1800',
            data: [ <?php echo $perct_sprint; ?>,635, 203, 2]
			
        },







		]
    });
});
		</script>
	</head>
	<body>
<script src="grafico/js/highcharts.js"></script>
<script src="grafico/js/highcharts-3d.js"></script>
<script src="grafico/js/modules/exporting.js"></script>


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

	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luis Paullo    47

Luis Paullo
Postado

Bom, não é o caso de usar dois seletores ?

 

Talvez uma abordagem diferente ao recuperar os dados do servidor!

 

Usando AJAX para pegar dados paras os 2 chart.

 

(function($){
            $('#container1').highcharts({}); //chart 1
             $('#container2').highcharts({}); //chart 2
}(jQuery));
//Html
<div id="container1"></div>
<div id="container2"></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito