Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

How to show data from the actual date

Hello friends,
i have a problem in my Gantt Chart. I would like to show the data from the actual date.
I tried min and max on the xAxis but this didn't work. I also tried a pointStart for the series( i only got 1 series) but this didn't work as well.

Here is my code:

Highcharts.setOptions({
lang:{
months:[
'January', 'February', 'March', 'April',
'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'
],
weekdays:[
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]

}
});


{% if projekte %}
var chart = Highcharts.ganttChart('highcharts_container', {
time: {
useUTC: true
},
navigator: {
enabled: true,
},
rangeSelector: {
enabled: true,
selected: 5,

},
plotOptions: {
series:{
//showInNavigator: false,
cursor: 'pointer',
compare: 'percent',
pointStart: new Date().toUTCString(),
pointInterval: 24 * 3600 * 1000
/*
point:{
events:{
click: function(event){
//console.log(event);
//console.log(event.point.id)
var v = event.point.id
console.log(v)
var url_delete = "{% url 'service_roadmap_delete' 1 %}";
url_delete = url_delete.replace('1',v);
window.location.href = url_delete
},
}
}*/
},
animation: true,
dataLabels:{
enabled: true
}
},
column:{
grouping: false
},
title: {
text: 'Service Roadmap Projectstages Overview',
},
xAxis: {
uniqueNames: false,
labels: {
format: '{value}',
formatter: function() {
var format = this.dateTimeLabelFormat === 'Week %W' ? 'W%W' : this.dateTimeLabelFormat;
return Highcharts.dateFormat(format, this.value);
}
},
},
yAxis: {
uniqueNames: false
},
series: [{
tooltip: {
xDateFormat: '%a %d %b %y | Week %q'
},
data: [
{% for projekt in projekte %}
{
id: '{{ projekt.id }}',
name: "{{ projekt.projekt_nummer | safe }}|{{ projekt.maschinen_typ }} {{ projekt.kunde | safe }}",
pointWidth: 15,
collapsed: true

},
{% for project in project_stage %}
{% if project.stage_project.projekt_nummer == projekt.projekt_nummer %}
{
parent: '{{ projekt.id }}',
id: '{{ forloop.counter }} ',
name: '{{ project.auftrag_art }}',
start: {{ project.start_date|jsdate }},
end: {{ project.end_date|jsdate }}
},
{% endif %}
{% endfor %}
{% endfor %}
],
},
],
});
{% else %}
$(document).ready(function() {
$('#container').html("<h1>No Projects found!</h1>");
})
{% endif %}
/*$(document).ready(function() {
chart.xAxis[0].setExtremes(new Date().toUTCString());
})*/

The
/*$(document).ready(function() {
chart.xAxis[0].setExtremes(new Date().toUTCString());
function works for the date, but then highcharts isn't showing the data.

I would appreciate your comments !!

Best regards
Dominik
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to show data from the actual date

Hello Dominik,

Welcome to our forum and thank you for contacting us!

Could you please reproduce your demo in an online editor, so that I can take a look at it and find a solution for you?

You can start here: https://jsfiddle.net/BlackLabel/fncuzod3/

Waiting for your reply,
Regards
Kamil Musiałowski
Highcharts Developer
Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

Re: How to show data from the actual date

Hello Kamil,
first thank you for that fast response !
I would like to say that highcharts is a great framework ! It is really nice to work with and I think it also looks amazing ! I am just starting with JS and highcharts, i did python until now.

https://jsfiddle.net/Dominik_Welte/cdkf3hL4/42/

This is basically my code. I am using some template language from the python django framework that i can't show in jsfiddle. But this is only a for loop to generate the data. I have 50 parent datas with at least 1 child but this wasn't a problem so far.

So what i would like to see is the start date and the end date of a parent and of the child/children. This is the case so far.
The missing part is, that the whole chart should start wit the actual date (e.g. 29.09.2022). And when i mouseover a beam the start and end date has to be
the dates from the database, so I can not modify the start date to the actual date.

Many thanks for your help !

Best regards
Dominik
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to show data from the actual date

Hi there!

Thank you for providing the demo, it's great!

Just a small note, in Highcharts, dates are required in milliseconds format, so to get the current date I'd recommend using the new Date().getTime() method, instead of the new Date().toUTCString().

After my small investigation, it turns out that the rangeSelector option has precedence over the xAxis.max. There are two ways to fix that.
You can disable the rangeSelector (obviously :D), and set the xAxis.max to the aforementioned current date timestamp.
DEMO: https://jsfiddle.net/BlackLabel/sazvjbw3/

Or if you need the rangeSelector, you can do a little trick, which will set the extremes on the initial chart load.
DEMO: https://jsfiddle.net/BlackLabel/tsvkp3eo/

Let me know your thoughts about it,
Best regards!
Kamil Musiałowski
Highcharts Developer
Dominik Welte
Posts: 11
Joined: Wed Sep 28, 2022 8:51 am

Re: How to show data from the actual date

Dear Kamil,
thank you for your comments !
The second option works perfectly fine for me :)

I appreciate your help from now on i can go on with my work !!

Thanks again

Best regards
Dominik
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to show data from the actual date

That great to hear that!

In case of any other questions or issues, you know where to find us.

Have a great day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Gantt”