Menu
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?
711
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
