linear gauge

by grant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="row">
  <div class="item" id="station"></div>
  <div class="item" id="cfs"></div>
</div>
<div id="container"></div>
<div id="rIcon"></div>

CSS

body {
  font-size: 0.8em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
#riverIcon {
  margin: 2px;
}
#container {
    width: 400px;
    height: 100px;
    margin: 1em auto;
}
.row {
  display: flex;
}
.item{
  display: flex;
  margin: 0 5px 0 0;
 
}
.item > div{
  background: #7ae;
  margin: 0 2px 0 0;
  border: solid;
}

JavaScript

cfs = 901;

$("#cfs").html(cfs);
$("#station").html("Set the cfs var here.");
shortName = "local vars -- no json get"
//stationName.split(" ").splice(0,2).join(" "); // remove trailing crap

  if (cfs <= 100) {max = 200 } else
if (cfs <= 200) {max = 300 } else
if (cfs <= 300) {max = 400 } else
if (cfs <= 400) {max = 500 } else
if (cfs <= 500) {max = 600 } else
if (cfs <= 600) {max = 700 } else
if (cfs <= 700) {max = 800 } else
if (cfs <= 900) {max = 1000 } else
if (cfs <= 1000) {max = 1250 } else
{ max = 10000}

/**
 * Highcharts Linear-Gauge series plugin
 */
(function (H) {
    H.seriesType('lineargauge', 'column', null, {
        setVisible: function () {
            H.seriesTypes.column.prototype.setVisible.apply(this, arguments);
            if (this.markLine) {
                this.markLine[this.visible ? 'show' : 'hide']();
            }
        },
        drawPoints: function () {
            // Draw the Column like always
            H.seriesTypes.column.prototype.drawPoints.apply(this, arguments);

            // Add a Marker
            var series = this,
                chart = this.chart,
                inverted = chart.inverted,
                xAxis = this.xAxis,
                yAxis = this.yAxis,
                point = this.points[0], // we know there is only 1 point
                markLine = this.markLine,
                ani = markLine ? 'animate' : 'attr';

            // Hide column
            point.graphic.hide();

            if (!markLine) {
                var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5, 'L', 0, 0, 'L', xAxis.len, 0];
                markLine = this.markLine = chart.renderer.path(path)
                    .attr({
                        fill: series.color,
                        stroke: series.color,
                        'stroke-width': 1
                    }).add();
            }
            markLine[ani]({
               ...