|
<!doctype HTML> |
|
<meta charset = 'utf-8'> |
|
<html> |
|
<head> |
|
|
|
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> |
|
<script src='http://dimplejs.org/dist/dimple.v1.1.5.min.js' type='text/javascript'></script> |
|
|
|
<style> |
|
.rChart { |
|
display: block; |
|
margin-left: auto; |
|
margin-right: auto; |
|
width: 500px; |
|
height: 350px; |
|
} |
|
.tooltip{opacity:1;} |
|
</style> |
|
|
|
</head> |
|
<body > |
|
|
|
<div id = 'chart1eec2ddf2d48' class = 'rChart dimple'></div> |
|
<script type="text/javascript"> |
|
var opts = { |
|
"dom": "chart1eec2ddf2d48", |
|
"width": 500, |
|
"height": 350, |
|
"xAxis": { |
|
"type": "addCategoryAxis", |
|
"showPercent": false |
|
}, |
|
"yAxis": { |
|
"type": "addCategoryAxis", |
|
"showPercent": false |
|
}, |
|
"zAxis": { |
|
"type": "addMeasureAxis", |
|
"outputFormat": "0.5f", |
|
"overrideMin": -1, |
|
"overrideMax": 1 |
|
}, |
|
"colorAxis": { |
|
"type": "addColorAxis", |
|
"colorSeries": "CorrelationCoefficient", |
|
"palette": [ "red", "white", "blue" ], |
|
"outputFormat": "0.5f" |
|
}, |
|
"defaultColors": [], |
|
"layers": [], |
|
"legend": [], |
|
"x": "Variable1", |
|
"y": "Variable2", |
|
"z": "CorrelationCoefficient", |
|
"type": "bar", |
|
"bounds": { |
|
"x": 150, |
|
"y": 50, |
|
"width": 330, |
|
"height": 200 |
|
}, |
|
"id": "chart1eec2ddf2d48" |
|
}, |
|
data = [{"Variable1":"Total.Revenue","Variable2":"Total.Revenue","CorrelationCoefficient":1},{"Variable1":"Total.Expenses","Variable2":"Total.Revenue","CorrelationCoefficient":0.990538233994005},{"Variable1":"Total.Subsidy","Variable2":"Total.Revenue","CorrelationCoefficient":-0.234931071034671},{"Variable1":"Revenue.Less.Expenses","Variable2":"Total.Revenue","CorrelationCoefficient":0.567118793713813},{"Variable1":"Total.Revenue","Variable2":"Total.Expenses","CorrelationCoefficient":0.990538233994005},{"Variable1":"Total.Expenses","Variable2":"Total.Expenses","CorrelationCoefficient":1},{"Variable1":"Total.Subsidy","Variable2":"Total.Expenses","CorrelationCoefficient":-0.219836244366632},{"Variable1":"Revenue.Less.Expenses","Variable2":"Total.Expenses","CorrelationCoefficient":0.448719475057225},{"Variable1":"Total.Revenue","Variable2":"Total.Subsidy","CorrelationCoefficient":-0.234931071034671},{"Variable1":"Total.Expenses","Variable2":"Total.Subsidy","CorrelationCoefficient":-0.219836244366632},{"Variable1":"Total.Subsidy","Variable2":"Total.Subsidy","CorrelationCoefficient":1},{"Variable1":"Revenue.Less.Expenses","Variable2":"Total.Subsidy","CorrelationCoefficient":-0.210485654989721},{"Variable1":"Total.Revenue","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":0.567118793713813},{"Variable1":"Total.Expenses","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":0.448719475057225},{"Variable1":"Total.Subsidy","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":-0.210485654989721},{"Variable1":"Revenue.Less.Expenses","Variable2":"Revenue.Less.Expenses","CorrelationCoefficient":1}]; |
|
var svg = dimple.newSvg("#" + opts.id, opts.width, opts.height); |
|
|
|
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"]) |
|
var myChart = new dimple.chart(svg, data); |
|
if (opts.bounds) { |
|
myChart.setBounds(opts.bounds.x, opts.bounds.y, opts.bounds.width, opts.bounds.height);//myChart.setBounds(80, 30, 480, 330); |
|
} |
|
//dimple allows use of custom CSS with noFormats |
|
if(opts.noFormats) { myChart.noFormats = opts.noFormats; }; |
|
//for markimekko and addAxis also have third parameter measure |
|
//so need to evaluate if measure provided |
|
|
|
//function to build axes |
|
function buildAxis(position,layer){ |
|
var axis; |
|
var axisopts = opts[position+"Axis"]; |
|
|
|
if(axisopts.measure) { |
|
axis = myChart[axisopts.type](position,layer[position],axisopts.measure); |
|
} else { |
|
axis = myChart[axisopts.type](position, layer[position]); |
|
}; |
|
if(!(axisopts.type === "addPctAxis")) axis.showPercent = axisopts.showPercent; |
|
if (axisopts.orderRule) axis.addOrderRule(axisopts.orderRule); |
|
if (axisopts.grouporderRule) axis.addGroupOrderRule(axisopts.grouporderRule); |
|
if (axisopts.overrideMin) axis.overrideMin = axisopts.overrideMin; |
|
if (axisopts.overrideMax) axis.overrideMax = axisopts.overrideMax; |
|
if (axisopts.overrideMax) axis.overrideMax = axisopts.overrideMax; |
|
if (axisopts.inputFormat) axis.dateParseFormat = axisopts.inputFormat; |
|
if (axisopts.outputFormat) axis.tickFormat = axisopts.outputFormat; |
|
return axis; |
|
}; |
|
|
|
var c = null; |
|
if(d3.keys(opts.colorAxis).length > 0) { |
|
c = myChart[opts.colorAxis.type](opts.colorAxis.colorSeries,opts.colorAxis.palette) ; |
|
if(opts.colorAxis.outputFormat){ |
|
c.tickFormat = opts.colorAxis.outputFormat; |
|
} |
|
} |
|
|
|
//allow manipulation of default colors to use with dimple |
|
if(opts.defaultColors.length) { |
|
//opts.defaultColors = opts.defaultColors[0]; |
|
if (typeof(opts.defaultColors) == "function") { |
|
//assume this is a d3 scale |
|
//for now loop through first 20 but need a better way to handle |
|
defaultColorsArray = []; |
|
for (var n=0;n<20;n++) { |
|
defaultColorsArray.push(opts.defaultColors(n)); |
|
}; |
|
opts.defaultColors = defaultColorsArray; |
|
} |
|
opts.defaultColors.forEach(function(d,i) { |
|
opts.defaultColors[i] = new dimple.color(d); |
|
}) |
|
myChart.defaultColors = opts.defaultColors; |
|
} |
|
|
|
//do series |
|
//set up a function since same for each |
|
//as of now we have x,y,groups,data,type in opts for primary layer |
|
//and other layers reside in opts.layers |
|
function buildSeries(layer, hidden){ |
|
//inherit from primary layer if not intentionally changed or xAxis, yAxis, zAxis null |
|
if (!layer.xAxis) layer.xAxis = opts.xAxis; |
|
if (!layer.yAxis) layer.yAxis = opts.yAxis; |
|
if (!layer.zAxis) layer.zAxis = opts.zAxis; |
|
|
|
var x = buildAxis("x", layer); |
|
x.hidden = hidden; |
|
|
|
var y = buildAxis("y", layer); |
|
y.hidden = hidden; |
|
|
|
//z for bubbles |
|
var z = null; |
|
if (!(typeof(layer.zAxis) === 'undefined') && layer.zAxis.type){ |
|
z = buildAxis("z", layer); |
|
}; |
|
|
|
//here think I need to evaluate group and if missing do null |
|
//as the group argument |
|
//if provided need to use groups from layer |
|
var s = new dimple.series(myChart, null, x, y, z, c, dimple.plot[layer.type], dimple.aggregateMethod.avg, dimple.plot[layer.type].stacked); |
|
|
|
//as of v1.1.4 dimple can use different dataset for each series |
|
if(layer.data){ |
|
//convert to an array of objects |
|
var tempdata; |
|
//avoid lodash for now |
|
datakeys = d3.keys(layer.data) |
|
tempdata = layer.data[datakeys[1]].map(function(d,i){ |
|
var tempobj = {} |
|
datakeys.forEach(function(key){ |
|
tempobj[key] = layer.data[key][i] |
|
}) |
|
return tempobj |
|
}) |
|
s.data = tempdata; |
|
} |
|
|
|
if(layer.hasOwnProperty("groups")) { |
|
s.categoryFields = (typeof layer.groups === "object") ? layer.groups : [layer.groups]; |
|
//series offers an aggregate method that we will also need to check if available |
|
//options available are avg, count, max, min, sum |
|
} |
|
if (!(typeof(layer.aggregate) === 'undefined')) { |
|
s.aggregate = eval(layer.aggregate); |
|
} |
|
if (!(typeof(layer.lineWeight) === 'undefined')) { |
|
s.lineWeight = eval(layer.lineWeight); |
|
} |
|
if (!(typeof(layer.barGap) === 'undefined')) { |
|
s.barGap = eval(layer.barGap); |
|
} |
|
|
|
/* if (!(typeof(layer.eventHandler) === 'undefined')) { |
|
layer.eventHandler = (layer.eventHandler.length === "undefined") ? layer.eventHandler : [layer.eventHandler]; |
|
layer.eventHandler.forEach(function(evt){ |
|
s.addEventHandler(evt.event, eval(evt.handler)) |
|
}) |
|
}*/ |
|
|
|
myChart.series.push(s); |
|
|
|
/*placeholder fix domain of primary scale for new series data |
|
//not working right now but something like this |
|
//for now just use overrideMin and overrideMax from rCharts |
|
for( var i = 0; i<2; i++) { |
|
if (!myChart.axes[i].overrideMin) { |
|
myChart.series[0]._axisBounds(i==0?"x":"y").min = myChart.series[0]._axisBounds(i==0?"x":"y").min < s._axisBounds(i==0?"x":"y").min ? myChart.series[0]._axisBounds(i==0?"x":"y").min : s._axisBounds(i==0?"x":"y").min; |
|
} |
|
if (!myChart.axes[i].overrideMax) { |
|
myChart.series[0]._axisBounds(i==0?"x":"y")._max = myChart.series[0]._axisBounds(i==0?"x":"y").max > s._axisBounds(i==0?"x":"y").max ? myChart.series[0]._axisBounds(i==0?"x":"y").max : s._axisBounds(i==0?"x":"y").max; |
|
} |
|
myChart.axes[i]._update(); |
|
} |
|
*/ |
|
|
|
return s; |
|
}; |
|
|
|
buildSeries(opts, false); |
|
if (opts.layers.length > 0) { |
|
opts.layers.forEach(function(layer){ |
|
buildSeries(layer, true); |
|
}) |
|
} |
|
//unsure if this is best but if legend is provided (not empty) then evaluate |
|
if(d3.keys(opts.legend).length > 0) { |
|
var l =myChart.addLegend(); |
|
d3.keys(opts.legend).forEach(function(d){ |
|
l[d] = opts.legend[d]; |
|
}); |
|
} |
|
//quick way to get this going but need to make this cleaner |
|
if(opts.storyboard) { |
|
myChart.setStoryboard(opts.storyboard); |
|
}; |
|
myChart.draw(); |
|
|
|
</script> |
|
|
|
<script></script> |
|
</body> |
|
</html> |