Is there a way to do this? The Gantt chart is reading off a MySQL Database.
Basically, if you select 2022, for example, all rows without data should be hidden.
Thanks so much! I know you love people like me, but I've worked with a developer to create the Gantt chart so am not too sure if I can implement this. My gantt is getting data from MySQL via JSON conversion.hubert.k wrote: ↑Mon May 30, 2022 7:37 am Hello bricolagezero2!
Welcome to our forum and thanks for contacting us with your question!
There are a few ways to remove empty values from the data of the chart. For example you can use a JavaScript method filter and check if each element has its own start and end properties before initialization of chart or after any event e.g. chart load.
Demos: https://jsfiddle.net/BlackLabel/rzw31bgq/
https://jsfiddle.net/BlackLabel/vju1wd5b/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... es#setData
Let me know if that was what you were looking for!
Regards!
Code: Select all
series: [{
name: 'Training Name',
data: myArr
}]
});
}
function ajaxSuccess({ alldata, arrayDataParent }) {
chartData = [
...arrayDataParent.map(({ name, id })=>({ id, name, pointWidth: 3, collapsed: true }))
];
for (var i = 0; i < alldata.length; i++) {
const { start, end, name, parent, parentName, materials, url, policy, y } = alldata[i];
const [sY, sM, sD] = start.split('-');
const [eY, eM, eD] = end.split('-');
chartData.push({
start: Date.UTC(sY, sM - 1, sD, 0),
end: Date.UTC(eY, eM - 1, eD, 0),
name,
parent, parentName,
materials,
url,
policy,
y,
});
}
renderChart(chartData);
}
Code: Select all
function ajaxSuccess({ alldata, arrayDataParent }) {
chartData = [
...arrayDataParent.map(({ name, id })=>({ id, name, pointWidth: 3, collapsed: true }))
];
for (var i = 0; i < alldata.length; i++) {
const { start, end, name, parent, parentName, materials, url, policy, y } = alldata[i];
const [sY, sM, sD] = start.split('-');
const [eY, eM, eD] = end.split('-');
if(sY && sM && sD && eY && eM && eD){
chartData.push({
start: Date.UTC(sY, sM - 1, sD, 0),
end: Date.UTC(eY, eM - 1, eD, 0),
name,
parent, parentName,
materials,
url,
policy,
y,
});
}
}
renderChart(chartData);
}
Thanks so much! I don't expect you to keep helping me, but I am giving it a chance I am getting some errors in the console (shown in the screenshot attached). Do you think it is because of the order of which this code is placed? It works so nicely in your JS Fiddle so I think I am really close. Thanks again!hubert.k wrote: ↑Tue Jun 07, 2022 7:26 am bricolagezero2,
Thank you for attaching your demo, now I understand correctly what you want to achieve. The code, which you pasted didn't have any effect, because your data is correct. That if has blocked a data with improper date and all of your rows on the chart have a proper date. Unfortunately, the feature that you requested doesn't exist in Highcharts Gantt, but there is a way to do it with custom code. In the demo below I have made a custom callback function, which is fired on the event afterSetExteremes. I am pretty sure, that it can be improved, so feel free to try to add some improvement.
Demo: https://jsfiddle.net/BlackLabel/yvq9b28k/
API Reference: https://api.highcharts.com/gantt/xAxis. ... etExtremes
Regards!
Hi Hubert!hubert.k wrote: ↑Tue Jun 14, 2022 8:09 am bricolagezero2,
It's hard to reproduce your issue because you are using PHP and your data are imported from somewhere. Also, you didn't attach any screenshots of your errors. Can you attach a proper image with your errors in the console?
I am looking for your response.
Regards!
Code: Select all
if (point.graphic) {
point.graphic.hide();
}
Hi! If you're still aroundhubert.k wrote: ↑Wed Jun 15, 2022 8:45 am bricolagezero2,
I am privately bound by a non-competition agreement, so I can't help you with this problem as paid work. Paid work is beyond the scope of support on our forum. If you need help with your implementation, you can contact the Black Label company that specializes in Highcharts custom projects. See the official Black Label site: https://blacklabel.pl
You can also try to add this statement to the line where the error occurs:Maybe it will help!Code: Select all
if (point.graphic) { point.graphic.hide(); }
Kind regards!
Code: Select all
function renderChart(data = []) {
Code: Select all
function ajaxSuccess({ alldata, arrayDataParent }) {
chartData = [
...arrayDataParent.map(({ name, id })=>({ id, name, pointWidth: 3, collapsed: true }))
];
for (var i = 0; i < alldata.length; i++) {
const { start, end, name, parent, parentName, materials, url, policy, y } = alldata[i];
const [sY, sM, sD] = start.split('-');
const [eY, eM, eD] = end.split('-');
chartData.push({
start: Date.UTC(sY, sM - 1, sD, 0),
end: Date.UTC(eY, eM - 1, eD, 0),
name,
parent, parentName,
materials,
url,
policy,
y,
});
}
renderChart(chartData);
}
(function ($) {
$(document).ready(function () {
$.ajax({
url: window.ajaxurl,
data: { action: 'folder_contents' },
type: 'POST',
dataType: 'json',
success: ajaxSuccess
});
});
})(jQuery)
I ended up just using static data, but now having a different issue with the height of each row and bars in the wrong place. It's been driving me nuts that I can't get this right. If you have a moment, here is my JS fiddle: https://jsfiddle.net/b9s7mfa0/1/hubert.k wrote: ↑Tue Jun 28, 2022 7:09 am bricolagezero2,
Your attempt is totally fine and you can render your chart in ajaxSuccess function - you can see it in the first demo. But as a second way you can create a chart on start with some data (or empty data) and in ajaxSuccess function using a setData method to pass a new data to the chart - this can be seen in the second demo.
Demos: https://jsfiddle.net/BlackLabel/jzworp1k/
https://jsfiddle.net/BlackLabel/gmh7brsj/
API Reference: https://api.highcharts.com/class-refere ... es#setData
Kind regards!
Thanks! At least you tried I am going to see if there's a way to filter data before the chart is rendered, then I can just duplicate the code for each year with a different filter.hubert.k wrote: ↑Mon Jul 18, 2022 12:39 pm bricolagezero2,
Sadly, I found, that my custom code works only for simple data, not with advanced and collapsed like yours. Actually, this code was trying to change the standard behaviour of the Gantt chart. To make this work it needs a lot of changes in Highcharts Core. If you want you can create a feature request to implement this feature in Highcharts here: https://github.com/highcharts/highcharts/issues
Best regards!