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() - 7 * 24 * 3600 * 1000,
endTime = Date.now();
var postData = [{
startTime: startTime,
endTime: endTime,
entity: "nurswgvml006",
metric: "nmon.cpu.idle%",
tags: {
id: [1]
},
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "DAY"
}
}
}, {
startTime: startTime,
endTime: endTime,
entity: "nurswgvml006",
metric: "nmon.cpu.sys%",
tags: {
id: [1]
},
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "DAY"
}
}
}, {
startTime: startTime,
endTime: endTime,
entity: "nurswgvml006",
metric: "nmon.cpu.user%",
tags: {
id: [1]
},
aggregate: {
types: ["AVG"],
...