Back

Time Chart - multiple lines with markers

Yahoo stock prices 1996 - 2014

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

Data

Data
//Data too large to output
Download Data