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;
});
​
myChart.addLegend(0, 0, 900, 100, "left", s);
myChart.draw();
Output

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

Dismiss x
public
Bin info
johnkiernanderpro
0viewers