CODEWITHSUNDEEP
highcharts
Oscarina
Oscarina

Reputation: 768

Highcharts, chart with two series starting in diferent points, how yo show single column?

i'm trying to make a chart that shows two diferent sets of data. Both are distributed in 12 month, but one set of data is only relevant from the current month onwards.

I have something like this example (JSFiddle) 

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Temperature'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    title: {
        text: 'Temperature (°C)'
    }
},
plotOptions: {
    column: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: false
    }
},
series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
    name: 'London',
    data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
    pointStart: 1
}]

});

My problem is that i would like to show the data from before the start of the second data with one single column.

For example, in the JSFiddle linked above i'd like to se January as a wider column instead of the thin one with an empty space on the right. Is that possible?

Thanks for reading.

Upvotes: 0

Views: 35

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

For example, in the JSFiddle linked above i'd like to se January as a wider column instead of the thin one with an empty space on the right. Is that possible?

It is possible, however it will require a bit of custom code. The better solution is to centre the single column.

Code:

var maxGroupedColumns = 0;

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var newSeriesArr = [],
          chart = this,
          groupedSeries = {},
          pointOffset;


        // create a new series for each point
        for (var i = chart.series.length - 1; i >= 0; i--) {
          var series = chart.series[i];

          var pointsInSeries = series.points.length;
          for (var j = pointsInSeries - 1; j >= 0; j--) {
            var point = series.points[j];

            // omit the point if its y value equals to 0 
            if (!point.y) {
              continue;
            }

            // make sure that x property of each point is initialized
            point.options.x = point.x;

            var newSeriesOptions = {
              data: [point.options],
              // move relevant options from the original series
              color: series.color,
              name: series.name,
              // linking series items in legend
              linkedTo: series.options.id
            };

            if (!groupedSeries[point.x]) {
              // create group
              groupedSeries[point.x] = [];
            }

            // create series and assign it to group
            groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));

            if (groupedSeries[point.x].length > maxGroupedColumns) {
              // update max grouped columns number
              maxGroupedColumns = groupedSeries[point.x].length;
            }

            point.remove(false);
          }

          //series.remove(false);
          series.setData([]);
        }

        // handle pointPlacement for each series
        pointOffset = 1 / maxGroupedColumns;
        for (var x in groupedSeries) {
          var group = groupedSeries[x];

          group.forEach(function(series, index) {
            series.update({
              pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
            }, false);
          });
        }

        chart.redraw();
      }
    }
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      },
      grouping: false,
      pointRange: 1,
      pointPadding: 0.25,
    }
  },
  series: [{
    name: 'Tokyo',
    id: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'London',
    id: 'London',
    data: [null, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

Demo: https://jsfiddle.net/wchmiel/1wph8ojx/3/

Upvotes: 1

Related Questions