xCharts Area Chart

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='https://tenxer.github.io/xcharts/css/master.css'>
    
    <script src='https://d3js.org/d3.v2.min.js' type='text/javascript'></script>
    <script src='https://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>

Modified http://d3js.org/d3.v2.min.js to a secure url

Modified http://tenxer.github.io/xcharts/js/xcharts.min.js to a secure url

https://d3js.org/d3.v2.min.js

https://tenxer.github.io/xcharts/js/xcharts.min.js