Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Charting with Bluff

    I've been working on a shim between the Bluff Javascript charting library and the SmartClient charting API. I've got it to the point where it does what I need for my current project ... it's not nearly finished (for instance, I've hard-coded the chart type and the theme, which is obviously wrong) ... but I thought I might post it here anyway, in case it helps someone get started on a more robust version.

    Code:
    // A shim to Bluff for charting
    isc.defineClass("BluffChart", isc.Canvas).addProperties({
      redrawOnResize: true,
      overflow: "hidden",
      theme: "theme_keynote",
     
      initWidget: function() {
        this.Super("initWidget", arguments);
      },
     
      getCanvasID: function() {
        return this.getID() + "_canvas";
      },
     
      getInnerHTML: function() {
        return '<canvas id="' + this.getCanvasID() + '"></canvas>';
      },
     
      draw: function() {
        this.Super("draw", arguments);
        this.drawGraph();
        return this;
      },
     
      redraw: function() {
        this.Super("redraw", arguments);
        this.drawGraph();
        return this;
      },
    
      drawGraph: function() {
        var self = this;
        var g = this.graph = new Bluff.Line(this.getCanvasID(), String(this.getInnerWidth()) + 'x' + String(this.getInnerHeight()));
     
        g[this.theme]();
        g.title = this.title;
     
        var rowTitleFieldName = this.facets.getLength() > 1 ? this.facets[1].id : this.labelField;
        var dataFields = this.facets[0].values;
        this.data.map(function(row) {
          g.data(row[rowTitleFieldName], dataFields.map(function(field) {
            return row[field.name];
          }));
        });
     
        var index = 0;
        var labels = {};
        dataFields.map(function(field) {
          labels[index++] = field.title || field.name;
        });
        g.labels = labels;
     
        this.graph.draw();
      }
    });
    You then set the chartConstructor property of a ListGrid (for instance) to "BluffChart" and use the chart APIs in ListGrid.

    I should also say that I don't really entirely understand the whole "facet" concept, so that is another way in which the code above is very limited. so, again, this is only here in case it helps someone get started.

    #2
    Thanks for posting that.

    If you want to dig deeper into the "facet" concept, you might try learning about the equivalent data warehousing / data cube concept of a "dimension".

    Comment


      #3
      Bluff charting for smartGWT

      How would one go about translating the example to smartGWT ?

      Comment

      Working...
      X