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 entries = [];
    if (this.series) {
        this.series.forEach(function (series) {
            var data = series._positionData;
            data.forEach(function (row) {
                var index = -1,
                    j,
                    field = ((series.plot.grouped && !series.x._hasCategories() && !series.y._hasCategories() && row.aggField.length < 2 ? "All" : row.aggField.slice(-1)[0]));
                for (j = 0; j < entries.length; j += 1) {
                    if (entries[j].key === field) {
                        index = j;
                        break;
                    }
                }
                if (index === -1 && series.chart._assignedColors[field]) {
                    entries.push({
                        key: field,
                        fill: series.chart._assignedColors[field].fill,
                        stroke: series.chart._assignedColors[field].stroke,
                        opacity: series.chart._assignedColors[field].opacity,
                        series: series,
                        aggField: row.aggField
                    });
                    index = entries.length - 1;
                    }
                });
            }, this);
        }
  
        // PUT YOUR SORTING LOGIC HERE
        // For example to sort numeric values ascending
        entries.sort(function (a, b) { return parseFloat(a.key) - parseFloat(b.key); });
        
        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