Back

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'.

Documentation Open in JSFiddle
Start Free Trial Purchase

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);

Data

Data
//Data too large to output
Download Data