Usando ChartJS

ChartJS es una librería para JavaScript que nos permite crear gráficos de datos en nuestras páginas HTML. Para ello hace uso del elemento canvas

Primeros pasos

1.- Incluir el script.

Lo mas práctico es usar un servidor de contenido o CDN. En cuanto a que librería usar, este tutorial se enfoca en la versión 2.5.0 aunque actualmente la versión va por la 4.4.1. Existen algunos cambios de unas versiones a otras para usar la librería.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

2.- Crear un canvas.

Hemos de crear un canvas que será donde se muestre nuestra gráfica.

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

El ID debe ser único, ya que este será quien identifique a nuestro gráfico de cualquier otro..

3.- Crear el gráfico:

Hemos de crear una nueva instancia del objeto Chart. El objeto tiene tres campos principales: type, en el cual definimos el tipo de gráfico; data que serán las series de datos de nuestro gráfico; options donde podemos configurar cosas de nuestro gráficos.

const mychart = new Chart("ID", {
  type: "scatter",
  data: {},
  options: {}
});

3.1.- Tipo de grafico:

line, bar, pie, scratter..

3.2.- Los datos:

Existen dos campos: labels y datasets.

data: {
  labels: [],
  datasets: []
}

labels es un array que contiene las etiquetas del eje X.

datasets es un array de objetos del tipo dataset que contiene la información de cada línea de datos.

El objeto dataset contiene un campo label que crea una etiqueta que identifica el conjunto de datos y otro data donde se indican los datos y algunas opciones de visualización

datasets: [ // <-- Recuerda es un array de objetos.
  // Primer conjunto de datos, recuerda es un objeto.
  {
    label: "titulo1", // <-- Nombre de los datos.
    data: array1      // <-- Array con los datos.
  },
  // Segundo conjunto de datos, si lo hubiera.
  {
    label: "titulo2", // <-- Nombre de los datos.
    data: array2      // <-- Array con los datos.
  }
]

Podemos dar colorido a los datos de nuestra gráfica usando las siguientes funciones:

{
  label: "titulo",
  data: array,
  borderColor: 'rgb(0,0,0)',     // El color de la "línea"
  borderWidth: 2                 // El tamañó de la "línea"
  fill: false                    // Si está relleno.
  backgroundColor: 'rgb(0,0,0)', // Color del relleno.
}

3.- Opciones.

3.1.- Título.

Podemos poner un título a nuestro gráfico añadiendo la opción title y usando los campos display y text.

option: 
{
  title: {
    display: true,
    text: "titulo del chart"
}

3.2.- Ejes.

options: 
{
  scales: {
    yAxes: [
      {
        ticks: {
          min: 0,
          max: 100,
          stepSize: 20,
          beginAtZero: true,
          fontFamily: 'dos',
          fontColor: '#0f0',
        },
      },
     xAxes: [
       {
         ticks: {
           fontFamily: 'dos',
           fontColor: '#f0f',
         },
       },
     ],
}

Ejemplo de gráfica

Vamos a crear un gráfico de líneas de ejemplo:

var puntos = [ "Ene", "Feb", "Mar", "Abr", "May", "Jun", 
               "Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ];

var cuenca =  [ 18.39, 9.29, 6.24, 5.24, 4.32, 5.91, 3.36, 2.82, 1.96, 2.13, 6.98, 8.16 ];
var parrilla = [ 20.04, 11.31,  7.93, 6.24, 5.82, 8.84, 5.82, 4.99, 3.63, 3.99, 12.17, 12.18 ];
var data2 = [ 11.58,23.86,27.54,19.43,14.77,13.48,9.99,10.00,8.33,8.30,8.09,8.06,6.79,6.30,6.27,
               6.23,6.27,5.45,4.93,4.76,6.34,8.30,9.70,13.00,7.24,5.53,6.50,5.37,5.09,5.98,10.07,
               6.84,3.54,2.39,1.99,7.28,3.57,2.94,2.76,2.80,3.01,3.88,5.17,7.74,14.29,12.72,11.95,
               14.02,18.59,13.59,8.86,6.39,5.85 ]

var myChart = new Chart("myChart", {
  type: "line",
  data: {
    labels: puntos,
    datasets: [ 
      { label: "Cuenca", 
        data: cuenca,
        borderColor: 'rgb(50, 153, 168)',
        fill: false,
      },
      { label: "La Parrilla",
        data: parrilla,
        borderColor: 'rgb(207, 118, 81)',
        fill: false,
      }
    ]
  },
  options: {
    legend: {
      labels: {
        //fontFamily: 'dos',
        fontSize: 10,
        fontStyle: 'bold',
        fontColor: '#404040',
      }
    },
    title: {
      display: true,
      text: 'Caudales',
      //fontFamily: 'dos',
      fontSize: 20,
      fontColor: '#000',
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            //fontFamily: 'dos',
            fontColor: '#000',
          },
        },
      ],
      xAxes: [
        {
          ticks: {
            fontFamily: 'dos',
            //fontStyle: 'italic',
            fontColor: '#000',
          },
        },
      ],
    },
  }
});

Si nos damos cuenta lo más "peliagudo" del gráfico es que tenemos muchos corchetes y llaves, lo cual será un problema si nos los abrimos o cerramos donde corresponde.

El script anterior da como resultado esta gráfica:

Referencias

Página oficial de Chart.js

QuickChart