Creación de gráficos con JavaScript y PHP

El gráfico basado en la web se puede crear utilizando cualquier biblioteca del lado del cliente o biblioteca del lado del servidor basada en datos estáticos o dinámicos. Si desea crear gráficos animados y desea descargar el gráfico más rápido, entonces es mejor usar una biblioteca de cuadros del lado del cliente. Muchas bibliotecas del lado del cliente están disponibles para crear gráficos para páginas web. Una de las bibliotecas populares del lado del cliente es Lienzo que se puede utilizar para crear gráficos basados ​​en la web mediante el uso de datos fijos o recuperando datos de cualquier base de datos.

CanvasJS se usa con PHP en este tutorial para crear gráficos basados ​​en la web. Esta biblioteca admite varios tipos de gráficos, como gráfico de barras, gráfico de columnas, gráfico de columna dinámica, gráfico de línea, gráfico circular, gráfico de pirámides, gráfico de donas, gráfico de burbujas, etc. Algunos de ellos se muestran aquí utilizando datos de muestra. Antes de comenzar este tutorial, debe asegurarse de que su servidor web y su PHP estén instalados correctamente y funcionen.

Descargar Canvasjs

Está disponible en versión gratuita y comercial. Puede descargar y usar la versión gratuita de esta biblioteca para fines de prueba. Vaya a la siguiente URL y haga clic en Descargar Enlace para descargar la biblioteca Canvasjs. Descompensar el archivo y almacenar la carpeta en el servidor web después de descargar para usarlo.

https: // Canvasjs.comunicarse

$ beneficio = matriz (
Array ("X" => 2013, "Y" => 440000),
Array ("X" => 2014, "Y" => 270000),
Array ("x" => 2015, "y" => 210000, "indexLabel" => "más bajo"),
Array ("X" => 2016, "Y" => 600000),
Array ("X" => 2017, "Y" => 630000, "IndexLabel" => "El más alto"),
array ("x" => 2018, "y" => 560000));
?>

Ejemplo de la tabla de columna

Producción:

Se generará la siguiente salida si ejecuta el archivo desde cualquier servidor web. "Versión de prueba" y "Canvasjs.com ”Las marcas de agua se mostrarán para una versión gratuita.

Cuando haces clic en "Mas opciones" botón desde la esquina superior derecha y luego se mostrarán tres opciones. Puede imprimir el gráfico o guardar el gráfico como formato de imagen JPG o PNG. Si hace clic en "Guardar como PNG"Opción entonces aparecerá el siguiente cuadro de diálogo.

El nombre de archivo de imagen predeterminado es Cuadro.png. Puede eliminar las marcas de agua de la imagen utilizando cualquier software de edición de fotos fácilmente.

Gráfico circular:

El siguiente ejemplo muestra la popularidad de las diferentes distribuciones de Linux usando gráfico de pastel. Escriba el siguiente código en un archivo llamado Gráfico circular.php y almacene el archivo en Var/www/html/jschart carpeta.

$ popularidad = array (
Array ("OS" => "Arch Linux", "Y" => 40),
Array ("OS" => "Centos", "Y" => 25),
Array ("OS" => "Debian", "Y" => 12),
Array ("OS" => "Fedora", "Y" => 10),
Array ("OS" => "Gentoo", "Y" => 8),
Array ("OS" => "Lindows", "Y" => 5)
);
?>

Ejemplo de gráfico circular

Producción:

Se mostrará la siguiente salida si ejecuta el archivo desde el servidor web. Puede crear un archivo de imagen del gráfico por el paso que se muestra en el ejemplo anterior.

Gráfico de columna dinámica:

Puedes crear un gráfico dinámico de buen aspecto usando esta biblioteca. Supongamos que desea crear una tabla en vivo del mercado de valores donde el precio de las acciones aumenta o disminuye continuamente. Escriba el siguiente código en un archivo llamado gráfico dinámico.php y almacene el archivo en Var/www/html/jschart carpeta.

$ stockdata = array (
Array ("stock" => "msft", "y" => 92.67),
Array ("stock" => "bajo", "y" => 88.89),
Array ("stock" => "intc", "y" => 52.15),
array ("stock" => "adi", "y" => 91.78),
Array ("stock" => "adbe", "y" => 224.80),
Array ("stock" => "abbv", "y" => 94.30),
Array ("stock" => "amd", "y" => 10.27)
);
?>

Ejemplo de gráfico dinámico

Producción:
Se mostrará la siguiente salida si ejecuta el archivo desde el servidor web. Puede crear un archivo de imagen de la tabla de manera similar que se muestra en el primer ejemplo.

Al seguir los pasos anteriores, puede crear fácilmente los gráficos animados basados ​​en la web necesarios utilizando esta útil biblioteca de JavaScript.