Created
June 27, 2013 03:18
-
-
Save timelyportfolio/5873694 to your computer and use it in GitHub Desktop.
dimple difficulty
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
| <!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.min.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='chart225836e3ef3' class='rChart dimple'></div> | |
| <script type="text/javascript"> | |
| var opts = { | |
| "dom": "chart225836e3ef3", | |
| "width": 800, | |
| "height": 400, | |
| "x": [ "date", "maturity" ], | |
| "y": "value", | |
| "groups": "maturity", | |
| "type": "bar", | |
| "id": "chart225836e3ef3" | |
| }, | |
| data = [ | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS1", | |
| "value": 0.11, | |
| "maturity": 1, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS1", | |
| "value": 0.14, | |
| "maturity": 1, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS1", | |
| "value": 0.17, | |
| "maturity": 1, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS2", | |
| "value": 0.2, | |
| "maturity": 2, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS2", | |
| "value": 0.3, | |
| "maturity": 2, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS2", | |
| "value": 0.43, | |
| "maturity": 2, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS3", | |
| "value": 0.3, | |
| "maturity": 3, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS3", | |
| "value": 0.52, | |
| "maturity": 3, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS3", | |
| "value": 0.74, | |
| "maturity": 3, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS5", | |
| "value": 0.65, | |
| "maturity": 5, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS5", | |
| "value": 1.05, | |
| "maturity": 5, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS5", | |
| "value": 1.49, | |
| "maturity": 5, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS7", | |
| "value": 1.07, | |
| "maturity": 7, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS7", | |
| "value": 1.55, | |
| "maturity": 7, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS7", | |
| "value": 2.03, | |
| "maturity": 7, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS10", | |
| "value": 1.66, | |
| "maturity": 10, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS10", | |
| "value": 2.16, | |
| "maturity": 10, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS10", | |
| "value": 2.6, | |
| "maturity": 10, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS20", | |
| "value": 2.44, | |
| "maturity": 20, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS20", | |
| "value": 2.95, | |
| "maturity": 20, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS20", | |
| "value": 3.31, | |
| "maturity": 20, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS30", | |
| "value": 2.83, | |
| "maturity": 30, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-05-01", | |
| "indexname": "DGS30", | |
| "value": 3.3, | |
| "maturity": 30, | |
| "country": "US" | |
| }, | |
| { | |
| "date": "2013-06-01", | |
| "indexname": "DGS30", | |
| "value": 3.6, | |
| "maturity": 30, | |
| "country": "US" | |
| } | |
| ], | |
| xAxis = { | |
| "type": "addCategoryAxis", | |
| "showPercent": false, | |
| "orderRule": "date" | |
| }, | |
| yAxis = { | |
| "type": "addMeasureAxis", | |
| "showPercent": false | |
| }, | |
| zAxis = [], | |
| legend = []; | |
| 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(x = opts.bounds.x, y = opts.bounds.y, height = opts.bounds.height, width = opts.bounds.width);//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 | |
| //x axis | |
| var x; | |
| if(xAxis.measure) { | |
| x = myChart[xAxis.type]("x",opts.x,xAxis.measure); | |
| } else { | |
| x = myChart[xAxis.type]("x", opts.x); | |
| }; | |
| if(!(xAxis.type === "addPctAxis")) x.showPercent = xAxis.showPercent; | |
| if (xAxis.orderRule) x.addOrderRule(xAxis.orderRule); | |
| if (xAxis.grouporderRule) x.addGroupOrderRule(xAxis.grouporderRule); | |
| if (xAxis.overrideMin) x.overrideMin = xAxis.overrideMin; | |
| if (xAxis.overrideMax) x.overrideMax = xAxis.overrideMax; | |
| //y axis | |
| var y; | |
| if(yAxis.measure) { | |
| y = myChart[yAxis.type]("y",opts.y,yAxis.measure); | |
| } else { | |
| y = myChart[yAxis.type]("y", opts.y); | |
| }; | |
| if(!(yAxis.type === "addPctAxis")) y.showPercent = yAxis.showPercent; | |
| if (yAxis.orderRule) y.addOrderRule(yAxis.orderRule); | |
| if (yAxis.grouporderRule) y.addGroupOrderRule(yAxis.grouporderRule); | |
| if (yAxis.overrideMin) y.overrideMin = yAxis.overrideMin; | |
| if (yAxis.overrideMax) y.overrideMax = yAxis.overrideMax; | |
| //z for bubbles | |
| var z; | |
| if (!(typeof(zAxis) === 'undefined') && zAxis.type){ | |
| if(zAxis.measure) { | |
| z = myChart[zAxis.type]("z",opts.z,zAxis.measure); | |
| } else { | |
| z = myChart[zAxis.type]("z", opts.z); | |
| }; | |
| if(!(zAxis.type === "addPctAxis")) z.showPercent = zAxis.showPercent; | |
| if (zAxis.orderRule) z.addOrderRule(zAxis.orderRule); | |
| if (zAxis.overrideMin) z.overrideMin = zAxis.overrideMin; | |
| if (zAxis.overrideMax) z.overrideMax = zAxis.overrideMax; | |
| } | |
| //here need think I need to evaluate group and if missing do null | |
| //as the first argument | |
| //if provided need to use groups from opts | |
| if(opts.hasOwnProperty("groups")) { | |
| var s = myChart.addSeries( opts.groups, dimple.plot[opts.type] ); | |
| //series offers an aggregate method that we will also need to check if available | |
| //options available are avg, count, max, min, sum | |
| if (!(typeof(opts.aggregate) === 'undefined')) { | |
| s.aggregate = eval(opts.aggregate); | |
| } | |
| if (!(typeof(opts.lineWeight) === 'undefined')) { | |
| s.lineWeight = eval(opts.lineWeight); | |
| } | |
| if (!(typeof(opts.barGap) === 'undefined')) { | |
| s.barGap = eval(opts.barGap); | |
| } | |
| } else var s = myChart.addSeries( null, dimple.plot[opts.type] ); | |
| //unsure if this is best but if legend is provided (not empty) then evaluate | |
| if(d3.keys(legend).length > 0) { | |
| var l =myChart.addLegend(); | |
| d3.keys(legend).forEach(function(d){ | |
| l[d] = legend[d]; | |
| }); | |
| } | |
| //quick way to get this going but need to make this cleaner | |
| if(opts.storyboard) { | |
| myChart.setStoryboard(opts.storyboard); | |
| }; | |
| myChart.draw(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment