Scatter Plot with Time axis using HighChart

[xgeexx]

Hi,

The graph i am trying to replicate in its basic form is below. I’d like “Scheduled time" on the y-axis. Days of the month on the X-axis “event time“ plotted and the reason encoded by colour. The y-axis will have to auto-adjust as scheduled time could be 24hrs but it needs to only focus on a specific round like in this case 19:00 I am giving the code I have written however it is not working

{
  "chart": { "zoomType": "x" },
  "time": { "useUTC": false },

  "title": { "text": "Time of Events per Day" },

  "xAxis": {
    "type": "datetime",
    "dateTimeLabelFormats": {
      "day": "%d-%b",
      "week": "%d-%b",
      "month": "%d-%b"
    }
  },

  "yAxis": {
    "title": { "text": "Time of Day" },
    "type": "datetime",
    "dateTimeLabelFormats": {
      "hour": "%H:%M",
      "minute": "%H:%M"
    },
    "min": 61200000,
    "max": 75600000
  },

  "tooltip": {
    "shared": false,
    "xDateFormat": "%A, %d %b %Y",
    "pointFormat": "<b>{series.name}</b><br>Time: {point.y:%H:%M}"
  },

  "plotOptions": { "series": { "marker": { "radius": 4 } } },

  "series": [

    {
      "name": "DOSES_DISPENSED",
      "type": "scatter",
      "color": "green",
      "data": [
        "map",
        [
          "filter",
          ["getColumn", 0, 1, 2],
          ["==", ["get", ["item"], 1], "DOSES_DISPENSED"]
        ],
        {
          "x": ["get", ["item"], 0],
          "y": ["get", ["item"], 2]
        }
      ]
    },

    {
      "name": "TOO_EARLY",
      "type": "scatter",
      "color": "purple",
      "data": [
        "map",
        [
          "filter",
          ["getColumn", 0, 1, 2],
          ["==", ["get", ["item"], 1], "TOO_EARLY"]
        ],
        {
          "x": ["get", ["item"], 0],
          "y": ["get", ["item"], 2]
        }
      ]
    },

    {
      "name": "DOSES_POSTDISPENSED",
      "type": "scatter",
      "color": "red",
      "data": [
        "map",
        [
          "filter",
          ["getColumn", 0, 1, 2],
          ["==", ["get", ["item"], 1], "DOSES_POSTDISPENSED"]
        ],
        {
          "x": ["get", ["item"], 0],
          "y": ["get", ["item"], 2]
        }
      ]
    }

  ]
}

I have also attached a sample of the data

[Brett]

Hi @xgeexx,

When you mention that it’s ‘not working’, are you receiving an error code, is it providing an output that is incorrect, or is the table itself not showing data?

This may not be the full issue but one thing I noticed in your code, for the ‘y-axis’ in your scatter plot, you have it trying to get item ‘2’, however you mention that ‘scheduled time’ should be your y-axis but that looks to be listed as ‘3’ in your field well.

Additionally, have you checked out the highchart samples in Demo Central? The code syntax that you’re using looks to be different than what QS utilizes, I would compare your syntax to the examples for proper formatting:

DemoCentral

[xgeexx]

I see a blank graph.

I want the round time plotted as a dashed line so i’m accessing it using item ‘2’ and i am also using item ‘3’ later to plot the x-axis.

I have checked out all the examples, but there was no example with X and Y axis as time. I’m unsure whether it is possible or not because apparently using a normal scatter plot just gives us the option of two measures. (Not time)

[Brett]

Hi @xgeexx,

Although the field well for the standard scatter plot’s x and y axes call for value fields, you could still work with an order date, just make sure to change the aggregation to ‘none’:

Some of the issues that stem from creating highchart visuals can be mapped up to what visual types and other specific code does and does not work in Quick Sight’s highchart version (not all visualizations types can be re-created in QS) and unfortunately the documentation on QS highcharts does not completely lay out the functions and visual types that do and do not work.

Let me know if you’re able to assign your date field to the x-axis of a standard scatter plot like shown in my example above and if that can be used instead for your case?