Ir para conteúdo

POWERED BY:

Arquivado

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

sergio84

Vários gráficos (charts) na mesma página?

Recommended Posts

E ae pessoal

 

Tenho pouca experiência com PHP, mas já tenho a malícia da programação em scripts.

 

 

A minha proposta de trabalho é montar uma página dashboard, com vários gráficos que ficam lendo alguns dados de um banco mysql e atualizando essas belezuras ná página.

 

Até agora consegui vários exemplos de como gerar gráficos em PHP. Me familiarizei com o highcharts pela qualidade dos gráficos e já consigo montar um gráfico na página.

 

Mas a questão é a seguinte...

Alguém me consegue um exemplo de como colocar mais de um gráfico em uma página, seja html ou php? Tipo, eu gostaria que na mesma página uns 5 gráficos fossem exibidos.

 

Segue um código de um gráfico que estou mexendo.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>...:::DASHBOARD:::...</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="../js/highcharts.js"></script>
		
		<!-- 1a) Optional: the exporting module -->
		<script type="text/javascript" src="../js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container', 
						defaultSeriesType: 'area'
					},
					title: {
						text: 'Riscos x Controles'
					},
					subtitle: {
						text: 'Fonte: <"Trabalho de SGSI">'+
							'Trabalho de SGSI</a>'
					},
					xAxis: {
                        title: {
                            text: 'Controles'
					},
					    	labels: {
                         formatter: function() {
								return this.value ;
					    	}
                            }
					},
					yAxis: {
						title: {
							text: 'Riscos'
						},
						labels: {
							formatter: function() {
								return this.value ;
							}
						}
					},
					tooltip: {
						formatter: function() {
							return this.series.name +' produced <b>'+
								Highcharts.numberFormat(this.y, 0, null, ' ') +'</b><br/>warheads in '+ this.x;
						}
					},
					plotOptions: {
						area: {
							pointStart: 0,
							marker: {
								enabled: false,
								symbol: 'circle',
								radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						}
					},
					series: [{
						name: 'Controles',
						data: [0,20,45,76,98,156,230,350,500,959]
					}, {
						name: 'Riscos',
						data: [0,20,50,89,101,200,290,400,800,1000]
					}]
				});
				
				
			});

		</script>

	</head>
    
	<body>

<center>
		<!-- 3. Add the container-->
		<div id="container" style="width: 500px; height: 300px; margin: 0;" ></div>
</center>


	</body>
</html>


Compartilhar este post


Link para o post
Compartilhar em outros sites

libchart é orientado a objetos.

 

$dataSet = new XYDataSet();
$dataSet->addPoint(new Point("Jan 2005", 273));
$dataSet->addPoint(new Point("Feb 2005", 321));
$dataSet->addPoint(new Point("March 2005", 442));
$dataSet->addPoint(new Point("April 2005", 711));

daí você pode criar quantas instâncias forem necessárias. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

libchart dá uma olhada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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