block by timelyportfolio 5873694

dimple difficulty

Full Screen

index.html

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    
    <script src='//d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='//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>