HTML5

Links:

http://elcentrohtml5.sourceforge.net/Como-construir-un-sitio-anclado-en-menos-de-5-minutos

  • Ejemplo de HTML5 en 260mb.org,  utilizando la libreria RGraph( is a HTML5 Javascript charts library (also referred to as just “JS charts”) which supports over 20 different types of Javascript based charts. Using the new HTML5 canvas tag, RGraph creates these charts in the web browser, meaning quicker pages and less web server load. Using RGraph leads to faster websites. de http://www.rgraph.net/docs/index.html

<?php
/**
* Change these to your own credentials
*/
$hostname = “sql303.260mb.org”;
$username = “mb260_9735036”;
$password = “***********”;
$database = “mb260_9735036_RGraph_example”;

$connection = mysql_connect($hostname, $username, $password) OR die(‘Could not connect to MySQL: ‘ . mysql_error());
mysql_select_db($database);

$result = mysql_query(“SELECT st_day, st_statistics, st_statistics2, st_statistics3 FROM daily_statistics”);
if ($result) {

$labels = array(); //el eje de las x
$data = array(); //el valor a colocar en la intercepcion x e y linea 1
$data2 = array(); // la otra linea 2

while ($row = mysql_fetch_assoc($result)) {
$labels[] = $row[“st_day”];
$data[] = $row[“st_statistics”];
$data2[] = $row[“st_statistics2”];
$data3[] = $row[“st_statistics3”];
}

// Now you can aggregate all the data into one string
$data_string = “[” . join(“, “, $data) . “]”;
$data_string2 = “[” . join(“, “, $data2) . “]”;
$data_string3 = “[” . join(“, “, $data3) . “]”;
$labels_string = “[‘” . join(“‘, ‘”, $labels) . “‘]”;
} else {
print(‘MySQL query failed with error: ‘ . mysql_error());
}
?>

<html>
<head>
<title>Ejemplo rgraph javascript graficas con html5 con PHP y mysql</title>

<meta name=”keywords” content=”rgraph javascript charts html5 canvas basic example” />
<meta name=”description” content=”A basic example” />
<!– Don’t forget to update these paths –>

<script src=”libraries/RGraph.common.core.js” ></script>
<script src=”libraries/RGraph.line.js” ></script>

</head>
<body>

<canvas id=”cvs” width=”700″ height=”250″>[No canvas support]</canvas>
<script>
chart = new RGraph.Line(‘cvs’, <?php print($data_string) ?>);
chart.Set(‘chart.title’, ‘Mi Primera Grafica con HTML5 php y mysql’); <!– titulo –>
chart.Set(‘chart.background.grid.autofit’, true);
chart.Set(‘chart.gutter.left’, 35);
chart.Set(‘chart.gutter.right’, 5);
chart.Set(‘chart.hmargin’, 10);
chart.Set(‘chart.tickmarks’, ‘endcircle’);
chart.Set(‘chart.labels’, <?php print($labels_string) ?>);
chart.Draw();
</script>

<BR> </BR>
<canvas id=”cvs2″ width=”600″ height=”250″>[No canvas support]</canvas>
<script>
chart = new RGraph.Line(‘cvs2’, <?php print($data_string2) ?>);
chart.Set(‘chart.title’, ‘segunda curva’); <!– titulo –>
chart.Set(‘chart.background.grid.autofit’, true);
chart.Set(‘chart.gutter.left’, 35);
chart.Set(‘chart.gutter.right’, 5);
chart.Set(‘chart.hmargin’, 10);
chart.Set(‘chart.tickmarks’, ‘endcircle’);
chart.Set(‘chart.labels’, <?php print($labels_string) ?>);
chart.Draw();
</script>

<BR> </BR>
<canvas id=”cvs3″ width=”600″ height=”250″>[No canvas support]</canvas>
<script>
chart = new RGraph.Line(‘cvs3’, <?php print($data_string) ?>, <?php print($data_string2) ?>, <?php print($data_string3) ?> );
chart.Set(‘chart.title’, ‘Combinando Tres curvas de datos’); <!– titulo –>
chart.Set(‘chart.background.grid.autofit’, true);
chart.Set(‘chart.gutter.left’, 35);
chart.Set(‘chart.gutter.right’, 5);
chart.Set(‘chart.hmargin’, 10);
chart.Set(‘chart.tickmarks’, ‘endcircle’);
chart.Set(‘chart.labels’, <?php print($labels_string) ?>);
chart.Draw();
</script>

</body>
</html>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: