bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Is it possible to hide rows with empty values when filtering?

Fri May 27, 2022 5:51 pm

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.

Image
Attachments
Screenshot.png
Screenshot.png (39.49 KiB) Viewed 765 times

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

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!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Wed Jun 01, 2022 12:11 am

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!
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.

It basically looks like this...

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);
  }
Would you believe it's still possible to achieve the empty date filtration?

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

Wed Jun 01, 2022 6:47 am

bricolagezero2,
If I understand you correctly all you have to add is a condition about pushing a new object to the array if the variables used to create the date are valid.

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);
  }
Let me know if that helps you.
Regards!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Mon Jun 06, 2022 11:28 am

Thanks again! I pasted the code, but it doesn't seem to have any affect. I suspect it is because I am using a date filter or the nature of how the data is converted from MySQL to JSON. Thanks again though, I really appreciate your time!

https://dashboard-dev.syneoshealthls.com/timeline/

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

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!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Mon Jun 13, 2022 5:37 pm

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!
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!

I have the code uploaded here: https://cache.learnbrite.com/_lb-usr660 ... _/code.txt

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

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!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Tue Jun 14, 2022 4:27 pm

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!
Hi Hubert!

I've uploaded the image which contain errors here: https://ibb.co/S7Yk3Kj

And this is the live site: https://dashboard-dev.syneoshealthls.com/timeline/

I know you can't do much maybe maybe something will jump out at you.

Are you available to look into this if I give you the Wordpress login (where the chart is rendered) as paid work?

Thanks so much!

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

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:

Code: Select all

if (point.graphic) {
    point.graphic.hide();
}
Maybe it will help!
Kind regards!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Mon Jun 27, 2022 3:59 pm

hubert.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:

Code: Select all

if (point.graphic) {
    point.graphic.hide();
}
Maybe it will help!
Kind regards!
Hi! If you're still around :)

I was trying to copy over as much as I could into the JS fiddle to see if I can test exactly what the issue is, and I narrowed it down to how the data is being pushed to the Gantt chart and it was my assumption from the beginning.

This fiddle here is 98% of my code and yours, and it works!
https://jsfiddle.net/fyogrj1h/

However, obviously the fiddle which works has the data baked-in, and in my Gantt the data is generated from MySQL.

So in my code the whole Highcharts part is wrapped up in a function:

Code: Select all

 function renderChart(data = []) {
And then there's this part (below) which I guess generates the JSON from MySQL for Highcharts to read. It's at the bottom of the full code.

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 don't know if this is easy to diagnose, but maybe there needs to be a different order in the way this appears?

Again, I didn't write the code, obviously :) And the original developer is now gone. So I am kind of stuck on my own.

Full fiddle (my code): https://jsfiddle.net/pLmnyhj1/

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

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!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Mon Jul 18, 2022 2:46 am

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!
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
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Is it possible to hide rows with empty values when filtering?

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!
Hubert Kozik
Highcharts Developer

bricolagezero2
Posts: 13
Joined: Fri May 27, 2022 5:48 pm

Re: Is it possible to hide rows with empty values when filtering?

Mon Jul 18, 2022 1:03 pm

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!
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.

Return to “Highcharts Gantt”