An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.
Features:
Previous version: Reusable Responsive Multiline Chart
forked from asielen's block: Reusable Line Chart v2
forked from anonymous's block: Reusable Line Chart v2
forked from vdepoorter's block: Reusable Line Chart v2
forked from vdepoorter's block: Reusable Line Chart v2
forked from vdepoorter's block: Reusable Line Chart v2
forked from vdepoorter's block: Reusable Line Chart v2
forked from vdepoorter's block: Reusable Line Chart v2
forked from vdepoorter's block: Reusable Line Chart v2
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="multiline.css">
<script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
</head>
<body>
<div class="chart-wrapper" id="chart-line1"></div>
<script src="multiline.js" charset="utf-8"></script>
<script type="text/javascript">
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
var global_data = '';
parseDate = d3.time.format("%Y-%m-%d %H:%M").parse;
//d3.csv = httpGetAsync("https://forecasts.proaanalytics.com/GetForecast/testkey1/2");
d3.csv("multiline_data.csv", function(error, data) {
console.log(data);
data.forEach(function (d) {
//d.year = +d.year;
d.year = parseDate(d.year);
d.variableA = +d.variableA/1000;
d.variableB = +d.variableB/1000;
d.variableC = +d.variableC/1000;
d.variableD = +d.variableD/1000;
d.variableA_90 = +d.variableA*0.8;
d.variableA_10 = +d.variableA*1.1;
d.variableB_90 = +d.variableB*0.9;
d.variableB_10 = +d.variableB*1.1;
d.variableC_90 = +d.variableC*0.9;
d.variableC_10 = +d.variableC*1.1;
d.variableD_90 = +d.variableD*0.9;
d.variableD_10 = +d.variableD*1.1;
});
// Convert date strings to forecast horizon
//var date_strings = d.year;
//var split = d.year.split(" ");
//var date = split[0];
//var time = split[1];
//var date_split = date.split("-");
//var time_split = time.split(":");
//var fc_time = new //Date(date_split[0],date_split[1],date_split[2],time_split[0],time_split[1]);
var global_data = data;
var chart = makeLineChart(data, 'year', {
'NSW': {best_guess: 'variableA', p90: 'variableA_90', p10: 'variableA_10'},
'SA': {best_guess: 'variableB', p90: 'variableB_90', p10: 'variableB_10'},
'VIC': {best_guess: 'variableC', p90: 'variableC_90', p10: 'variableC_10'},
'QLD': {best_guess: 'variableD', p90: 'variableD_90', p10: 'variableD_10'}
});
chart.bind({selector:"#chart-line1",chartSize:{height:400, width:800}, axisLabels: {xAxis:'Forecast horizon (h)', yAxis: 'Generation (kW)'}});
chart.render();
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.js to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.js
https://d3js.org/d3.v3.min.js