Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio timelyportfolio/index.html
Last active Aug 29, 2015

What would you like to do?
dimple.js max min issues with multiple series
<!doctype HTML>
<meta charset = 'utf-8'>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
<body >
<div id = 'chart4dc1859420' class = 'rChart dimple'></div>
<script type="text/javascript">
var opts = {
"dom": "chart4dc1859420",
"width": 800,
"height": 400,
"xAxis": {
"type": "addCategoryAxis",
"showPercent": false,
"overrideMin": 0,
"overrideMax": 3
"yAxis": {
"type": "addMeasureAxis",
"showPercent": false,
"outputFormat": ".2f"
"zAxis": [],
"colorAxis": [],
"defaultColors": [],
"layers": [
"x": "yearID",
"y": "SOG",
"data": null,
"facet": null,
"groups": "name",
"type": "bubble"
"legend": [],
"x": "yearID",
"y": "SOG",
"type": "line",
"id": "chart4dc1859420"
data = [{"yearID":1871,"name":"Boston Red Stockings","G":31,"SO":19,"SOG":0.61},{"yearID":1871,"name":"Chicago White Stockings","G":28,"SO":22,"SOG":0.79},{"yearID":1871,"name":"Cleveland Forest Citys","G":29,"SO":25,"SOG":0.86},{"yearID":1871,"name":"Fort Wayne Kekiongas","G":19,"SO":9,"SOG":0.47},{"yearID":1871,"name":"New York Mutuals","G":33,"SO":15,"SOG":0.45},{"yearID":1871,"name":"Philadelphia Athletics","G":28,"SO":23,"SOG":0.82},{"yearID":1871,"name":"Rockford Forest Citys","G":25,"SO":30,"SOG":1.2},{"yearID":1871,"name":"Troy Haymakers","G":29,"SO":19,"SOG":0.66},{"yearID":1871,"name":"Washington Olympics","G":32,"SO":13,"SOG":0.41},{"yearID":1872,"name":"Baltimore Canaries","G":58,"SO":28,"SOG":0.48},{"yearID":1872,"name":"Brooklyn Eckfords","G":29,"SO":29,"SOG":1},{"yearID":1872,"name":"Brooklyn Atlantics","G":37,"SO":24,"SOG":0.65},{"yearID":1872,"name":"Boston Red Stockings","G":48,"SO":26,"SOG":0.54},{"yearID":1872,"name":"Cleveland Forest Citys","G":22,"SO":13,"SOG":0.59},{"yearID":1872,"name":"Middletown Mansfields","G":24,"SO":12,"SOG":0.5},{"yearID":1872,"name":"New York Mutuals","G":56,"SO":52,"SOG":0.93},{"yearID":1872,"name":"Philadelphia Athletics","G":47,"SO":47,"SOG":1},{"yearID":1872,"name":"Troy Haymakers","G":25,"SO":14,"SOG":0.56},{"yearID":1872,"name":"Washington Olympics","G":9,"SO":4,"SOG":0.44},{"yearID":1872,"name":"Washington Nationals","G":11,"SO":3,"SOG":0.27}];
var svg = dimple.newSvg("#" +, 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;
if (!layer[position+"Axis"]){
axisopts = opts[position+"Axis"];
} else axisopts = layer[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) ;
//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++) {
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){
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
//convert to an array of objects
//avoid lodash for now
datakeys = d3.keys(
layer.dataarray =[datakeys[1]].map(function(d,i){
var tempobj = {}
tempobj[key] =[key][i]
return tempobj
}) = layer.dataarray;
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);
return s;
buildSeries(opts, false);
if (opts.layers.length > 0) {
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();
l[d] = opts.legend[d];
//quick way to get this going but need to make this cleaner
if(opts.storyboard) {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.