Gráficas utilizando CanvasJS

Las gráficas nos ayudan a visualizar un conjunto de datos para que podamos comparar rápidamente sus valores. 

Una tabla de datos en una hoja puede resultar difícil de analizar y tardaremos más tiempo en comprender y comparar los valores. En una gráfica todo se ve mucho más claro solo con un vistazo.

Aquí podemos ver un simple ejemplo para la creación de gráficas utilizando la librería CanvasJS.

Con esta librería podemos crear rápidamente gráficas dinámicas e integrarlas en la web.

Código html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    
    <title>Ejemplos Graficas</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
            <div id="pieChart" style="height: 360px; width: 100%;">
            </div>
            </div>
            <div class="col-md-6">
            <div id="columnChart" style="height: 360px; width: 100%;">
            </div>
            </div>
        </div>
        </div>

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="pack.js"></script>
</body>
</html>

Código javaScript:

var pieChartValues = [{
    y: 39.16,
    exploded: true,
    indexLabel: "Estados Unidos",
    color: "#1f77b4"
}, {
    y: 21.8,
    indexLabel: "Canada",
    color: "#ff7f0e"
}, {
    y: 21.45,
    indexLabel: "Europa",
    color: " #ffbb78"
}, {
    y: 5.56,
    indexLabel: "Malasia",
    color: "#d62728"
}, {
    y: 5.38,
    indexLabel: "Peru",
    color: "#98df8a"
}, {
    y: 3.73,
    indexLabel: "Bolivia",
    color: "#bcbd22"
}, {
    y: 2.92,
    indexLabel: "Tunez",
    color: "#f7b6d2"
}];
renderPieChart(pieChartValues);

function renderPieChart(values) {

    var chart = new CanvasJS.Chart("pieChart", {
        backgroundColor: "white",
        colorSet: "colorSet2",

        title: {
            text: "Pie Chart",
            fontFamily: "Verdana",
            fontSize: 25,
            fontWeight: "normal",
        },
        animationEnabled: true,
        data: [{
            indexLabelFontSize: 15,
            indexLabelFontFamily: "Monospace",
            indexLabelFontColor: "darkgrey",
            indexLabelLineColor: "darkgrey",
            indexLabelPlacement: "outside",
            type: "pie",
            showInLegend: false,
            toolTipContent: "<strong>#percent%</strong>",
            dataPoints: values
        }]
    });
    chart.render();
}
var columnChartValues = [{
    y: 936.04,
    label: "Paris",
    color: "#1f77b4"
}, {
    y: 391.84,
    label: "Londres",
    color: "#ff7f0e"
}, {
    y: 365.76,
    label: "Roma",
    color: " #ffbb78"
}, {
    y: 197.48,
    label: "Barcelona",
    color: "#d62728"
}, {
    y: 94.2,
    label: "Atenas",
    color: "#98df8a"
}, {
    y: 65.28,
    label: "Berlin",
    color: "#bcbd22"
}, {
    y: 51.2,
    label: "Madrid",
    color: "#f7b6d2"
}];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

    var chart = new CanvasJS.Chart("columnChart", {
        backgroundColor: "white",
        colorSet: "colorSet3",
        title: {
            text: "Datos por Ciudades",
            fontFamily: "Verdana",
            fontSize: 25,
            fontWeight: "normal",
        },
        animationEnabled: true,
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center"
        },
        theme: "theme2",
        data: [

            {
                indexLabelFontSize: 15,
                indexLabelFontFamily: "Monospace",
                indexLabelFontColor: "darkgrey",
                indexLabelLineColor: "darkgrey",
                indexLabelPlacement: "outside",
                type: "column",
                showInLegend: false,
                legendMarkerColor: "grey",
                dataPoints: values
            }
        ]
    });

    chart.render();
}

Son dos ejemplos simples para ver el potencial que nos ofrece esta librería.

Puedes encontar más información aquí.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share

Gráficas de estadísticas en Python

Hoy en día las gráficas nos permiter mostrar los datos de una forma visual, llamativa y directa, para comprender dichos datos de forma rápida y precisa. por ello son fundamentales en nuestro día a día.

Python dispone de un modulo con el que fácil crear gráficas con multitud de formatos. Una herramienta útil con la que mostrar nuestra información de la forma más clara y efectiva.

Los ejemplos de este post estan realizados con datos ficticios, que representan la publicación de DVDs por años y países. Los datos son extraidos de una base de datos de películas que se encuentra almacenada en Postgresql.

Para realizar las gráficas debemos tener instalados los modulos chartify y pandas.

El código del script es el siguiente:

import chartify
import pandas as pd
import sys
sys.path.append("../Actrices/")
import funciones_db as db


ch = chartify.Chart(blank_labels=True, x_axis_type='linear')

ch.set_title("DVDs por Año") 
ch.set_subtitle("Cantidad de DVDs publicados entre el 2000 y el 2020") 

ch.axes.set_xaxis_label("Año") 
ch.axes.set_yaxis_label("DVDs") 
ch.set_source_label("DVDs publicados")

data = db.DvdYears2()

ch.plot.scatter(
    data_frame=data,
    x_column='year',
    y_column='total')

ch.show()

Este pequeño script genera la siguiente gráfica:

La consulta a la base de datos se realiza de la siguiente forma:

import pandas as pd

def ActrizPaisYear():
    try:
        comm = cx.conectar()
        cursor = comm.cursor()

        query = """
                SELECT ...
                """

        df = pd.read_sql(query, comm)
        return df

    finally:
        if(comm):
            cursor.close()
            comm.close()

Otros ejemplos de gráficas soportadas por chartify son:

ch = chartify.Chart(blank_labels=True, x_axis_type='categorical')

ch.plot.bar(
        data_frame=data,
        categorical_columns='year',
        numeric_column='total',
        categorical_order_ascending=True)

ch = chartify.Chart(blank_labels=True, x_axis_type='linear')

ch.plot.area(
    data_frame=data,
    x_column='year',
    y_column='total',
    color_column='pais',
    stacked=False)
#ch = chartify.Chart(blank_labels=True, x_axis_type='categorical') #Vertical
ch = chartify.Chart(blank_labels=True, y_axis_type='categorical') #Horizontal

ch.plot.bar(
        data_frame=data,
        categorical_columns='year',
        numeric_column='total',
        color_column='year')
ch = chartify.Chart(blank_labels=True, x_axis_type='categorical')

ch.plot.bar(
    data_frame=data,
    categorical_columns=['year', 'pais'],
    numeric_column='total',
    color_column='year',
    categorical_order_by='labels',
    categorical_order_ascending=True)
ch.axes.set_xaxis_tick_orientation('vertical')
ch = chartify.Chart(blank_labels=True, layout='slide_100%', y_axis_type='categorical') 

ch.plot.lollipop(
        data_frame=data,
        categorical_columns=['year', 'pais'],
        numeric_column='total',
        color_column='year',
        categorical_order_by='labels')

Las posibilidades son inmesas, existen multitud de gráficas diferentes para mostrar nuestros datos.

Aquí puedes encontar la documentación de chartify, y aquí, multitud de ejemplos para realizar tus gráficas más espectuculares.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share

Chartle, crea tus gráficas online de una forma muy sencilla

 

 

Más de mil millones gráficas, mapas, gráficos y diagramas se encuentran en las publicaciones impresas cada año – pero sólo 40 millones en línea.
Esta enorme discrepancia es un reflejo de la complejidad para crear y publicar gráficos en línea.

Con esta aplicación web, la creación de gráficos te resultara muy fácil. Podrás elegir entre diferentes tipos de gráficos, que se adapten mejor a tus propósitos. Muestra tus datos con estos magníficos gráficos a todo color.

 

 

Enlace a la web:

http://www.chartle.net/

 

 

 

Libro para iPad - Grande, Pequeño, Astronómico y cotidiano
 

Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share