JSFiddle - React, Tailwind, and code Playground
by grant
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<form action="/submit">
<input type="submit" value="Submit">
<input type="submit" value="Go Elsewhere" formaction="/elsewhere">
</form>
JavaScript
json = [
{
"year": "2016",
"total": "19",
"Rooster": "13",
"Miss": "-6",
"Quail": "0"
},
{
"year": "2017",
"total": "44",
"Rooster": "27",
"Miss": "-13",
"Quail": "4"
},
{
"year": "2018",
"total": "11",
"Rooster": "4",
"Miss": "-6",
"Quail": "1"
},
{
"year": "2019",
"total": "3",
"Rooster": "2",
"Miss": "0",
"Quail": "1"
},
{
"year": "2020",
"total": "8",
"Rooster": "7",
"Miss": "0",
"Quail": "1"
}
]
//console.log(result)
/*
series: [{
name: 'hit',
data: [5, 3, 4],
stack: 'grant',
shot: 'grant',
year: 2016
*/
firstname = [], all = [], categories = [], rooster = [], miss = [], quail = [], year = [];
//categories = rooster = miss = quail = year = [];
for(var i in json){
categories.push(json[i].year);
firstname.push(json[i].firstname);
rooster.push(parseInt(json[i].Rooster));
miss.push(parseInt(json[i].Miss));
quail.push(parseInt(json[i].Quail));
year.push(json[i].year);
// data4.push(parseInt(json[i].value4));
}
// all.push(rooster, miss, quail)
// console.log(all)
//console.log(categories);
//console.log(rooster);
//console.log(quail)
//console.log(year);
var uniqueYears = [];
$.each(year, function(i, el){
if($.inArray(el, uniqueYears) === -1) uniqueYears.push(el);
uniqueYears.sort(function(a, b){return a - b});
});
//console.log(uniqueYears)
//console.log(json2);
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Yearly Totals'
},
xAxis: {
categories: uniqueYears
},
yAxis: {
plotLines: [{
color: '#000000',
width: 1,
value: 0,
zIndex:100}]
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking:...