CODEWITHSUNDEEP
highcharts
Mandeep Singh
Mandeep Singh

Reputation: 8224

Highcharts: How to represent time of the day on x axis in HH:MM:SS format?

I have a table in this form

Time        FR    IT     DE
00:00:09    1     2      12
00:00:18    1     0      0
00:00:28    1     3      11

I am trying to plot this data using highcharts. Here is my config

data = {
    "title": {
        "text": "Concurrency"
    },
    "yAxis": {
        "title": {
            "text": "Number of Employees"
        }
    },
    "legend": {
        "layout": "vertical",
        "align": "right",
        "verticalAlign": "middle"
    },
    "series": [
        {
            "name": "FR",
            "data": data_fr
        },
        {
            "name": "IT",
            "data": data_it
        },
        {
            "name": "DE",
            "data": data_de
        }
    ],
}

The time field represents time of the day in HH:MM:SS for a single day. And the rest of the columns are the series data that I need to plot on Y axis as line charts. Now, the number of rows in this table is quite large around 5000. I want to plot the time on x axis but I dont want to show every entry. I want to show only the hours on the x axis. For example, 1 am, 2 am, 3 am etc even though the Time column contains so many time entries. How can I accomplish this?

Also, is there any way I can smoothen my line plots? Because with so many values the graph has lots of sharp edges.

Upvotes: 0

Views: 923

Answers (1)

Mandeep Singh
Mandeep Singh

Reputation: 8224

I had to change the time from string to a timestamp (milliseconds from epoch) field. Once done that, I was able to provide the config option:

"xAxis": {
    "type": "datetime"
}

With this config, Highcharts automatically took care of the clutter from x axis. It showed the labels on x axis at regular intervals, like 2 hours apart.

Then another doubt that I had was how to provide the series data with both x and y axis values. Earlier I was only providing y axis values like this:

"series": [
    {
        "name": "CC_FR",
        "data": [10, 23, 11]
    },

I had to change the data array from array of numbers to array of objects with each object having x and y keys and values. Like this:

"series": [
    {
        "name": "CC_FR",
        "data": [
          { "x": 1528210784424 ,"y": 10 },
          { "x": 1528210803102 ,"y": 23 },
          { "x": 1528210810702 ,"y": 11 }
        ],
        "turboThreshold": 0
    },

The "turboThreshold": 0 was needed in my case because the length of data array was more than 1000. I also added the config option:

"chart": {
   "zoomType": 'x'
},

This made my chart zoomable and whenever I would zoom in, the labels on the x axis were dynamically rendered without any need from my end to bother about the clutter.

Upvotes: 1

Related Questions