FusionCharts - Gallery Example - Area 2D Chart
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- A simple implementation of Area 2D chart showing daily trend of liquor sales for the last week -->
<div id="container">FusionCharts will render here</div>
JavaScript
function fetchCheckStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
var error = new Error(response.statusText);
error.response = response;
throw error;
}
}
function loadData(url) {
var option = {
method: "GET",
headers: new Headers(),
mode: "cors",
cache: "default"
};
return fetch(url, option)
.then(fetchCheckStatus)
.then(function(resp) {
var contentType = resp.headers.get("Content-Type");
if (contentType && contentType.indexOf("application/json") !== -1) {
return resp.json();
} else {
return resp.text();
}
})
.then(function(data) {
return data;
})
.catch(function(err) {
console.log("Something went wrong! Please check data/schema files");
});
}
Promise.all([
loadData(
"http://static.fusioncharts.com/qa/FTDemo/2-multivariate-timeseries/plotting-two-variable-measures/plotting-two-variable-measures_data.json"
),
loadData(
"http://static.fusioncharts.com/qa/FTDemo/2-multivariate-timeseries/plotting-two-variable-measures/plotting-two-variable-measures_schema.json"
)
]).then(res => {
var data = res[0];
var schema = res[1];
var dataStore = new FusionCharts.DataStore();
new FusionCharts({
type: 'timeseries',
renderAt: 'container',
width: 800,
height: 600,
dataSource: {
caption: {
text: 'Cariaco Basin Sampling'
},
subcaption: {
text: 'Analysis of O₂ Concentration and Surface Temperature'
},
yAxis: [{
plot: [{
value: 'O2 concentration',
type:'column',
connectNullData: true
}],
min: '3',
...