javascript - mySQL データベースからデータを取得し、そこからグラフをレンダリングする方法

Question

私のサイトには、ユーザーがログインして特定のものを表示できるユーザー ダッシュボードがあります。私が彼らに見てもらいたいことの 1 つは、データベース内の彼らに関連する特定のデータのグラフィカルな表現です。

私のデータベースには 2 つの基本的な列が含まれています。実時間と目標時間。次に、目標時間に対する実際の時間を示す棒グラフを作成して、この 2 つを視覚的に表現する必要があります。

現在、棒グラフ用に次の jScript フレームワークを使用しており、データをこれに表示したいと考えています。

/*
 * charts/chart_bars_vertical.js
 *
 * Demo JavaScript used on charts-page for "Vertical Bars".
 */

"use strict";

$(document).ready(function(){

    // Sample Data
    var d1 = [];
    for (var i = 0; i <= 7; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);



    var d2 = [];
    for (var i = 0; i <= 7; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);

    var d3 = [];
    for (var i = 0; i <= 7; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);

    var ds = new Array();

    ds.push({
        label: "Bar #1",
        data: d1,
        bars: {
            show: true,
            barWidth: 0.2,
            order: 1
        }
    });
    ds.push({
        label: "Bar #2",
        data: d2,
        bars: {
            show: true,
            barWidth: 0.2,
            order: 2
        }
    });
    ds.push({
        label: "Bar #3",
        data: d3,
        bars: {
            show: true,
            barWidth: 0.2,
            order: 3
        }
    });

    // Initialize Chart
    $.plot("#chart_bars_vertical", ds, $.extend(true, {}, Plugins.getFlotDefaults(), {
        series: {
            lines: { show: false },
            points: { show: false }
        },
        grid:{
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: '%s: %y'
        }
    }));

});

どんな助けでも大歓迎です。