JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://axibase.com/atsd/regression.min.js"></script>
<h1>combo-regression</h1>
<div id="staticPlotContainer" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
var startTime = Date.now() - 1 * 3600 * 1000,
endTime = Date.now();
var postData = [{
startTime: startTime,
endTime: endTime,
entity: "atsd",
metric: "jvm_memory_used",
timeFormat: "milliseconds",
tags: {
host: ["NURSWGVML007"]
}
}];
var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response) {
return response;
})
.then(function(axibaseSeries) {
var scatterData = axibase.utils.highCharts.convertToHighChartXYData(axibaseSeries[0].data);
$('#staticPlotContainer').highcharts({
xAxis: {
type: "datetime"
},
yAxis: {},
title: {
text: 'Scatter plot with regression line'
},
series: [{
type: 'line',
name: 'Regression Line',
data: regression("linear", scatterData).points,
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
name: 'Observations',
data: scatterData,
marker: {
radius: 4
}
...