Geek Answers Handbook

How to add a horizontal line along the y axis in Plottable.js

I have the following startup code in JavaScript 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 dx; }, xScale) .y(function(d) { return dy; }, 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 indicated in the image below, how can I change my Javascript code so that it can include a horizontal line in y=2 ?

enter image description here

+8
javascript html plottable
source share
1 answer

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 dx; }, xScale) .y(function(d) { return dy; }, 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>
+4
source share

More articles:


All Articles