Chart with dojo

ใครอยาก plot graph บน browser
ตอนนี้มีทางเลือกง่ายๆอีกทางแล้ว

ใน dojo 0.4.x,
มีคน contribute dojo.charting package เข้าไปแล้ว

technique การ implement ที่ใช้ ก็คือ
ถ้าเป็นพวก browser ที่ support svg ก็จะใช้ svg ในการ render
แต่ถ้าเป็น IE ก็ใช้ vml ในการ render

การออกแบบ object Structure ก็ซับซ้อนนิดๆ
แต่ก็ทำให้มันยืดหยุ่นดี
ลอง plot graph เส้นง่ายๆแบบนี้ดู



เริ่มแรกสุด data ที่จะ plot ต้องอยู่ในรูป object dojo.collections.Store

var json = [
            { Id:1, year:2001, value:20000 },
            { Id:2, year:2002, value:30000 },
            { Id:3, year:2003, value:40000 },
            { Id:4, year:2004, value:35000 }
            ];

var store = new dojo.collections.Store();
store.setData(json);

กำหนด series ซึ่งเป็นชุดของข้อมูลที่จะ plot
(graph หนึ่งๆสามารถมีได้หลาย series)

var s1 = new dojo.charting.Series(
  {
      dataSource: store,
      bindings: { x:"year", y:"value" },
      color:"#0022bb",
      label:"SFCT"                            
  });

กำหนด Axis (แกน x, แกน y)

var xA = new dojo.charting.Axis();
xA.range = {upper:2004, lower:2001};
xA.origin="year";
xA.showTicks = true;
xA.label = "year";
xA.labels = [2001,2002,2003,2004];

var yA = new dojo.charting.Axis();
yA.range = {upper:100000, lower:0};
yA.showLines = true;
yA.showTicks = true;
yA.label = "value";
yA.labels = [ {label:"0", value:0}, {label:"100,000", value:100000} ];

สร้าง Plot object ซึ่งเป็นการจับคู่แกน axis
และกำหนด series ให้กับ Plot object
(1 Plot สามารถมีได้หลาย Series)

var p = new dojo.charting.Plot(xA, yA);
p.addSeries( {data:s1, plotter: dojo.charting.Plotters.Line} );

กำหนด PlotArea

var pa = new dojo.charting.PlotArea();
pa.size = {width:700, height:200};
pa.padding={top:20, right:40, bottom:30, left:70};
pa.plots.push(p);

สุดท้ายก็คือ Chart object
โดย 1 chart สามารถมีได้หลาย PlotArea

var chart = new dojo.charting.Chart(null, "Test", "description");
chart.addPlotArea({ x:0, y:0, plotArea:pa});

เวลาจะแสดง graph ก็แค่ bind object เข้ากับ dom element ที่ต้องการ

chart.node = dojo.byId("chartTest1");
chart.render();