.shadow {
text-align: center !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}
#chart-container {
width: 100%;
height: 450px;
}
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(
"https://static.fusioncharts.com/qa/FTDemo/4-standard-chart-types/step-line/step-line_data.json"
),
loadData(
"https://static.fusioncharts.com/qa/FTDemo/4-standard-chart-types/step-line/step-line_schema.json"
)
]).then((res) => {
var data = [];
res[0].forEach((entry, index) => {
let showEntry1 = index < 2000 || index > 4000;
let newEntry = [...entry];
if (showEntry1) {
newEntry.push("type1");
} else {
newEntry.push("type2");
newEntry[1] = newEntry[1] * -1;
}
data.push(newEntry);
});
console.log(data);
var schema = [
{
name: "Time",
type: "date",
format: "%d/%m/%y %-H:%M"
},
{
name: "Pressure",
type: "number"
},
{
name: "Type",
type: "string"
}
];
var dataStore = new FusionCharts.DataStore();
new FusionCharts({
type: "timeseries",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataSource: {
series: "Type",
chart: {
theme: "fusion",
palettecolors: ["5d62b5", "f2726f"]
},
caption: {
text: "Weather Report"
},
subCaption: {
text: "Analysis of Atmospheric Pressure"
},
yAxis: [
{
plot: "Pressure",
title: "Pressure (in atm)",
min: "980",
max: "1040",
plottype: "area"
}
],
data: dataStore.createDataTable(data, schema)
}
}).render();
});