D3-Area-Range-Line-Plugin
Getting Started
Include jtv.arearange.line.css,d3.v3.min.js andjtv.arearange.line.js in your HTML.
<link href="css/jtv.arearange.line.css" rel="stylesheet">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="js/jtv.arearange.line.js"></script>Provide JSON data for plotting
var retdata = [
{
key: "Reg User",
values: [
{"date": "20101001", "low": 3, "high": 5, "avg": 4},
{"date": "20101002", "low": 6, "high": 8, "avg": 7},
{"date": "20101003", "low": 4, "high": 6, "avg": 5},
{"date": "20101004", "low": 6, "high": 8, "avg": 7},
{"date": "20101005", "low": 5, "high": 7, "avg": 6}
]
},
{
key: "Guest User",
values: [
{"date": "20101001", "low": 6, "high": 8, "avg": 7},
{"date": "20101002", "low": 3, "high": 5, "avg": 4},
{"date": "20101003", "low": 5, "high": 7, "avg": 6},
{"date": "20101004", "low": 2, "high": 4, "avg": 3},
{"date": "20101005", "low": 6, "high": 8, "avg": 7}
]
}
]; 
Provide Chart options
Axes Options:
xLabel : X Label Text (i.e. Date)
yLabel : Y Label Text (i.e Count)
yAxisLabelPos :To set the Y-axis label position in inner side or outer side of the Y-axis (i.e. inner or outer)
xScale : Format of the X-axis, Date time or any string value (i.e. datetime, str)
Line Options:
strokeWidth : Width of the stroke
areaOpacity : Opacity of the area
interpolate : Different shape of the line and area(i.e linear, cardinal, monotone etc.)
Legend Options:
enable : Showing legend or not (i.e. true or false)
legendType : Shape of the legends(i.e. circle, rectangle)
Chart background options:
bgColor : Background color of the chart
gridlineWidth : Width of the horizontal grid line
noofGrids : Number of Y-axis grid lines