Chronological Overview (Highcharts)

Can you customize a timeline in Highcharts to resemble the image?

I have a functional example of the timeline I desire, but the color coding and filtering aspects are challenging for me. I am attempting to apply a filter that will decrease the opacity of other items upon clicking one.

(BONUS QUESTION: Can a drilldown feature be implemented on a timeline? Not looking for code assistance, just curious about its feasibility)

Below is the code for my timeline:

<script>
  (function(H) {
    H.seriesTypes.timeline.prototype.distributeDL = function() {
      var series = this,
        dataLabelsOptions = series.options.dataLabels,
        options,
        pointDLOptions,
        newOptions = {},
        visibilityIndex = 1,
        j = 2,
        distance;

      series.points.forEach(function(point, i) {
        distance = dataLabelsOptions.distance;

        if (point.visible && !point.isNull) {
          options = point.options;
          pointDLOptions = point.options.dataLabels;

          if (!series.hasRendered) {
            point.userDLOptions = H.merge({}, pointDLOptions);
          }

          if (i === j || i === j + 1) {
            distance = distance * 2.5

            if (i === j + 1) {
              j += 4
            }
          }

          newOptions[series.chart.inverted ? 'x' : 'y'] =
            dataLabelsOptions.alternate && visibilityIndex % 2 ?
            -distance : distance;

          options.dataLabels = H.merge(newOptions, point.userDLOptions);
          visibilityIndex++;
        }
      });
    }
  }(Highcharts));
  Highcharts.dateFormats = {
    q: function(timestamp) {
      var date = new Date(timestamp),
        quarter = (Math.floor(date.getUTCMonth() / 3) + 1);
      console.log(quarter);
      return quarter;
    }
  };
  // Rest of the chart setup and data omitted for brevity...
</script>

Your assistance with this matter is greatly appreciated.

Answer №1

Yes, it is indeed possible with a few modifications and tailor-made configurations. You will need to make adjustments such as un-setting the legendType within series and colorByPoint. Additionally, you'll have to distribute the points among separate series and set different data labels distance for each. I have made edits to your example, so please review it.

(function(H) {

  H.seriesTypes.timeline.prototype.getXExtremes = function(xData) {
    var series = this;

    return {
      min: H.arrayMin(xData),
      max: H.arrayMax(xData)
    };
  }
}(Highcharts));

Highcharts.dateFormats = {
  q: function(timestamp) {
    var date = new Date(timestamp),
      quarter = (Math.floor(date.getUTCMonth() / 3) + 1);
    return quarter;
  }
};
Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
    type: 'timeline'
  },
  //xAxis: {
  //type: 'datetime',
  //visible: true
  //},
  xAxis: {
    type: 'datetime',
    units: [ // responsive ticks
      ['month', [3, 6]],
      ['year', [1]]
    ],
    labels: {
      format: '{value:Q%q\'%y}',
      //rotation: -30
    }
  },
  yAxis: {
    gridLineWidth: 1,
    title: null,
    labels: {
      enabled: false
    }
  },
  legend: {
    enabled: true
  },
  title: {
    text: '<strong><font size="+10">INITIATIVE TIMELINE</font></strong>'
  },
  subtitle: {
    text: ''
  },
  tooltip: {
    style: {
      width: 300
    }
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    timeline: {
      lineWidth: 0,
      legendType: '',
      showInLegend: true,
      colorByPoint: false,
      dataLabels: {
        allowOverlap: true,
        format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
          '{point.x:%d %b %Y}</span><br/>{point.label}'
      },
      marker: {
        symbol: 'circle'
      },
    }
  },
  series: [{
    dataLabels: {
      distance: 40
    },
    data: [{
      x: Date.UTC(1951, 5),
      name: 'First dogs in space',
      label: 'First dogs in space',
      description: "Dezik and Tsygan were the first dogs to make a sub-orbital flight on 22 July 1951. Both dogs were recovered unharmed after travelling to a maximum altitude of 110 km."
    }, {
      x: Date.UTC(1971, 11, 2),
      name: 'First soft Mars landing',
      label: 'First soft Mars landing',
      description: "Mars 3 was an unmanned space probe of the Soviet Mars program which spanned the years between 1960 and 1973. Mars 3 was launched May 28, 1971, nine days after its twin spacecraft Mars 2. The probes were identical robotic spacecraft launched by Proton-K rockets with a Blok D upper stage, each consisting of an orbiter and an attached lander."
    }, {
      x: Date.UTC(1976, 3, 17),
      name: 'Closest flyby of the Sun',
      label: 'Closest flyby of the Sun',
      description: "Helios-A and Helios-B (also known as Helios 1 and Helios 2) are a pair of probes launched into heliocentric orbit for the purpose of studying solar processes. A joint venture of West Germany's space agency DFVLR (70 percent share) and NASA (30 percent), the probes were launched from Cape Canaveral Air Force Station, Florida."
    }]
  }, {
    dataLabels: {
      distance: 90
    },
    data: [{
      x: Date.UTC(1959, 0),
      name: 'First artificial satellite to reach the Moon',
      label: 'First artificial satellite to reach the Moon',
      description: "Luna 1 was the first artificial satellite to reach the Moon vicinity and first artificial satellite in heliocentric orbit."
    }, {
      x: Date.UTC(1966, 1),
      name: 'First soft landing on the Moon',
      label: 'First soft landing on the Moon',
      description: "Yuri Gagarin was a Soviet pilot and cosmonaut. He became the first human to journey into outer space when his Vostok spacecraft completed one orbit of the Earth on 12 April 1961."
    }, {
      x: Date.UTC(1989, 7, 8),
      name: 'First astrometric satellite',
      label: 'First astrometric satellite',
      description: "Hipparcos was a scientific satellite of the European Space Agency (ESA), launched in 1989 and operated until 1993. It was the first space experiment devoted to precision astrometry, the accurate measurement of the positions of celestial objects on the sky."
    }]
  }, {
    dataLabels: {
      distance: 140
    },
    data: [{
      x: Date.UTC(1978, 11, 4),
      name: 'First orbital exploration of Venus',
      label: 'First orbital exploration of Venus',
      description: "The Pioneer Venus Orbiter entered orbit around Venus on December 4, 1978, and performed observations to characterize the atmosphere and surface of Venus. It continued to transmit data until October 1992."
    }, {
      x: Date.UTC(1986, 1, 19),
      name: 'First inhabited space station',
      label: 'First inhabited space station',
      description: "was a space station that operated in low Earth orbit from 1986 to 2001, operated by the Soviet Union and later by Russia. Mir was the first modular space station and was assembled in orbit from 1986 to 1996. It had a greater mass than any previous spacecraft."
    }, {
      x: Date.UTC(1998, 10, 20),
      name: 'First multinational space station',
      label: 'First multinational space station',
      description: "The International Space Station (ISS) is a space station, or a habitable artificial sat...truncated for brevity 
#container {
  min-width: 310px;
  max-width: 800px;
  height: 600px;
  margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.src.js"></script>

<div id="container"></div>

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

Having trouble integrating VueX store and router into Mocha tests

Latest Update To view the issue on VueX git repository that has been created, please follow this link: https://github.com/vuejs/vuex/issues/1509 If you want to replicate the problem, here is the link to the repository: https://github.com/djam90/vuex-vue- ...

Utilizing Angular's Local Storage Module to efficiently store and manage various elements within an array in Local Storage

I'm facing an issue with storing and retrieving an array from localStorage using the Angular Local Storage Module. Despite following the necessary steps, I am only able to retrieve the last element added to the array. Can anyone provide insights on wh ...

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

As I delve into learning Angular with TypeScript, I've encountered some inconsistencies compared to JavaScript that are puzzling me. Take for example this function that works flawlessly with pure JavaScript, where it dynamically sets the min and max a ...

Transforming the button behavior with jQuery

I have encountered a situation where I am working with code in Twig. {% if followsId == null %} <div id="followUser" class="follow" data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow"> ...

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Struggling with instantiating an object from an external javascript library in Angular/Typescript development. The constructor function in the javascript library is... var amf = { some declarations etc } amf.Client = function(destination, endpoint, time ...

Updating dropdown menu selection after successful form submission validation

I'm currently working on a PHP sign up/registration form that retains and resubmits user input if validation fails. Although I have successfully implemented text boxes, password inputs, and radio buttons, I am encountering some challenges with the dro ...

Is there a way to configure MaterialUI XGrid filters to target and filter by the renderCell parameters instead of the backend data source?

While utilizing MaterialUI XGrid to showcase rows of information, I am facing an issue with filtering. Currently, filtering can only be done based on the backend row values rather than what is displayed in the cell. For instance, consider a column named U ...

Developing a personalized Markdown-it extension for a Nuxt web app causes a Type Error while displaying in a web browser

I have been working on developing a Nuxt.js application utilizing markdown rendering with markdown-it. To achieve this, I created a custom plugin located in the "helpers" directory. nuxt.config.js ... modules: [ ..., '@nuxtjs/markdownit', ] ...

Is there a way to stop the Firebase web client from altering the error message generated by an https.onRequest function?

I am facing an issue where I cannot retrieve the original message I sent from an "https.onRequest" function in Firebase. The firebase client is rewriting the message based on the error code, making it difficult for me to recover the originally sent body or ...

Leverage AJAX for real-time Django Model updates

Seeking insights on how to effortlessly update a Django model through AJAX without reloading the page or requiring user input for saving. Various tutorials address fetching data from Django models using AJAX, yet resources on updating models remain scarce. ...

Assistance with JavaScript regular expressions for dividing a string into days, hours, and minutes (accounting for plural or singular forms)

My challenge is with handling different variations in a string var str = "2 Days, 2 Hours 10 Minutes"; When I use : str.split(/Days/); The result is: ["2 ", ", 2 Hours 10 Minutes"] This method seems useful to extract values like "days", "hours" and " ...

Fixing a CSS animation glitch when using JavaScript

I'm facing an unusual issue with my CSS/HTML Check out my code below: a:hover { color: deeppink; transition: all 0.2s ease-out } .logo { height: 300px; margin-top: -100px; transition: all 0.2s ease-in; transform: scale(1) } .logo:hover { transit ...

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

socket.io initialization and finalization events

Currently, I am integrating socket.io with express 3 for my application development. I am interested in implementing loader animations that will appear when a message is incoming and disappear once the message has been received. Similar to how jQuery&apos ...

Find out the keycode of an event in ReactJS when a key is released

Whenever I try to get keyCode on a keyUp event, it always returns 0. Why is this happening? I want to avoid using keypress and similar methods, and I also need to utilize an arrow function: handleKeyPress = (e, type) => { let KeyCode = e.charCode; ...

Switching the displayed image depending on the JSON data received

As a beginner in javascript and jQuery, I am working on displaying JSON results in the browser. My goal is to generate dynamic HTML by incorporating the JSON data. Below is an example of the JSON structure: [{"JobName":"JobDoSomething","JobStatus":2,"JobS ...

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

Encountering an issue while attempting to implement Redux Toolkit alongside the MUI ToggleButtonGroup component

The error message initially started as: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. When I attempted to update the Redux state using a dispatcher, the handleChange function suddenly showed an e ...

Having trouble with testing axios web service promises to return results using Jest in a Vue.js application

In the process of developing a new application with Vue.js and axios, I am focusing on retrieving stock market details based on company names. To kickstart the application, I am compiling all the names of US-based S&p 500 companies into a JavaScript ar ...

WordPress AJAX call results in a response code of zero

TL;DR: Unique - Go straight to code below for issue. You can view the demo I am working on by following this link. In my `functions.php` file, I first localize my script: function ajaxurl(){ wp_enqueue_script( 'product-selector', get_templ ...