Time Chart - clustered columns, logarithmic scale
Clustered column chart that compares the stock price between two companies over time. Note how the Y-Axis uses a logarithmic scale. By default, TimeChart will use linear scale, but logarithmic scale can be enabled with 'logScale: true'. Users can also toggle it on-the-fly with a toolbar button.
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(
{
container: document.getElementById("demo"),
data:[
{
units:["d"],
id: "ms",
preloaded: data1
},
{
units:["d"],
id: "apple",
preloaded: data2
}
],
valueAxisDefault:{
title: "Value, $",
logScale: true
},
series:[
{
name:"Microsoft Stock price, avg",
id:"series1",
type:"columns",
data:{
index:1,
aggregation:"avg",
source:"ms"
},
style:{
fillColor:"#53afda",
lineColor:"#53afda"
}
},
{
name:"Apple Stock price, avg",
id:"series2",
type:"columns",
data:{
index:1,
aggregation:"avg",
source:"apple"
},
style:{
fillColor:"#a6b0bf",
lineColor:"#a6b0bf"
}
}
],
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}
}
);
}
// 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);
});
});