Opciones para crear gráficas web

Date

Anteriormente vimos Open Flash Chart trabajando y lo sencillo que es de utilizar. Además de OFC tenemos otras opciones también importantes:

Google nos brinda el “API de Google Chart que permite generar gráficos de forma dinámica”.

Se utiliza llamando a la url de la API de la siguiente forma:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

Este link devolverá una imagen con el gráfico.

Donde:

  • http://chart.apis.google.com/chart? es la ubicación del API de Chart.
  • & separa los parámetros.
  • chs=250x100 es el tamaño del gráfico en píxeles.
  • chd=t:60,40 son los datos del gráfico.
  • cht=p3 es el tipo de gráfico.
  • chl=Hello|World es la etiqueta del gráfico.

graf

Si lo que buscas es algo en PHP, la librería de pChart te puede dar la solución para la personalización  de gráficas.

graf4


Este sería el código (bastante amigable):

<?php
// Standard inclusions
include(“pChart/pData.class”);
include(“pChart/pChart.class”);

// Dataset definition
$DataSet = new pData;
$DataSet->ImportFromCSV(“Sample/bulkdata.csv”,”,”,array(1,2,3),FALSE,0);
$DataSet->AddAllSeries();
$DataSet->SetAbsciseLabelSerie();
$DataSet->SetSerieName(“January”,”Serie1″);
$DataSet->SetSerieName(“February”,”Serie2″);
$DataSet->SetSerieName(“March”,”Serie3″);
$DataSet->SetYAxisName(“Average age”);
$DataSet->SetYAxisUnit(“µs”);

// Initialise the graph
$Test = new pChart(700,230);
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->setGraphArea(70,30,680,200);
$Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);
$Test->drawGrid(4,TRUE,230,230,230,50);

// Draw the 0 line
$Test->setFontProperties(“Fonts/tahoma.ttf”,6);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);

// Draw the line graph
$Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);

// Finish the graph
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties(“Fonts/tahoma.ttf”,10);
$Test->drawTitle(60,22,”example 1″,50,50,50,585);
$Test->Render(“example1.png”);
?>

Este es el resultado:

graf3

Que opción es la mejor, es una cuestión de gusto y personalización. Pero con estas opciones es muy fácíl que hayas encontrado alguna que te pueda dar esa gráfica que buscas.

Conocer más
noticias

Skip to content