JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/line-chart/1.1.4/line-chart.min.js"></script>
<div ng-app="myApp" ng-controller="testCtrl">
<linechart data="data" options="options" mode="" width="" height=""></linechart>
</div>
JavaScript
(function(angular) {
var axibase = angular
.module("axibase", []);
axibase.factory("atsdClient", ["$http", function($http) {
function queries(url, requestObj, success, error) {
var req = {
method: "POST",
url: url + "/api/v1/series/query",
headers: {
"content-Type": "application/json; charset=utf-8"
},
data: JSON.stringify(requestObj)
};
$http(req).
success(success).
error(error);
}
return {
series: {
queries: queries
}
};
}]);
}(angular));
angular.module('myApp', ['n3-line-chart', 'axibase'])
.controller("testCtrl", ['atsdClient', "$scope", function(atsdClient, $scope) {
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"]
},
timeFormat: "milliseconds",
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "HOUR"
}
}
}];
atsdClient.series.queries("https://axibase.com", postData,
function(response, status, headers, config) {
$scope.data = response[0].data.map(function(el) {
return {
x: el.t,
value: el.v
};
});
},
function() {});
$scope.options = {
axes: {
x: {
key: 'x',
type: 'date'
},
y: {
...