soka
Posts: 10
Joined: Wed Oct 25, 2023 7:48 am

Gantt - show last 6 month as table

Hi Forum,
I'm working on a dashboard to show company employee illness – an illness tracker.
I want to use the Highchart Gannt package to show as in the below sample, but I don’t know how to format the HC code to format the 3 upper layers in the chart – can anyone help me – is it possible?
Regards,
Søren
Attachments
Gantt sample.png
Gantt sample.png (17.81 KiB) Viewed 3626 times
User avatar
dawid.d
Site Moderator
Posts: 1222
Joined: Thu Oct 06, 2022 11:31 am

Re: Gantt - show last 6 month as table

Hi Søren,

Thanks for the question!

For your dashboard idea, using Highcharts Gantt to replicate your table is possible but not entirely straightforward due to the way Gantt works. A custom solution would involve treating "Own", "Born", "§56", and "Other" as separate time ranges for every month, with transparent data points, and using dataLabels to display the numbers. However, this might not be the most efficient approach for your specific use case.

Instead, I strongly recommend considering the Highcharts DataGrid. It's part of our Dashboards package, but it will gradually become independent and is tailored for presenting tabular data like the one in your example. Here's a demo I prepared using your data: https://jsfiddle.net/1djfqt4x/1/

While Gantt can be tweaked to display this type of data, the DataGrid will likely provide a cleaner and more maintainable solution.

Feel free to ask if you'd like more details about customizing either approach!

Best regards,
Dawid Draguła
Highcharts Developer
soka
Posts: 10
Joined: Wed Oct 25, 2023 7:48 am

Re: Gantt vs. DataGrid

Hi dawid,

Thanks for your response.

I tried using the DataGrid component, but I had some issues.

First, I’m using the HC components embedded in ServiceNow. I did some other visualizations in ServiceNow – an Annual Wheel using the sunburst.js class and an Employee tracker and PLANNER using the highcharts-gantt.js class – that was working perfectly…

I had some issues importing the datagrid.js to ServiceNow - probably nothing related to the HC class but a ServiceNow issue.

I’m working on a number of new visualizations and tools for ServiceNow, but I want them all to have some kind of uniformity - a common thread through all the products. And for that reason, I want to use the Gantt class to more visualizations, the next one is an Employee disease tracker, so hopefully its possible.

Best regards,
Søren
User avatar
dawid.d
Site Moderator
Posts: 1222
Joined: Thu Oct 06, 2022 11:31 am

Re: Gantt - show last 6 month as table

Hi!

We had to remove the part referring to the promotion of services, as this forum focuses on technical questions related to Highcharts. Customizing Gantt to display tabular data, however, goes a bit beyond the scope of this forum, as it pertains to a custom project. If you have an Advantage license, you can use premium support or request a custom project. See: https://www.highcharts.com/highcharts-advantage/

I can, however, suggest that in addition to using data labels on hidden points, the built-in SVGRenderer in Highcharts might also be useful for you. With it, you can custom-draw on the chart. Check it out: https://api.highcharts.com/class-refere ... VGRenderer

Warm regards,
Dawid Draguła
Highcharts Developer

Return to “Highcharts Gantt”