cccChart addIn

cccChartAddIn.js

/*
 * CCC Chart (AddIn)
 *
 * This addIn allows you to render a generic ccc chart inside the addIn container.
 *
 * Options:
 * - type: the chartType, which is expected to be a registered ccc type.
 * - chartOpts: the object of options passed to the chart constructor. Charts are created
 *              by doing: var chart = new pvc[type](chartOpts).
 * - getData: function that transforms the container values in a forma that can be
 *            understood by a ccc chart.
 */ 
Dashboards.registerAddIn("Table", "colType", new AddIn({
  name: "cccChart",
  label: "CCC Chart",
  defaults:{
      type:'LineChart',
      chartOpts:{
          height: 40,
          animate: false,
          orientation: "vertical"
      },
      getData: function(values, crosstabMode) {
          values = _.map( values.split(","), function(v, i){
              return [i, v];    
          });
          return {
              resultset: values,
              metadata: [
                  { colIndex: 0, colType: "String", colName: "category"},
                  { colIndex: 1, colType: "String", colName: "value"}
              ]
          }
      },
      crosstabMode: false,
      includeValue: false,
      valueFormat: function(v,format,st, opt) {
          return sprintf(format || "%.1f",v);
      }
  },
  
  init: function(){
      $.fn.dataTableExt.oSort[this.name+'-asc'] = $.fn.dataTableExt.oSort['string-asc'];
      $.fn.dataTableExt.oSort[this.name+'-desc'] = $.fn.dataTableExt.oSort['string-desc'];
  },
  
  implementation: function(tgt, st, opt){
      var chartOptions = $.extend(true,{},opt.chartOpts),
          $tgt = $(tgt),
          $ph = $("<div class='cccChartContainer'></div>"),
          $canvas = $("<div class='canvas'></div>").appendTo($ph);
          data = opt.getData(st.value, opt.crosstabMode );
      $ph.appendTo( $tgt.empty());
                  
      chartOptions.canvas = $canvas.get(0);
      chartOptions.height = chartOptions.height || $canvas.height();
      chartOptions.width = chartOptions.width || $canvas.width();
  
      if (opt.type && pvc[opt.type]){
          new pvc[opt.type](chartOptions)
              .setData(data,{ crosstabMode: opt.crosstabMode })
              .render();
      }
      
      if(opt.includeValue) {
          var $valph = $("<div class='value'></div>")
              .append(opt.valueFormat(st.value, st.colFormat, st, opt));
          $valph.prependTo($ph);
      }
  }
}));

how do you use this in a dashboard ... where to we put this javascript?