JSFiddle - React, Tailwind, and code Playground
by amcharts
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 395px;"></div>
CSS
body{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
.amChartsButtonSelected{
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsButton{
background-color:#EEEEEE;
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
color:#000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsCompareList{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
JavaScript
contentStockChartt = [ {
"date" : 1433102400000,
"nbSession0" : 1
}, {
"date" : 1433138400000,
"nbSession1" : 5
}, {
"date" : 1433142000000,
"nbSession0" : 2,
"nbSession1" : 3
}, {
"date" : 1433149200000,
"nbSession0" : 11,
"nbSession1" : 1
}, {
"date" : 1433156400000,
"nbSession0" : 14,
"nbSession1" : 4
} ];
AmCharts.useUTC = true;
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.mouseWheelZoomEnabled = true;
chart.dataSets = [];
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = contentStockChartt;
contentStockChartt.sort(function(a, b) {
return a.date - b.date;
});
var fieldMap = [];
var allGraph = [];
field = "nbSession0";
chartTitle = "#Sessions";
fieldMap.push({
fromField : field,
toField : field
});
col = '#' + Math.random().toString(16).substr(2, 6);
var graph = new AmCharts.StockGraph();
graph.title = "APP 0";
graph.valueField = field;
graph.useDataSetColors = false;
graph.valueAxis = field;
graph.color = "black";
graph.lineColor = col;
graph.connect = false;
graph.lineThickness = 1.5;
graph.balloonText = "<b>[[title]]:</b> [[category]]<br/><b>" + chartTitle
+ ":</b> [[value]]";
graph.bullet = "round";
graph.bulletBorderThickness = 1;
graph.hideBulletsCount = 0;
graph.fillAlphas = 0;
graph.periodValue = "Sum";
allGraph.push(graph);
field = "nbSession1";
chartTitle = "#Sessions";
fieldMap.push({
fromField : field,
toField : field
});
col = '#' + Math.random().toString(16).substr(2, 6);
var graph = new AmCharts.StockGraph();
graph.title = "APP 1";
graph.valueField = field;
graph.useDataSetColors = false;
graph.valueAxis = field;
graph.color = "black";
graph.lineColor = col;
graph.connect = false;
graph.lineThickness = 1.5;
graph.balloonText = "<b>[[title]]:</b> [[category]]<br/><b>" + chartTitle
+ ":</b> [[value]]";
graph.bullet = "round";
graph.bulletBorderThickness = 1;
graph.hideBulletsCount = 0;
graph.fillAlphas = 0;
graph.periodValue =...