Search code examples
javascripthtmld3.jsplottable

How to add horizontal line over y-axis in Plottable.js

I have the following running code in JavaScript's Plottable.js. 

var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
            { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .animated(true);

 new Plottable.Components.Table([
            [null, null],
            [yAxis, plot],
            [null, xAxis]
        ]).renderTo("svg#example");
  
window.addEventListener("resize", function() {
  plot.redraw();
});
<!doctype html>
<html>
<head>

</head>




<body>
 

     <svg width="100%" height="100%" id="example"></svg>

    <!-- Act on the thing -->
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>


</body>
</html>

As stated in the image below, how can I modify my Javascript code so that it can include the horizontal line at y=2?

enter image description here

Solution

  • You can use Plottable.Components.GuideLineLayer:

    var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
            { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .animated(true);
var guideline = new Plottable.Components.GuideLineLayer("horizontal")
        .scale(yScale);
guideline.value(2);

var plots = new Plottable.Components.Group([guideline, plot]);
 new Plottable.Components.Table([
            [null, null],
            [yAxis, plots],
            [null, xAxis]
        ]).renderTo("svg#example");
  
window.addEventListener("resize", function() {
  plot.redraw();
});
    <!doctype html>
<html>
<head>

</head>




<body>
 

     <svg width="100%" height="100%" id="example"></svg>

    <!-- Act on the thing -->
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>


</body>
</html>