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

Web para saber que navegadores son compatibles con comandos CCS, HTML5, SVG y JS

 

 

Si tu trabajo es diseñar paginas web, o simplemente es tu afición, y quieres saber que comandos o etiquetas de CCS, HTML5, SVG y JS, son compatible con los navegadores más populares y conocidos, esta web vendrá en tu ayuda para tal labor.

 

 

 

 

Enlace a la web:

http://caniuse.com/

 

 

 

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

Gury, librería para crear imágenes y juegos en HTML5

 

 

Gury, es una librería JavaScript diseñada para ayudar en la creación de aplicaciones HTML5/Canvas proporcionando un forma  fácil de usar interfaz basada en la cadena.

Con Gury puede crear una etiqueta, cambiar el tamaño y el estilo, añadir objetos renderizables, animar los objetos, y colocarlo en cualquier lugar de la su página en una expresión de cadena única.

Util para desarrolladores de juegos en linea, demostraciones, decoración, etc.

 

Enlace a la web:

http://guryjs.org/

 

 

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

Flixmaster te ayuda a realizar tus vídeos con HTML5

 

 

FlixMaster es un sistema basado en la nube para la creación de vídeos, en una plataforma de edición y publicación que permite a los creadores de contenido hacer vídeos dinámicos e interactivos, con la facilidad de arrastrar y soltar. Los espectadores tendrán el placer en ser dueños de tu experiencia contemplando los videos, mientras que a recopilar datos valiosos acerca de sus preferencias a través de potentes herramientas de análisis que ayudan a maximizar su retorno sobre la inversión.

Este servicio gratuito te permite crear tus vídeos interactivos, dispone de un fácil sistema con el que sólo tendrás que arrastrar y soltar para crear tus vídeos. El sistema es muy fácil de usar, el problema principal está en diseñar vídeos atractivos y originales, donde nuestra imaginación y creatividad serán nuestras armas más importantes para el desarrollo de estos vídeos.

Esta será una gran herramienta si le sabemos sacar partido con nuestra creatividad.

Enlace a la web:

www.flixmaster.com

 

 

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