D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
DKirwan
Full window
Github gist
Reusable D3 sparkline chart with optional gradient
<html> <head> <meta charset="utf-8"> <title>D3.js Sparkline</title> <style> path { stroke-width: 1; fill: none; } label { float: left; margin-top: 5px; margin-right: 5px; font-family: sans-serif; } </style> </head> <body> <div class="container"> <label>Ryanair stock price Feb. 2015 -> Feb. 2016</label> <!-- container for the chart --> <div id="ryanair-stock-chart"></div> </div> <div class="container"> <label>Easyjet stock price Feb. 2015 -> Feb. 2016</label> <!-- container for the chart --> <div id="easyjet-stock-chart"></div> </div> <!-- load the d3.js library --> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="sparkline.js"></script> <script type="text/javascript"> var ryanairStockChart = sparkline() .width(155) .height(50) .gradientColors(['green', 'orange', 'red']) // top -> bottom .csvFilePath('ry4c.csv') // relative to sparkline.js .selector('#ryanair-stock-chart'); var easyjetStockChart = sparkline() .width(155) .height(50) .gradientColors(['green', 'orange', 'red']) // top -> bottom .csvFilePath('ezj.csv') // relative to sparkline.js .selector('#easyjet-stock-chart'); ryanairStockChart(); // render the chart easyjetStockChart(); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js