NVD3 and Raphael as Alternative Charting Libs for Sencha Touch

Charts, Sencha Touch 2, mobile web | Comments

Below my short journey in taking a look to NVD3 and Raphael as alternative charting libraries for Sencha Touch(ST). ST has a powerful and nice charting library which is included as a part of Touch (available as GPLv3 or as a part of Sencha Complete and Complete: Team). Yet I’ve wanted to try other charts libs with a more flexible license which will allow me to integrate them easily in a ST app and develop a simple line chart ST component.

First on the list was Raphael which is part of Sencha Labs. Integration went pretty easy, and with a few lines of code, a simple basic line chart component in ST was ready. Many thanks to the author of this blog from which I took the Raphael example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*
 * xtype: 'rchartline',
 * chartData: {
 *   x: [1, 2, 3, 4, 5, 6, 7],
 *   y: [12, 32, 23, 15, 17, 27, 22]
 * }
 */

Ext.define('Ux.chart.RLine',{
    extend: 'Ext.Component',

    xtype: 'rchartline',

    config: {
        chartCfg:  {
           nostroke: false,   // lines between points are drawn
           axis: "0 0 1 1",   // draw axes on the left and bottom
           symbol: "circle",    // use a filled circle as the point symbol
           smooth: true,      // curve the lines to smooth turns on the chart
           dash: "-",         // draw the lines dashed
           colors: [
             "#995555",       // the first line is red
             "#555599"        // the second line is blue
           ]
         },
         chartData: {
          x: [],
          y: []
         }
    },
    initialize: function(){
      this.canvas = Raphael(this.innerElement.createChild({tag: "div", cls: 'raphael-chartWrapper'}).dom);

      this.on('painted',function(){
          var data = this.getChartData();

          this.canvas.linechart(10,10,390,180,data.x,data.y,this.getChartCfg());
      });
    }
});

Next one was NVD3, a very nice simple library based on the powerful D3. While NVD3 is not documented, D3 seems very well documented, and since the former is sort of facade to the second, it’s good to check for examples and documentation on both sites. As you can see form first example you can suppose already that making an ST chart component based on NVD3 is also easy, which is true. The difference is that following example has the implementation of real time update while on Raphael it doesn’t. That’s because I was constrained by project time and haven’t had it enough for looking the best way of how to do it (one of the ideas which worked was a call of canvas.clear() and draw the chart from scratch with linechart method).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Ext.define('Ux.chart.Line',{
    extend: 'Ext.Component',

    xtype: 'chartline',

    initialize: function(){

      nv.addGraph(Ext.bind(function(){
          var chart = nv.models.lineChart();

          chart.xAxis.tickFormat(function (d) {
            return d3.time.format('%x')(new Date(d))
          });

          chart.yAxis.tickFormat(d3.format(',.1%'));

          d3.select(this.innerElement.dom).append('svg');

          nv.utils.windowResize(chart.update);

          this.chart = chart;

          return chart;
      },this));

      this.on('painted',function(){
          this.redraw();

          setInterval(Ext.bind(function () {
            var long = this.getData()[0].values,
                next = new Date(long[long.length - 1].x);

            next.setDate(next.getDate() + 1);
            long.shift();
            long.push({x:next.getTime(), y:Math.random() * 100});

            this.redraw();

          },this), 1500);
      },this)

    },

    redraw: function() {
      d3.select(this.innerElement.down('svg').dom)
            .datum(this.getData())
            .transition().duration(500)
            .call(this.chart);
    },
    generateData: function() {
        var arr = [],
            theDate = new Date(2012, 01, 01, 0, 0, 0, 0);

        for (var x = 0; x < 30; x++) {
            arr.push({x: theDate.getTime(), y: Math.random() * 100});
            theDate.setDate(theDate.getDate() + 1);
        }
        return arr;
    },
    getData: function() {
      return [{
        "key": "Long",
        "values": this.generateData()
      }];
    }
});

At first impression D3 seems very powerful in charts drawing and richer than Raphael. Since it gave good results I stopped looking for other libraries and started work on an extension based on NVD3 and above example. For full examples source code and a running demo check my github repo.

My journey stops here and I wish you happy charting.

Comments