Time Chart - area, with series toggle
Area chart for stock price comparison over time. Clicking on the legend items will show or hide the series.
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
function success(data1, data2) {
data1.dataLimitFrom = 0;
data1.dataLimitTo = 0;
for (var i in data1.values) {
if (data1.dataLimitFrom == 0) {
data1.dataLimitFrom = data1.values[i][0];
}
data1.dataLimitFrom = data1.dataLimitFrom > data1.values[i][0] ? data1.values[i][0] : data1.dataLimitFrom;
data1.dataLimitTo = data1.dataLimitTo < data1.values[i][0] ? data1.values[i][0] : data1.dataLimitTo;
}
data2.dataLimitFrom = 0;
data2.dataLimitTo = 0;
for (var i in data2.values) {
if (data2.dataLimitFrom == 0) {
data2.dataLimitFrom = data2.values[i][0];
}
data2.dataLimitFrom = data2.dataLimitFrom > data2.values[i][0] ? data2.values[i][0] : data2.dataLimitFrom;
data2.dataLimitTo = data2.dataLimitTo < data2.values[i][0] ? data2.values[i][0] : data2.dataLimitTo;
}
t = new TimeChart(
settings = {
container: document.getElementById("demo"),
data: [
{
units: ["d"],
id: "ms",
preloaded: data1
},
{
units: ["d"],
id: "apple",
preloaded: data2
}
],
valueAxisDefault: { title: "Value, $" },
series: [
{
name: "Apple Stock price, avg",
id: "series2",
type: "line",
data: {
index: 1,
aggregation: "avg",
source: "apple"
},
style: {
fillColor: "#a6b0bf",
lineColor: "#a6b0bf"
}
},
{
name: "Microsoft Stock price, avg",
id: "series1",
type: "line",
data: {
index: 1,
aggregation: "avg",
source: "ms"
},
style: {
fillColor: "#53afda",
lineColor: "#fff",
lineWidth: 2
}
}
],
navigation: {
initialDisplayUnit: "1 y",
initialDisplayPeriod: "10 y",
initialDisplayAnchor: "newestData"
},
area: {
displayUnits: [
{ name: "day", unit: "1 d" },
{ name: "month", unit: "1 M" },
{ name: "year", unit: "1 y" },
{ name: "10 years", unit: "10 y" }
]
},
currentTime: { enabled: false },
legend: { enabled: true }
}
);
}
// using a custom library to load CSV data
loadCSV("/dvsl/data/time-chart/microsoft-stock-prices.csv", "d", [
{ type: "date", format: "([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3, 2, 1], process: [null, null, null, function (a) { return 2000 + parseInt(a); }] },
{ type: "decimal" },
{ type: "decimal" }
], "\t", function (data1) {
loadCSV("/dvsl/data/time-chart/apple-stock-prices.csv", "d", [
{ type: "date", format: "([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3, 2, 1], process: [null, null, null, function (a) { return 2000 + parseInt(a); }] },
{ type: "decimal" },
{ type: "decimal" }
], "\t", function (data2) {
success(data1, data2);
});
});