Time Chart - multiple lines with markers
JavaScript time chart with two value axes that displays one series as area with outline markers, and another series as a 'candlestick' with 'bar' pattern to visualize range. It applies different colors on 'increase' and 'decrease'.
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
},
valueAxisDefault: { title: "Value, $" },
valueAxis:{
secondary:{
title: "Volume",
side: "right",
position: "outside"
}
},
series:[
{
name:"High",
id:"series1",
type:"line",
data:{
index:2,
aggregation:"avg"
},
style:{
lineColor:"green",
lineWidth: 1
}
},
{
name:"Low",
id:"series2",
type:"line",
data:{
index:3,
aggregation:"max"
},
style:{
lineColor:"red",
lineWidth: 1
}
},
{
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 y",
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);