如何从mySQL数据库获取数据并从中呈现图形

Question

我的网站上有一个用户信息中心，用户可以登录并查看某些内容。我希望他们能够看到的一件事是在数据库中与它们相关的某些数据的图形表示。

我的数据库包含两个基本列。实际时间和目标时间。然后，我需要创建一个条形图，显示实际时间与目标时间的对比，以便直观地表示两者。

我目前有一个条形图的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'
        }
    }));

});

非常感谢任何帮助。