Area With Time Based Data

Our serial chart can accept data as date strings, date objects or time stamps. Your data can be at any interval you need - this particular chart displays data which changes each minute. You are free to <a href="/tutorials/formatting-dates/">format time strings</a> on the axis and in the category tool-tip in any way you want. The beginning of a period change can be marked as bold and use a different date/time format. <h2>Zooming the chart from outside</h2> You can easily zoom-in the chart to desired dates/categories/indices using methods provided by our charting API. You can do it one some user interaction or when chart is rendered.

HTML

<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 800px;
}

JavaScript

var startTime = Date.now() - 24 * 3600 * 1000,
    endTime = Date.now();

var postData = [
    {
        startTime: startTime,
        endTime: endTime,
        entity: "atsd",
        metric: "jvm_memory_used",
        tags: {host: ["NURSWGVML007"]},
        aggregate: {
            types: ["AVG", "STANDARD_DEVIATION"],
            period: {count: 1, unit: "HOUR"}
        }
    }
];

var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response){
    var avgSeries, devSeries;
    for (var i = 0; i < response.length; ++i) {
        if (response[i].aggregate.type === "AVG") {
            avgSeries = response[i].data;
        } else if (response[i].aggregate.type === "STANDARD_DEVIATION") {
            devSeries = response[i].data;
        } else {
            throw new Error("Error! Bad type found!!!");
        }
    }
    
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "xy",
        "theme": "none",
        "pathToImages": "/wp-content/themes/amcharts/static/amcharts/images/",
        "dataProvider": avgSeries.map(function(el, i){return {t: new Date(el.d), v: el.v, dev: devSeries[i].v}}),
        "valueAxes": [{
            "title": "Date",
            "position":"bottom",
            labelFunction: function(value, valueText, valueAxis) {return new Date(value).toLocaleTimeString();},
            "id":"x1"
        }, {
            "minMaxMultiplier": 1.2,
            "position": "left",
            labelFunction: function(value, valueText, valueAxis) {return Math.round(value / 1024/1024) + " Mb"},
            
            "id":"y1",
            "title": "Jvm memory used"
        }],
        "graphs": [{
            "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>deviation:<b>[[dev]]</b>",
            "bullet": "yError",
            "bulletAxis": "x1",
            "lineAlpha": 1,
            "xField": "t",
            "yField": "v",
            "errorField": "dev",
            "fillAlphas": 0
    ...