Highcharts - Weather Series

positioned by points in series

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 500px;width: 100%"></div>

JavaScript

$(function() {
  var paths = [];

  function drawWeather() {
    for (var x = 0; x < paths.length; x++) {
      paths[x].safeRemoveChild(paths[x].element);
    };
    paths = [];
    var chart = this;
    for (var s = 0; s < chart.series.length; s++) {
      var plot;
      var last = -9999;
      var top = s ? -90 : 0;
      for (var x = 0; x < chart.series[s].points.length; x++) {
        var point = chart.series[s].points[x];
        plot = point.plotX > (last + 50); // limit number of weather tiles, if they would overlap
        if (point.isInside && plot) {
          //debugger;

          paths.push(chart.renderer.label((point.weather.humidity) + '%<br>' + (point.weather.temp) + '\xB0C', point.plotX + chart.plotLeft - 30, chart.plotTop - 90 + top, '', 0, 0)
            .css({
              color: '#000000'
            })
            .attr({
              fill: 'rgba(230, 230, 230, 0.5)',
              padding: 0,
              r: 15,
              zIndex: 1,
              height: 70,
              width: 60,
              left:20,
              align:"center"
            })
            .add());
          paths.push(chart.renderer.image(
            "https://staging-vending.lrsdedicated.com/dyn/_pictures/weather-icons/" + (point.weather.wx_icon) + ".svg",
            point.plotX + chart.plotLeft - 25,
            chart.plotTop - 50 + top,
            40,
            40
          ).attr({
            zIndex: 2
          }).add());
          last = point.plotX;
        }

      }
    }
  }

  $('#container').highcharts({

    chart: {
      marginTop: 210,
      zoomType: 'x',
      events: {
        load: drawWeather,
        redraw: drawWeather
      }
    },
    title: {
      text: "Weather Info"
    },

    xAxis: {
      type: "datetime"
    },
    yAxis: {
      title: {
        text: "Sales"
      }
    },
    series: [{
      name: "Volume of Sales (Compare)",
      data: [{
        x: Date.UTC(2016, 4, 24),
        y: 6000,
        weather: {
       ...