Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Grouped Bars On Separate Axes" />
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
</head>
<body>
​
</body>
</html>
 
​
 
var svg = dimple.newSvg("body", 800, 600);
var data = [
{
    "row": "1",
    "height": -1,
    "time": 607
},
{
    "row": "1",
    "height": -11,
    "time": 709
},
{
    "row": "1",
    "height": -42,
    "time": 1011
},
{
    "row": "1",
    "height": -22,
    "time": 809
},
{
    "row": "1",
    "height": -32,
    "time": 910
},
{
    "row": "3",
    "height": -61,
    "time": 607
},
{
    "row": "3",
    "height": -71,
    "time": 709
},
{
    "row": "3",
    "height": -102,
    "time": 1011
},
{
    "row": "3",
    "height": -82,
    "time": 809
},
{
    "row": "3",
    "height": -92,
    "time": 910
},
{
    "row": "2",
    "height": -21,
    "time": 607
},
{
    "row": "2",
    "height": -31,
    "time": 709
},
{
    "row": "2",
    "height": -62,
    "time": 1011
},
{
    "row": "2",
    "height": -42,
    "time": 809
},
{
    "row": "2",
    "height": -52,
    "time": 910
}
];
var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", "time");
x.showGridlines = true;
x.addOrderRule("time");
​
var y = myChart.addMeasureAxis("y", "height", null);
y.tickFormat = "d";
​
var s = myChart.addSeries("row", dimple.plot.line);
s.lineWeight = 1;
s.lineMarkers = true;
s.addOrderRule(function(n){
    console.log('n:', n);
    return n.row;
});
​
var myLegend = myChart.addLegend(0, 0, 900, 100, "left", s);
​
myLegend._getEntries = function () {
    var orderedValues = ["1", "2", "3"];
    var entries = [];
    orderedValues.forEach(function (v) {
        entries.push(
        {
                key: v,
                fill: myChart.getColor(v).fill,
                stroke: myChart.getColor(v).stroke,
                opacity: myChart.getColor(v).opacity,
                series: s,
                aggField: [v]
            }
        );
    }, this);
  
    return entries;
};
​
myChart.draw();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
johnkiernanderpro
0viewers