jqPlotのチャート(Javascript)部分

jqPlotのチャート

まずは、棒グラフ

HTMLファイルで

<script src="js/jqplot/plugins/jqplot.barReaderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.categoryAxisReaderer.js"></script>

で必要なライブラリーの読みこみ

jqplot.barReaderer.min.js
は、棒グラフの表示

jqplot.categoryAxisReaderer.js
は、横軸にカテゴリ表示

次に
HTMLファイルで

<div id="barchart"></div>

でグラフの表示領域を指定

例えば、利益と売上を棒グラフにするなら、Javascriptは

//棒グラフのデータ
var bardata = [
[10,20,50,30],   //売上
[2,4,5,6]  //利益
];

var opts = {
title:'業績',

//オプションの定義で、グラフのレンダラを棒グラフを描画する $.jqplot.BarReadererに指定
seriesDefaults:{
renderer:$.jqplot.BarReaderer,
},

//グラフの凡例の設定
series:{
{label:'売上'},
{label:'利益'},
},

legend:{
show:true,
location:'ne',
},

//横軸になるxaxisのレンダラ
//$.jqplot.CategoryAxisReadererを指定して、カテゴリ表示
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisReaderer,

//カテゴリ名表示
ticks:['2010','2011','2012','2013'],
}
}
};

$(document).on("pageshow","#barchart",function(e){
barplot = $,jqplot("barchart",data,opts);
});

となる

Google Chart Toolsみたいに積み上げ表示も可能で

stackSeriesオプションを使えば
グラフを積み上げて表示できる
積み上げグラフにするなら

棒グラフの設定へ
stackSeries:true
を追加する

場所は
title:’業績’,
の下あたり

ソースにすると

var opts = {
title:'業績',
stackSeries:true,
seriesDefaults:{

}
}

というようになる