Plot a Highchart heatmap with the x-axis representing time values and the y-axis representing strings

I've been working on creating a heatmap to display the time taken for each task to execute. The x-axis will show time in datetime format, the y-axis will contain the task names, and each point will represent the time taken for the task execution.

[{datetime, stage name, value}]

My xCategory array looks like this:

xCategory = [1527657415000, ... some datetime]

The yCategory is:

yCategories = ["Stage", ...]
and series.data=[[0, 0, 12], [0, 1, 12], ...]

When trying to render the chart using Highcharts, it's not displaying properly.


var chart = new Highcharts.Chart('chart', {
  chart: {
    type: 'heatmap'
  },
  
  xAxis: {
    // categories: xCategories,
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },

  yAxis: {
    // categories: yCategories
  },

  plotOptions: {
    series: {
      colorByPoint: true
    }
  },
  
  series: series

});

Answer №1

When using the heatmap chart type, each point takes up an equal amount of space, requiring value data to be represented solely by color or label. If utilizing a datetime xAxis type, it is crucial to correctly configure the colsize property.

Highcharts.chart('container', {
    chart: {
        type: 'heatmap',
        plotBorderWidth: 1
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },
    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        colsize: 60 * 60 * 1000,
        data: [
            [1527657415000, 0, 10],
            [1527657415000, 1, 19],
            [1527657415000, 2, 8],
            [1527657415000, 3, 24],
            [1527657415000, 4, 67],
            [1527661015000, 0, 92],
            [1527661015000, 1, 58],
            [1527661015000, 2, 78],
            [1527661015000, 3, 117],
            [1527661015000, 4, 48],
            [1527661015000, 0, 35],
            [1527661015000, 1, 15],
            [1527661015000, 2, 123],
            [1527661015000, 3, 64],
            [1527661015000, 4, 52],
            [1527664615000, 0, 72],
            [1527664615000, 1, 132],
            [1527664615000, 2, 114],
            [1527664615000, 3, 19],
            [1527664615000, 4, 16]
    
        ],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]
});

Live demo: https://example.com/demo/heatmapper

API: https://api.highcharts.com/highcharts/series.heatmap.colsize

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Output repeated JSON Array in console using Node.js

Looking to identify duplicates within a JSON array based on the URL. var temp = [ { "name":"Allen", "site":"www.google.com/allen" }, { "name":"Chris", "site":&q ...

Utilizing AngularJS and Bootstrap tooltips within a template

In my Rails-generated template, I am able to successfully add a Bootstrap tooltip in the application.html.erb file. However, when attempting to add a tooltip in a template partial loaded by AngularJS, it does not function as expected. Within the applicati ...

Automatically filling in related information in multiple input fields after choosing a value in a specific input field using JavaScript

My horizontal form is dynamically generated using JavaScript, with each input field having a jQuery autocomplete that retrieves data from a database using the $.get method. I'm looking to automatically populate the second input field with the corresp ...

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

After pressing the "add layer" button in the box shadow generator, a new layer is added. For example, let's say I have added 3 layers (Layer 1, Layer 2, Layer 3) and then deleted Layer 2. After deletion, the remaining Layers are Layer 1 and Layer 3, b ...

Transforming data from a JSON format into a JavaScript array

I'm trying to convert a JSON string into an array containing the values from the JSON. When I use json.stringify(jsonmybe) and alert it, I see [{"role":"noi_user"},{"role":"bert_user"}] (which is in JSON format). My goal is to extract `noi_user` and ` ...

Indicating that jQuery is not recognized despite the jQuery file being successfully loaded

Currently, I am working on an angular.js application where I have included the jQuery file. However, despite this inclusion, I am encountering an error message. Error Uncaught ReferenceError: jQuery is not defined(anonymous function) @ popup.js:1 File ...

Implementing custom validation in React to dynamically enable/disable buttons

I am working on a basic form that includes 3 input fields and one submit button. The submit button is initially disabled, and each input field has its own custom validation logic using regex. I am looking for a way to enable the button only when all the ...

Error message: The Javascript Electron app is unable to find the node-fetch module when

Below is the code snippet from my gate.html file: <html> <head> <meta http-equiv='Content-Security-Policy' content='default-src 'self'; https://example.com.tr/validkeys.txt'> <meta http-equiv=&ap ...

What is the method to include a CoffeeScript file in my project?

Currently, I am attempting to follow the steps outlined in this CoffeScript tutorial. After opening the terminal and navigating to the directory where simpleMath.coffee is located, I proceeded to run node and entered var SimpleMath = require('./simpl ...

Sending HTML parameters to a PHP file

I have been trying to pass the parameters from the current HTML page to a PHP page using a form. In my header in the HTML, I currently have the following function: <script> function getURLParameter(name) { return decodeURIComponent((new Re ...

Continuously decrease a sequence of identical numbers in an array through recursion

One of the key challenges was to condense an array of numbers (with consecutive duplicates) by combining neighboring duplicates: const sumClones = (numbers) => { if (Array.isArray(numbers)) { return numbers.reduce((acc, elem, i, arr) => { if ( ...

Utilizing Reactjs to efficiently transmit name and value to Material UI autocomplete

I am trying to customize the Material UI Autocomplete component. I need to pass name, value and onchange similarly to how it is done for TextField. Can someone please help me achieve this? My current code is not functioning as expected. < ...

How can I verify if my discord.js bot has the necessary permissions from a server or channel?

I need to verify two things: Determine if my bot has a particular SERVER permission (return true/false based on the presence of that permission) Confirm if my bot possesses a specific CHANNEL permission (return true/false depending o ...

Give a radio button some class

<input id="radio1" type="radio" name="rgroup" value="1" > <label for="radio1"><span><span></span></span>1</label> <input id="radio2" type="radio" name="rgroup" value="2" > <label for="radio2"><span ...

Updating information within an ArcGIS Service using REST and JSON using jQuery/JavaScript

I've been attempting to update information in a feature within an arcgis service using REST and JSON. I've created a function that is supposed to be called, but the output I'm receiving is not providing me with any clear direction. I am als ...

NodeJS: The module failed to automatically register itself

Exploring the capabilities of IBM Watson's Speech to Text API, I encountered an issue while running my NodeJS application. To handle the input audio data and utilize IBM Watson's SpeechToText package, I integrated the line-in package for streami ...

Support for SBE protocol within the grpc/javascript framework

Our plan is to utilize grpc for communication between web UI and server, as well as implement SBE as our communication protocol. I have two questions regarding this: Is it possible to integrate the SBE protocol with grpc instead of protobuf? Are there res ...

Struggling to iterate through the children of a variable with the help of express-handlebars?

Currently, I am in the process of developing an application using Javascript along with express, express-handlebars, and MySQL. One of my main tasks is to establish a route that follows the pattern '/viewowner/:ID/scoreboards/:year' where ID sig ...

Node.js captures the Promise and provides detailed feedback

As I embark on my journey with Node.js + Express, currently in the process of structuring my HTTP APIs, I have a controller that utilizes a specific pattern: my_controller.js 'use strict'; var AppApiFactory = function (express, appService) { ...

Tips for obtaining the entire date and time on one continuous line without any breaks or separation

Is there a way to retrieve the current date and time in the format of years, months, days, hours, minutes, seconds, and milliseconds like this? 201802281007475001 Currently, I am getting something like: 2018418112252159 This is my code so far: var dat ...