HighCharts: Category values are repeated. Tooltip not showing the correct date

Question

I am plotting a scatter plot using highchart.js.

X-Axis: "Servers" [List of Servers "17.0.0.1","17.0.0.2","17.0.0.3","17.0.0.4". Y-Axis: "DateTime" {last 5 days with interval of 6 hours}

Basically the servers gets refreshed multiple time on a given day and the data is captured and saved into database. The chart will read the database table data and paints the chart.

Now, for shake of simplicity, i have hard-coded and showing here.

Here is the link for the JSBIN. http://jsbin.com/joxacen/2/edit?js,output

The categories, "17.0.0.3" and "17.0.0.4" are repeated. I don't want this to be repeated. How to solve this? Please find the image for the repeated values.
The following dates are not painted for the server 17.0.0.1 ['Server 17.0.0.1', Date.UTC(2016, 5, 2, 20, 0, 0)], //not painted june 2nd ['Server 17.0.0.1', Date.UTC(2016, 5, 4, 11, 0, 0)], //not painted june 4th
Tooltip is showing some junk data. Ideally it should show me the date.

I would suggest sending the category array index as the x value, not the category value: jsbin.com/fuhopeqeva/1/edit?js,output — jlbriggs

wergeld wergeld · Accepted Answer · 2016-06-07T13:52:23

This is happening because your series data array contains the servers in that order (with repeating). So it overrides the xAxis.categories setting. To do this with predefined categories change your x-value entry in your data array to the index of the server in the category you want:

series: [{
  name: 'In-Correct Server Refresh',
  color: 'rgba(223, 83, 83, .5)',
  data: [
         [0,   Date.UTC(2016,  5, 2, 10, 0, 0)],
         [0,   Date.UTC(2016,  5, 2, 20, 0, 0)], //not painted june 2nd
         [1,   Date.UTC(2016,  5, 4, 10, 0, 0)],
         [0,   Date.UTC(2016,  5, 4, 11, 0, 0)], //not painted june 4th
         [2,   Date.UTC(2016,  5, 4, 17, 0, 0)],
         [3,   Date.UTC(2016,  5, 4, 11, 30, 0)],
         [3,   Date.UTC(2016,  5, 4, 12, 0, 0)]
        ]   
}, {
  name: 'Correct Server Refresh',
  color: 'rgba(119, 152, 191, .5)',
  data: [
         [1,   Date.UTC(2016,  5, 3, 5, 0, 0)],
         [1,   Date.UTC(2016,  5, 3, 12, 0, 0)],
         [1,   Date.UTC(2016,  5, 3, 17, 0, 0)],
         [0,   Date.UTC(2016,  5, 5, 18, 0, 0)],
         [2,   Date.UTC(2016,  5, 5, 18, 0, 0)]
        ]
}]

The issue with your tooltip is that you have your properties in an invalid location under plotOptions. It would need to be inside the plotOptions.scatter or at root of chart object. See this example fiddle. I am not sure why you are appending the % symbol after your server's IP but there you go.

HighCharts: Category values are repeated. Tooltip not showing the correct date

1 Answers