Time Chart - multiple lines with markers
Yahoo stock prices 1996 - 2014
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(data){
data.dataLimitFrom = 0;
data.dataLimitTo = 0;
for (var i in data.values) {
if (data.dataLimitFrom == 0) {
data.dataLimitFrom = data.values[i][0];
}
data.dataLimitFrom = data.dataLimitFrom > data.values[i][0] ? data.values[i][0] : data.dataLimitFrom;
data.dataLimitTo = data.dataLimitTo < data.values[i][0] ? data.values[i][0] : data.dataLimitTo;
}
t = new TimeChart(
{
container: document.getElementById("demo"),
data:
{
units:["d"],
preloaded: data
},
valueAxis: {
"secondary":{
title: "Volume",
side: "right",
position: "outside"
}
},
valueAxisDefault:{
title: "Value, $"
},
series:[
{
id: "params",
name: "Prices",
type: "candlestick",
data: {
high: 2,
low: 3,
open: 1,
close: 4
},
style:{
pattern:"bar"
}
},
{
name:"Volume",
id:"series3",
type:"line",
data:{
index:5,
aggregation:"min"
},
style:{
lineColor:"skyblue",
fillColor:"rgba(200,200,255,0.2)",
lineWidth: 1,
marker: {
shape: "circle",
width: 4,
fillColor: "rgba(100,200,255,0.8)"
}
},
valueAxis: "secondary"
}
],
navigation: {
initialDisplayUnit: "1 d",
initialDisplayPeriod: "2 M",
initialDisplayAnchor: "newestData"
},
currentTime: {enabled: false}
}
);
}
// using a custom library to load CSV data
loadCSV("/dvsl/data/time-chart/yahoo-stocks.csv", "d", [
{type: "date", format:"([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3,1,2]},
{type: "decimal"},
{type: "decimal"},
{type: "decimal"},
{type: "decimal"},
{type: "decimal"}
], ",", success);