Google Charts con PHP (Gráfica de Lineas Múltiples)

Hola tyros, yo de nuevo. Continuando con nuestros tutoriales de Google Charts, les mostraré como hacer una gráfica de lineas multiples.

Primero, necesitamos nuestra clase "Charts.php":

<?php

/**
 * Clase para generar Json aceptable por Google Charts
 *
 * @author gabriel.castillo / tyrodeveloper
 */
class Charts {

    //put your code here
    public $cols;
    public $rows;

}

class ChartColumn {

    public $id;
    public $label;
    public $pattern;
    public $type;
    public $role;

}

class ChartRow {

    public $c;

}

class ChartRowValue {

    public $v;
    public $f;

}
?>

Luego, el archivo "grafica-lineas.php", el cual nos ayuda a generar la infirmación que ha de mostrarse:

<?php

include ("Charts.php");
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

$chart = new Charts();

//Inicilaizar Columnas
$chart->cols = array();
//Inicializar Filas
$chart->rows = array();

//Agregar columnas
//col1
$chart_column = new ChartColumn();
$chart_column->label = "Fecha";
$chart_column->type = "string";
array_push($chart->cols, $chart_column); 
//col2
$chart_column = new ChartColumn();
$chart_column->label = "Abarrotes";
$chart_column->type = "number";
array_push($chart->cols, $chart_column); 
//col3 - anotación
$chart_column = new ChartColumn();
$chart_column->role="annotation";
$chart_column->type = "string";
array_push($chart->cols, $chart_column); 
//col4
$chart_column = new ChartColumn();
$chart_column->label = "Lácteos";
$chart_column->type = "number";
array_push($chart->cols, $chart_column); 
//col5 - anotación
$chart_column = new ChartColumn();
$chart_column->role="annotation";
$chart_column->type = "string";
array_push($chart->cols, $chart_column); 

//Agregar datos
//01/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "01/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2300.85;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2300.85;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 750;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 750;
array_push($chart_row->c, $chart_row_value);

array_push($chart->rows, $chart_row);

//02/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "02/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2500;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2500;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 1350;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 1350;
array_push($chart_row->c, $chart_row_value);

array_push($chart->rows, $chart_row);

//03/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "03/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 800;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 800;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2500;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 2500;
array_push($chart_row->c, $chart_row_value);

array_push($chart->rows, $chart_row);

//04/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "04/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 0;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 0;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 7000;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 7000;
array_push($chart_row->c, $chart_row_value);

array_push($chart->rows, $chart_row);

//05/01/2017
$chart_row = new ChartRow();
$chart_row->c = array();
$chart_row_value = new ChartRowValue();
$chart_row_value->v = "05/01/2017";
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 700;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 700;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 3859;
array_push($chart_row->c, $chart_row_value);
$chart_row_value = new ChartRowValue();
$chart_row_value->v = 3859;
array_push($chart_row->c, $chart_row_value);

array_push($chart->rows, $chart_row);

echo json_encode($chart);
?>

Para finalizar, nuestra página php "lineas.php", la cual muestra la gráfica:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TyroDeveloper</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        google.charts.load('current', { 'packages': ['corechart'] });

        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            //Lineas
            $.ajax({
                type: 'POST',
                url: "grafica-lineas.php",
                dataType: "json",
                contentType: 'application/json',
                async: false,
                success: function (result) {
                    var data = new google.visualization.DataTable(result);
                    var options = {
                        title: '',
                        hAxis: {
                            title: 'Fecha'
                        },
                        vAxis: {
                            title: 'Total'
                        },
                        pointSize: 5,
                        backgroundColor: { fill: 'transparent' },
                        'height': 300
                    };
                    target = document.getElementById('line-chart');
                    var chart = new google.visualization.LineChart(target);
                    chart.draw(data, options);
                }
            });

        }
    </script>
    <style>
        body {
            font-family: Verdana;
        }
    </style>
</head>
<body>
    <form id="frmChart" runat="server">
        <div>
            <div id="line-chart"></div>
        </div>
    </form>
</body>
</html>

Así se ve nuestra gráfica: