JQuery Flot插件(绘制线形图表)

       利用jQuery Flot插件绘制一个线形图表 , 注意构造的数组的结构 , 如下是在drupal中使用JQuery Flot插件的函数例子
function generate_category_compare(){

    drupal_add_js(drupal_get_path("module","pe_reports")."/js/flot-0.6/jquery.flot.min.js");
    drupal_add_js(drupal_get_path("module","pe_reports")."/js/flot-0.6/excanvas.min.js");

    $output = "";
    $score_js = "";
    $alldata = "";
    $arr= array();
    $i = 0;

    $score_js .= '$(document).ready(function(){';

    $years = db_query("SELECT fid,year,category_id FROM {pe_criteria_reports} GROUP BY year");

    while($all_year = db_fetch_object($years)){
            $all_years[] = $all_year;
    }
   
    foreach($all_years as $years_val){
           
        $all_fid_years = db_query("SELECT category_id,fid FROM {pe_criteria_reports} WHERE year='%s' ",$years_val->year);
        while($all_fid_year = db_fetch_object($all_fid_years)){

            $get_scores = db_fetch_object(db_query("SELECT sum(score_value) as amount,count(score_value) as counts FROM {pe_evaluation_value} pv INNER JOIN {pe_evaluation} pe ON pv.pe_id=pe.pe_id WHERE pe.pid=%d",$all_fid_year->fid));

            if($get_scores->counts){
                $average_score = $get_scores->amount/$get_scores->counts;
            }

            $category_name = db_result(db_query("SELECT category_name FROM {performance_evaluation_category} WHERE completed=1 AND category_id =%d",$all_fid_year->category_id));

            $arr[$category_name][$years_val->year]=$average_score;
        }

    }

    foreach($arr as $key=>$value){

        if($key != "In Class Evaluation"){

                $year = "";

                foreach($value as $ykey=>$year_val){
                    $year .= '['.$ykey.',  '.$year_val.'], ';
                }

                $alldata .= ' "'.$key.'": {
                        label: "'.$key.'",
                        data: ['.$year.']
                    }, 
                    ';
                $i++;
            }
    }

   $score_js .= 'var datasets = {
        '.$alldata.'       
    };';

    $score_js .= ' var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });
   
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append(\'<br/><input type="checkbox" name="\' + key +
                               \'" checked="checked" id="id\' + key + \'">\' +
                               \'<label for="id\' + key + \'">\'
                                + val.label + \'</label>\');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);

    function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

        if (data.length > 0)
            $.plot($("#placeholder"), data, {
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0 }
            });
    }

    plotAccordingToChoices();';

    $score_js .=     ' })';

    drupal_add_js($score_js,"inline");

    $output .= '<div id="placeholder" style="width:600px;height:300px;"></div>';
    $output .= '<p id="choices">Show:</p>';
    return $output;
}