Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including stepify-plotly with all npm packages installed. Try it out:

var stepifyPlotly = require("stepify-plotly")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

stepify-plotly v1.0.6

transform line chart into step chart if .steps is truthy, otherwise passthru

stepify-plotly

Build Status

As of July 2016 this is useful to convert line charts into step charts in Plotly[tm].

##Problem

You have this data:

x = [1,2,3,4,5];
y = [2,4,6,8,10];

but you want a stairstep plot:

 
 |          ___
 |          |
 |      ____|
 |      |    
 |   ___|
 |   |
 |___|
 |______________

not the straight line that Plotly.newPlot('outdiv',{x:x, y:y, mode:'line', type:'scatter'},{}) produces

##Staircase Plot Solution

Alters the x and y data to produce a staircase effect. It makes a copy first with Array.slice() so as not to pollute the original array.

var stepify = require('stepify-plotly');
var trace = {x:x, y:y, mode:'lines', type:'scatter', steps:1};  // stepify looks for steps:1, alters the data, deletes steps:1
Plotly.newPlot('outdiv', stepify(trace), {});

##Safe for regular line plots too

If trace.step is falsy, it is deleted and the plot data is unaltered. If trace.step is absent, trace is passed unaltered.

##Copyright

Copyright 2016 Paul Brewer, Economic and Financial Technology Consulting LLC

##License

The MIT License

###Trademarks

  • Plotly[tm] is a trademark of Plotly, Inc.

  • stepify-plotly is not an official product of Plotly, Inc., but our 3rd party open source contribution.

  • stepify-plotly is not part of a similarly named npm project called stepify, whatever that may be.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free