C# HighCharts X Axis

Question

I am using Highcharts to display information as a line chart.

I have 2 lines. One represents every half hour, and the other represents every hour.

Now, the x-axis is based on the half hour line.. but my concern is with the blue hour line.. There are 24 dots, but for example on the 2nd point when hovering on it, it says point 0.5, when it should be 1.. since there aren't half hour times on the hour line.. Realistically I would like the blue hour line to extend all the way across the chart and only having points on the hour ticks.. not half hour ticks..

Here is my implementation:

var lstXAxis = db.DailyRecords.Where(x => x.RecordDateTime.Year == year && !x.deleted)
    .GroupBy(x => x.RecordDateTime.Hour + (x.RecordDateTime.Minute >= 30 ? 0.5 : 0))
    .Select(x => x.Key).OrderBy(x => x).ToList();

var lstHalfHoursAsString = lstXAxis.Select(x => x.ToString()).ToArray(); // results in 48 objects which is correct

var lstGroupRecordsByHour =
    db.DailyRecords.Where(x => x.RecordDateTime.Year == year && !x.deleted)
        .GroupBy(x => x.RecordDateTime.Hour).ToList(); // results in 24 which is correct

var arrySummariesByHour = lstGroupSummariesByHour.Select(x => new object[] { x.Count() }).ToArray();

var lstSummariesByHalfHour = db.DailyRecords.Where(x => x.RecordDateTime.Year == year && !x.deleted)
    .GroupBy(x => x.RecordDateTime.Hour + (x.RecordDateTime.Minute >= 30 ? 0.5 : 0)).ToList();

var arrySummariesByHalfHour = lstSummariesByHalfHour.Select(x => new object[] { x.Count() }).ToArray();

Highcharts countHourChart =
    new Highcharts("ChartTwo").InitChart(new DotNet.Highcharts.Options.Chart()
    {
        DefaultSeriesType = DotNet.Highcharts.Enums.ChartTypes.Line,
        Width = 1180
    })
        .SetCredits(new Credits { Enabled = false })
        .SetTitle(new Title
        {
            Text = year.ToString() + " Count Graph By Hour",
            Style = "font: 'normal 20px Impact', color: 'black'"
        })
        .SetXAxis(new XAxis
        {
            Categories = lstHalfHoursAsString,
            Title = new XAxisTitle { Text = "Hour", Style = "font: 'normal 14px Arial', color: 'black'" }
        })
        .SetYAxis(new YAxis
        {
            Title =
                new YAxisTitle
                {
                    Text = "Mission Count",
                    Style = "font: 'normal 14px Arial', color: 'black'"
                }
        })
        .SetPlotOptions(new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                DataLabels = new PlotOptionsColumnDataLabels
                {
                    Enabled = true
                },
                EnableMouseTracking = false
            }
        })
        .SetSeries(new[]
        {
            new Series {Data = new Data(arrySummariesByHour), Name = "Missions Per Hour"},
            new Series {Data = new Data(arrySummariesByHalfHour), Name = "Mission per Half Hour"}
        });

So my question.. is how to get the blue line to extend across the chart and the points be lined up with 0, 1, 2, 3, etc.. and not 0, 0.5, 1, 1.5..etc..

Answer 1

You're trying to plot two series with an x-axis that contains categories, but one of your series doesn't have as many points as there are categories (you have half the needed points).

To fix your issues, you should add null values to your hour series, at each location that corresponds to the half hour categories, so that both series have the same number of points. Then, you choose to connect the null values so that the line is solid.

Here's a example to see what I mean (it's in pure javascript, but the concepts are the same):

Highcharts.chart('container', {
  xAxis: {
    categories: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6']
  },

  plotOptions: {
    series: {
      connectNulls: true
    }
  },

  series: [{
    data: [2, 7, 10, 12, 14, 17, 13, 14, 21, 19, 9, 5],
  }, {
    data: [1, 5, 9, 2, 4, 7],
  }, {
    data: [1, null, 5, null, 9, null, 2, null, 4, null, 7],
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

The first series is your half-hour serie, the second is your current hour serie, and the third is your new one.

Now, in C#, you'd have:

var arrySummariesByHour = lstGroupSummariesByHour
    .SelectMany(x => new object[] {
        x.Count(), // hour tick
        null       // half hour tick
    }).ToArray();

and the options to join null values:

.SetPlotOptions(new PlotOptions
{
     Series = new PlotOptionsSeries 
     {
         ConnectNulls = true
     }
}