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/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<body>
<div id="chartdiv" style="height: 400px; width: 100%"></div>
</body>
JavaScript
// ALLGEMEINE EINSTELLUNGEN
AmCharts.thousandsSeparator = ".";
AmCharts.decimalSeparator = ",";
AmCharts.precision = 1;
var epoq_colors = ["#aec71e", "#029dd9", "#40b4a6", "#39a935", "#008d36", "#006633"];
var data = [{
"date": "Jun 10, 2015 12:00:00 AM",
"Antwortzeit": "158.42",
}, {
"date": "Jun 11, 2015 12:00:00 AM",
"Antwortzeit": "224.31",
}, {
"date": "Jun 12, 2015 12:00:00 AM",
"Antwortzeit": "114.3",
}, {
"date": "Jun 13, 2015 12:00:00 AM",
"Antwortzeit": "249.67",
}, ];
function StackedBarChart(data, chartdivname, type, definition) {
var config = {
type: "serial",
categoryField: "date",
categoryAxis: {
gridPosition: "start",
parseDates: true,
minorGridEnabled: true,
twoLineMode: true,
dateFormats: [{
period: 'DD',
format: 'DD.MM'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}]
},
dataProvider: data,
valueAxes: [{
stackType: "regular",
title: [definition, type].join(" ")
}],
graphs: []
}
// GENERATE GRAPHS THROUGH DATA
for (key in data[0]) {
if ( data[0].hasOwnProperty(key) && key != "date" ) {
config.graphs.push({
type: "column",
lineColor: epoq_colors[config.graphs.length],
lineAlpha: 0,
fillAlphas: 1,
balloonText: "<span style='color: #555555;'>[[category]]</span><br /><span style='font-size: 14px;'>[[title]]: <b>[[value]]" + type + "</b></span>",
balloonColor: "#FFFFFF",
title: key,
valueField: key
})
}
}
// CREATE CHART
chart =...