Utilização do framework de JS para a criação de tabelas gráficas

Canvas JS

<?php

    //var_dump($modelo->respDate);
    //var_dump($modelo->respData);

    //CARREGAR TODAS AS DATAS DO PERIODO SELECIONADO
    //var_dump($modelo->respRawDate);
    $dataUnix = $modelo->respRawDate;

    $j     = 0;
    $cores    = array('#4d4dff','#b366ff','#ff80df',' #ff6666','#ffb366','#ffff1a','#a6ff4d','#33ff33','#1aff66','#66d9ff',' #6666cc','#862d86', '#993366');

    $serie = "";
    //PARAMETROS SELECIONADOS
    $testeJon  =    $modelo->respData;

        foreach ($testeJon as $jon) {

            //INICIA O TRATAMENTO DOS PARAMETROS PASSADOS PELO FORMULARIO
            $amostra = explode("data:", $jon[0]);

            $nomeSerie = $amostra[0];

            $nomeSerie = str_replace("{name:'"," ",$nomeSerie);
            $nomeSerie = str_replace("',"," ",$nomeSerie);

            $amostra = str_replace("]"," ",$amostra[1]);
            $amostra = str_replace("["," ",$amostra);
            $amostra = str_replace("}"," ",$amostra);

            $dataAmostra = explode(",",$amostra);

            //echo sizeof($dataAmostra)." ".sizeof($dataUnix)." <br />";
            //Inicia a montagem da série
            $i     = 0;


            $serie .= "{";
                $serie .= 'type: "line",';
                $serie .= 'showInLegend: true,';
                $serie .= 'name: "'.$nomeSerie.'",';
                $serie .= 'color: "'.$cores[$j].'",';
                $serie .= 'lineThickness: 2,';
                $serie .= 'dataPoints: [';

                foreach ($dataUnix as $unix){
                //
                    // $dataTemp = gmdate("d-m-Y H:i:s", $dataUnix[$i]);
                    //
                    // $datahora = explode(" ", $dataTemp);
                    // $dias     = explode("-", $datahora[0]);
                    //
                    // $serie .= '{ x: new Date('.$dias[2].', '.($dias[1] - 1).', '.$dias[0].'), y: 310},';
                //
                     $i++;
                    //$serie .= '{ x: new Date(2010, 0, 3), y: 510 },';
                }
                //$serie .= '{ x: '.gmdate("d-m-Y H:i:s", $dataUnix[$i - 1]).', y: "0"}';
                    // $serie .= '{ x: new Date(2010, 0, 3 , 10, 15), y: 650 },';
                    // $serie .= '{ x: new Date(2010, 0, 5 , 10, 15), y: 700 },';
                    // $serie .= '{ x: new Date(2010, 0, 7 , 10, 15), y: 710 },';
                    // $serie .= '{ x: new Date(2010, 0, 9 , 10, 15), y: 658 },';
                    // $serie .= '{ x: new Date(2010, 0, 11), y: 734 },';
                    // $serie .= '{ x: new Date(2010, 0, 13), y: 963 }';

                $serie .= ']';
            $serie .= "},";

            $j++;
        }

        //var_dump($serie);

?>


<?php


    // TESTE DO GRÁFICO COM MULTIPLAS LINHAS





    // foreach ($dataUnix as $unix) {
    //
    //     $f++;
    //     //echo gmdate("d-m-Y H:i:s", $unix) ."<br />";
    // }
    // echo $f;

    // foreach ($testeJon as $jon) {
    //
    //     $amostra = explode("data:", $jon[0]);
    //
    //     $nomeSerie = $amostra[0];
    //
    //     $nomeSerie = str_replace("{name:'"," ",$nomeSerie);
    //     $nomeSerie = str_replace("',"," ",$nomeSerie);
    //
    //     $amostra = str_replace("]"," ",$amostra[1]);
    //     $amostra = str_replace("["," ",$amostra);
    //
    //     $dataAmostra = explode(",",$amostra);
    //
    //     //Inicia a montagem da série
    //     $i     = 0;
    //     $serie = "[";
    //     foreach ($dataAmostra as $valorX) {
    //         $i++;
    //         $serie .= "[".$valorX.",".$dataMedida[$i]."]";
    //
    //     }
    //     $serie .= "]";
    //
    //     // var_dump($serie);
    //     // var_dump($nomeSerie);
    // }


    //var_dump($dataMedida);

    // var_dump($modelo->respRawDate);
 ?>
 
 
 <script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("caixaGrafico", {
        zoomEnabled: true,
        zoomType: "x",
        title:{
          text: "Enable Zooming on X & Y Axis"
        },
        animationEnabled: true,
        axisX: {
            gridColor: "Silver",
            tickColor: "silver",
            valueFormatString: "DD/MMM"
        },
        toolTip: {
            shared: true
        },
        theme: "theme2",
        axisY: {
            gridColor: "Silver",
            tickColor: "silver"
        },
        legend: {
            verticalAlign: "center",
            horizontalAlign: "right"
        },
        data: [<?php echo $serie; ?>
        ],
        legend: {
            cursor: "pointer",
            itemclick: function (e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else {
                    e.dataSeries.visible = true;
                }
                // chart.render();
            }
        }
    });
    
    //cria o gráfico após as configurações iniciais
    chart.render();
}

</script>


//LOCAL EM HTML ONDE SERÁ EXPOSTO O GRÁFICO

<div class="row">

    <h3>Teste de Canvas JS</h3>
    <div class="col-md-12">

        <div id="caixaGrafico" style="width:100%;height:300px;">


        </div>

    </div>

</div>