Chronological Overview (Highcharts)

Can you customize a timeline in Highcharts to resemble the image? https://i.sstatic.net/5Lipu.png

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

Located just above the edge of the screen with absolute positioning

One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear aft ...

What is the best method to delete a value from localStorage using redux-persist?

In my index.js file, I have set up a persist configuration as shown below: import {configureStore, combineReducers} from "@reduxjs/toolkit" import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redu ...

Transfer data as JSON from Flask to JavaScript

Having trouble sending data from Flask to JavaScript. I have the information from the database and added it to a dictionary. Now, I want to convert this data into a JSON object in JavaScript to display it on a map. Despite using JSON.parse in JavaScript, i ...

I'm having trouble with my .Refine feature when attempting to create a conditional input field. Can anyone help troubleshoot this issue?

I devised a feature in my form that generates additional input fields if the user selects 'yes'. How can I make these input fields mandatory and display a warning message when 'yes' is selected? const FormSchema = z.object({ type: z.e ...

Tips for disabling the Enter key event specifically (without the combination of Shift+Enter) in a contenteditable field

I'm trying to incorporate the contenteditable attribute in my code, but I've run into an issue. I would like for pressing (shift + enter) to move to the next line (Note: I only want shift + enter to trigger this action), and when I press the ent ...

Tips for customizing image flipper AJAX code

I am working on a script that swaps the current image with a selected one, but I need to add an attribute so it specifically targets image tags with a certain class SCRIPT---- <script> $(function(){ Test = { UpdatePreview: func ...

What is the best way to initiate a change event using JavaScript?

I am attempting to enable my 4th checkbox automatically when there is a new value in the textbox (myinput). If the textbox is empty, I want to disable it. Currently, you have to tab out before the change event is triggered. Also, how can I check for an e ...

Issues with Angular2 causing function to not run as expected

After clicking a button to trigger createPlaylist(), the function fails to execute asd(). I attempted combining everything into one function, but still encountered the same issue. The console.log(resp) statement never logs anything. What could be causing ...

All menus effortlessly sliding out simultaneously

I'm having an issue with my navigation bar. I want each link to slide its corresponding DIV up or down when clicked. However, all the DIVs are sliding and when clicking on the same link everything slides up. How can I fix this problem? This is my HT ...

What is the best way to define a variable in EJS?

I need to populate my database array results on the frontend using EJS. The code snippet I'm using is as follows: var tags = ["<%tags%>"] <% for(var i=0; i<tags.length; i++) { %> <a href='<%= tags[i] %&g ...

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I

When working with the Slide Toggle in Material Design, I noticed that it does not have a stopPropagation event. This is because the "MdSlideToggle.prototype._onChangeEvent" already includes a call to stopPropagation. So, what should be used instead? <m ...

Tips for fixing the issue of "module ./response not found" in Node.js Express

Whenever I execute the command $ npm start this error message appears > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feefcfce6e8e1e2eae1fbbccfbea1bfa1bf">[email protected]</a> start > nodemon server.js ...

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

How can you use jQuery to remove a class from an element after a specified period of time?

After updating a record in the database, I plan to make modifications using an AJAX request. Once that is done, I will dynamically add a class to the rendered div by utilizing the addClass method. The class being added (we'll refer to it as colored) c ...

"Deploying code to Heroku using Node.js: A guide to adding git commits directly on

Currently, as I delve into learning Node and Git, I'm faced with a dilemma involving my Heroku app. The app is designed to interact with a local file on the server that serves as a basic JSON database. The issue arises when I attempt to manage this f ...

JavaScript code that displays values that are not equal

Here is a code snippet that checks whether two arrays of objects are equal or not. How can we enhance this code to log which answer is not matching? The structure of the arrays: arrayA represents user answered questions, while arrayB contains correct answ ...

Obtain the Class Name Value by Utilizing the "Begins With" Selection Method

Consider the following HTML structure: <a href="#" class="a b nl-3522">First</a> <a href="#" class="a b nl-7352">Second</a> <a href="#" class="a b nl-4874">Third</a> <!-- Note that classes nl-* are being added dynami ...

Using jQuery's .each() method to iterate over a JSON object may only display the

Running into some trouble with jQuery.each(). I'm pulling JSON data from another PHP file and trying to display a specific key value from it. This is the JavaScript code I have: <div class="row" id="fetchmember"> <script type="text/javasc ...

What causes the offsetWidth attribute to be zero in an array of elements within the DOM?

I am encountering an issue with a script that sets widths for certain elements in the Dom. Specifically, when I use the code var elements = document.querySelectorAll("p.caption"), the first 12 elements display the correct offsetWidth, but the remaining hal ...

Looking for guidance on integrating cookies with express session? Keep in mind that connect.sid is expected to be phased out

Within my app.js file, I have the following code snippet: app.use(session({secret: 'mySecret', resave: false, saveUninitialized: false})); While this setup functions correctly, it triggers a warning message: The cookie “connect.sid” will ...