Last active
August 29, 2015 14:02
-
-
Save gundisalwa/3888f0887eb65dfde8e6 to your computer and use it in GitHub Desktop.
cccChart addIn
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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); | |
} | |
} | |
})); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how do you use this in a dashboard ... where to we put this javascript?