JSFiddle - React, Tailwind, and code Playground
by amcharts
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
AmCharts.useUTC = true;
createChart();
function setData(chart, startTime, startDate, endDate) {
var data = [
{ TimeStamp: "2015-05-27T18:54:50.197Z", RadioAccessTechnology: "WIFI", BytesReceived: 0, BytesSent: 0, SignalLevel: -48 },
{ TimeStamp: "2015-05-27T18:54:51.197Z", RadioAccessTechnology: "WIFI", BytesReceived: 2230, BytesSent: 2547, SignalLevel: -48 },
{ TimeStamp: "2015-05-27T18:54:52.197Z", RadioAccessTechnology: "WIFI", BytesReceived: 1000, BytesSent: 1000, SignalLevel: -48 }
];
var processedData = postProcess(data);
chart.dataSets[0].dataProvider = processedData;
chart.validateData();
}
function postProcess(data) {
var ratColors = new Array();
var dataLength = data.length;
for (var i = 0; i < dataLength; i++) {
if (!ratColors[data[i].RadioAccessTechnology]) {
ratColors[data[i].RadioAccessTechnology] = AmCharts.randomColor();
}
data[i].RATColor = ratColors[data[i].RadioAccessTechnology];
data[i].RATUp = 30;
data[i].RATDown = 20;
}
return data;
}
function createChart() {
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
theme: "light",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataDateFormat: "YYYY-MM-DDTHH:NN:SS.QQQZ",
categoryAxesSettings: {
minPeriod: "ss",
maxSeries: 0 //important otherwise color field won't get obtained
},
dataSets: [{
title: "RTTM",
fieldMappings: [{
fromField: "BytesReceived",
toField: "BytesReceived"
}, {
fromField: "BytesSent",
toField: "BytesSent"
}, {
fromField: "SignalLevel",
toField: "SignalLevel"
}, {
fromField: "RadioAccessTechnology",
toField: "RadioAccessTechnology"
}, {
fromField:...