index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='//tenxer.github.io/xcharts/css/master.css'>
<script src='//d3js.org/d3.v2.min.js' type='text/javascript'></script>
<script src='//tenxer.github.io/xcharts/js/xcharts.min.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<figure id='chart6c317245304c' class='rChart xcharts'></figure>
<script type='text/javascript'>
var data = {
"dom": "chart6c317245304c",
"width": 800,
"height": 400,
"xScale": "ordinal",
"yScale": "linear",
"main": [
{
"data": [
{
"x": "14-00",
"y": 0.97458
},
{
"x": "14-06",
"y": 0.98739
},
{
"x": "14-18",
"y": 0.97458
},
{
"x": "15-00",
"y": 0.48214
},
{
"x": "15-06",
"y": 0.58475
},
{
"x": "15-18",
"y": 0.88136
},
{
"x": "16-00",
"y": 0.96186
},
{
"x": "16-06",
"y": 0.97458
},
{
"x": "16-18",
"y": 0.90638
}
]
},
{
"data": [
{
"x": "14-00",
"y": 0.025424
},
{
"x": "14-06",
"y": 0.012605
},
{
"x": "14-18",
"y": 0.021186
},
{
"x": "15-00",
"y": 0.20089
},
{
"x": "15-06",
"y": 0.27966
},
{
"x": "15-18",
"y": 0.11864
},
{
"x": "16-00",
"y": 0.038136
},
{
"x": "16-06",
"y": 0.021186
},
{
"x": "16-18",
"y": 0.089362
}
]
},
{
"data": [
{
"x": "14-00",
"y": 0
},
{
"x": "14-06",
"y": 0
},
{
"x": "14-18",
"y": 0.0042373
},
{
"x": "15-00",
"y": 0.27679
},
{
"x": "15-06",
"y": 0.13559
},
{
"x": "15-18",
"y": 0
},
{
"x": "16-00",
"y": 0
},
{
"x": "16-06",
"y": 0.0042373
},
{
"x": "16-18",
"y": 0.0042553
}
]
},
{
"data": [
{
"x": "14-00",
"y": 0
},
{
"x": "14-06",
"y": 0
},
{
"x": "14-18",
"y": 0
},
{
"x": "15-00",
"y": 0.040179
},
{
"x": "15-06",
"y": 0
},
{
"x": "15-18",
"y": 0
},
{
"x": "16-00",
"y": 0
},
{
"x": "16-06",
"y": 0
},
{
"x": "16-18",
"y": 0
}
]
}
],
"id": "chart6c317245304c"
},
chartType = "cumulative",
myChart = new xChart(chartType, data, '#chart6c317245304c');
</script>
<style>figure.rChart {height: 400px;}</style>
</body>
</html>