0

[enter image description here][1]I want to achieve the design given in the image below.Here I have to show task and it's related activities in different datetime. Main task is been shown as x-range chart type and when we click on the particular x-range bar or expand collapse button besides categories it should dynamically generate activites timeline chart with symbols showing on what date activities are there for main task. and it should show different symbol for different type of activites, like on which date activity is triggered, planned Or due date.

And one more thing I have to show different color on x-range bar wherever one or more activites inside main task is on same date. And symbols in the timeline chart can be overlapped as triggered and planned date can be same for some activites.

I just created the sample code for it,if you want to check. I haven't achieved it yet and I need help in achieving this. Kindly help.

Below is the link for stackblitz

https://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html

Chart Design to be achieved(https://i.stack.imgur.com/PmPn4.jpg)

Refer to this image : https://i.stack.imgur.com/Cju0A.jpg

user555
  • 3
  • 5

1 Answers1

0

I did an example with 2 custom functions. The first one adds the wanted series as a collapsed to the main one and the second one destroys it.

Function to show new series: 

function showTasks(newSeries, point) {
  var series = point.series,
    chart = series.chart,
    newYCat = [...chart.yAxis[0].categories];

  // Set points to higher y to make a space for collapsed points
  chart.series.forEach(s => {
    s.points.forEach(p => {
      if (p.y > point.y) {
        p.update({
          y: p.y + 1
        }, false, false)
      }
    })
  })
  // Add collapsed series
  chart.addSeries(newSeries);
  // Set point flag
  point.clicked = true;
  // Add the series name to the yAxis cat array
  newYCat.splice(newSeries.yPos, 0, newSeries.name);
  // Update the yAxis 
  chart.yAxis[0].update({
    categories: newYCat,
  })
}

I think that everything is clarified here - I left instructions in comment what is happening.

API to used options:

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Axis#update

The hiding function does the opposite.

Functions are triggered in the point.events.click callback, where the collapsed series to this point should be defined.

Demo: https://jsfiddle.net/BlackLabel/cftod6q4/

API: https://api.highcharts.com/highcharts/series.line.events.click

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • 1. how to add custom buttons here, for every categories so that it will expand collapse on click of button also. – user555 Apr 16 '20 at 12:20
  • 2. If more than one tasks are there for each category, then some points(diamond of one task with square of other task having same data) then how to show different color on x-range chart on that point – user555 Apr 16 '20 at 12:22
  • 3.How to show hide particular point(diamond,square...) on click of labels for particular point, as show in the picture – user555 Apr 16 '20 at 12:25
  • 2. I don't understand. Could you show it in some demo? – Sebastian Wędzel Apr 16 '20 at 15:45
  • 3. I change the logic and now series is adding rather than points: https://jsfiddle.net/BlackLabel/er32xLzn/ – Sebastian Wędzel Apr 16 '20 at 15:45
  • 1. For 1st Point, I want to add button for each category and on click of that I can expand and collapse. you can check the png image I attached. I have to add arrow icon also for expand collapse button – user555 Apr 17 '20 at 05:02
  • 3. 3rd point, one issue is also there that on expanding more than one chart, and then collapsing one , will collapse both the series and only y-axis label is shown – user555 Apr 17 '20 at 05:53
  • 4. For 2nd point which you didn't understood I added one image, 'Refer to this image' below my question. In that image it is shown that if many tasks are there and if they have some common point in x-axis then, show little darker shade color on x-range chart,to understand that there some task points are same. – user555 Apr 17 '20 at 06:17
  • 2. For 3rd point, is it possible that labels will always be there, but only series add dynamically. and then on click of particular label the point get disabled and enabled. And I have to plot lines also between points as you can refer to the image – user555 Apr 17 '20 at 06:28
  • 1. I showed in the demo how to trigger a click event on point manually. Now you need to add a button which will do it. Here is an API how to add custom button in Highcharts: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button – Sebastian Wędzel Apr 17 '20 at 07:18
  • 2. Legend labels show when series has been added. If you want to have it as you describe you will need to render custom point which on click series will be added. – Sebastian Wędzel Apr 17 '20 at 07:19
  • 3. You are right, fixed here: https://jsfiddle.net/BlackLabel/5x4wnr9v/ – Sebastian Wędzel Apr 17 '20 at 07:20
  • 4. I think that you can achieve it by adding an additional point which will cover this part, like here with the blue color: https://jsfiddle.net/BlackLabel/0ugetqcL/ – Sebastian Wędzel Apr 17 '20 at 07:23
  • 1. for adding buttons before each category, how to get the category x and y position and add before each category. and also how to add icons here inside button – user555 Apr 18 '20 at 11:29
  • 2. The expand collapse issue is still there, when you expand both the series and then collapse the first series firstly and then collapse the second series , then points are still shown there for 2nd series only y-label is hiding – user555 Apr 18 '20 at 11:32
  • 1. You should ask it as a separate question to avoid a mess. 2. Please test it, I hope I fixed it: https://jsfiddle.net/BlackLabel/ecgthpm5/ 3. As I said the legend is added while series has been added. To your requirements, you will need to create a custom legend points. On the SO you can find a lot of examples how to create a custom Highcharts legend. – Sebastian Wędzel Apr 20 '20 at 13:30