JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://silent-cry.net/361/js/highstock.js"></script>
<div id="graph_file_changes" style="height: 400px; width: 500px"></div>
<button id="buttonLoad">(Re)Load chart</button>
<button id="button">Show extremes</button>
<div id="debug"></div>
JavaScript
var chart1;
$(document).ready(function()
{
var seriesOptions = [],
yAxisOptions = [],
file_data= [],
seriesCounter = 0,
names = ["/ohboy/lots.java", "location/lalala/testing.java", "/cpp/fourth.cpp"],
colors = Highcharts.getOptions().colors;
file_data[0] = [[Date.UTC(2011, 11, 20), 1],[Date.UTC(2011, 11, 16), 1]];
file_data[1] = [[Date.UTC(2011, 11, 21), 1],[Date.UTC(2011, 11, 15), 1]];
file_data[2] = [[Date.UTC(2011, 11, 20), 1]];
for (i=0;i<=2;i++)
{
seriesOptions[i] =
{
type: 'column',
name: names[i],
data: file_data[i],
yAxis: 1
};
yAxisOptions[i] =
{
alternateGridColor: null,
gridLineWidth: i ? 0 : 1, // only grid lines for the first series
opposite: i ? true : false,
minorGridLineWidth: 0,
title: {
text: names[i],
style: {
color: colors[i]
}
},
lineWidth: 2,
lineColor: colors[i],
offset: [0, 0, 70][i]
};
}
chart1 = new Highcharts.StockChart
({
chart:
{
renderTo: 'graph_file_changes',
alignTicks: false
},
rangeSelector:
{
selected: 1
},
plotOptions:
{
column:
{
...