New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WordCloud Not displaying all the words and lot of space left unused. #7241

Closed
Abhijith-Nagaraja opened this Issue Oct 8, 2017 · 15 comments

Comments

Projects
None yet
7 participants
@Abhijith-Nagaraja

Abhijith-Nagaraja commented Oct 8, 2017

Expected behaviour

  1. It should show all the words.
  2. It should use the entire chart area to plot the words

Actual behaviour

I tried to plot exactly 500 words. But all the words did not come up. And also when chart area is increased, the words were center aligned (which is good) but a lot of space on either side (left and right) were unused and were empty. I tried setting marginRight and marginLeft to zero. But it did not help

Live demo with steps to reproduce

Stackoverflow link: https://stackoverflow.com/questions/46612634/disable-spiral-in-word-cloud-and-display-all-the-words-in-highcharts/

JS fiddle link: http://jsfiddle.net/ynr4oszw/3/

Try resizing the pane of the chart to increase the chart area and one can see the behaviour I am talking about.

Affected browser(s)

All

@jon-a-nygaard jon-a-nygaard self-assigned this Oct 9, 2017

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Oct 9, 2017

Collaborator

Hi @Abhijith-Nagaraja
Thanks for reporting. We will try to fix this as soon as possible.

Collaborator

jon-a-nygaard commented Oct 9, 2017

Hi @Abhijith-Nagaraja
Thanks for reporting. We will try to fix this as soon as possible.

@Abhijith-Nagaraja

This comment has been minimized.

Show comment
Hide comment
@Abhijith-Nagaraja

Abhijith-Nagaraja Oct 9, 2017

@jon-a-nygaard : Thanks for considering this. We shifted from D3 word cloud to Highcharts as we had licence... and this is a major issue for us. If you can suggest any workaround for now, this would be helpful

Abhijith-Nagaraja commented Oct 9, 2017

@jon-a-nygaard : Thanks for considering this. We shifted from D3 word cloud to Highcharts as we had licence... and this is a major issue for us. If you can suggest any workaround for now, this would be helpful

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Oct 10, 2017

Collaborator

Hi @Abhijith-Nagaraja
I am in the process of making a workaround for this, and was hoping to deliver it today. Unfortunately I was unable to make it, but I think it is safe to say that I will have a good workaround for you tomorrow.

Collaborator

jon-a-nygaard commented Oct 10, 2017

Hi @Abhijith-Nagaraja
I am in the process of making a workaround for this, and was hoping to deliver it today. Unfortunately I was unable to make it, but I think it is safe to say that I will have a good workaround for you tomorrow.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Oct 11, 2017

Collaborator

Hi @Abhijith-Nagaraja

Here's an example which makes better use of available space. It places all the words in the center, and then moves a word in a rectangular spiral when doing collision testing. The spiral takes aspect ratio into account.

As you see from the demo, it is a bit slow, which is something I want to improve.
This is due to the amount of iterations in the collision testing increases a lot with this amount of points.
Hoping that some adjustments will improve the speed a lot.

Sometimes there can be an unnecessary amount of white space on one of the sides. This is due to the scaling is not a 100% optimal, which is something I want to work on soon as well. Luckily in cases as yours, where there is a lot of data, then it is hardly recognisable.

Hope it helps.

EDIT: should you want to try optimizing the demo yourself, then the rectangularSpiral is the function to have a look at.

Collaborator

jon-a-nygaard commented Oct 11, 2017

Hi @Abhijith-Nagaraja

Here's an example which makes better use of available space. It places all the words in the center, and then moves a word in a rectangular spiral when doing collision testing. The spiral takes aspect ratio into account.

As you see from the demo, it is a bit slow, which is something I want to improve.
This is due to the amount of iterations in the collision testing increases a lot with this amount of points.
Hoping that some adjustments will improve the speed a lot.

Sometimes there can be an unnecessary amount of white space on one of the sides. This is due to the scaling is not a 100% optimal, which is something I want to work on soon as well. Luckily in cases as yours, where there is a lot of data, then it is hardly recognisable.

Hope it helps.

EDIT: should you want to try optimizing the demo yourself, then the rectangularSpiral is the function to have a look at.

@Abhijith-Nagaraja

This comment has been minimized.

Show comment
Hide comment
@Abhijith-Nagaraja

Abhijith-Nagaraja Oct 11, 2017

@jon-a-nygaard : Looks good. Is this been published? I use npm and I don't see an update there... Or should I use it a custom plugin?

Abhijith-Nagaraja commented Oct 11, 2017

@jon-a-nygaard : Looks good. Is this been published? I use npm and I don't see an update there... Or should I use it a custom plugin?

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Oct 12, 2017

Collaborator

It is not published. Planning on including it in our next maintenance release v6.0.2.
So until then you will have to include the module code from the demo, as a custom script in your project. Alternatively, I can provide you with overrides to use on top of the wordcloud module from npm, but I think that will be a worse workaround due to all the changes made in wordcloud.
Let me know if you still would prefer the overrides.

Collaborator

jon-a-nygaard commented Oct 12, 2017

It is not published. Planning on including it in our next maintenance release v6.0.2.
So until then you will have to include the module code from the demo, as a custom script in your project. Alternatively, I can provide you with overrides to use on top of the wordcloud module from npm, but I think that will be a worse workaround due to all the changes made in wordcloud.
Let me know if you still would prefer the overrides.

@Abhijith-Nagaraja

This comment has been minimized.

Show comment
Hide comment
@Abhijith-Nagaraja

Abhijith-Nagaraja Oct 12, 2017

@jon-a-nygaard : Thanks for the confirmation. I will wait for the release.

Abhijith-Nagaraja commented Oct 12, 2017

@jon-a-nygaard : Thanks for the confirmation. I will wait for the release.

@Dams591

This comment has been minimized.

Show comment
Hide comment
@Dams591

Dams591 May 18, 2018

Hey Guys,

I'm also facing a similar issue
http://jsfiddle.net/u5a9b854/75/

There's at least two words that doesn't display (China and India) they are the biggesst weight in my entire series don't know if this is related.

Dams591 commented May 18, 2018

Hey Guys,

I'm also facing a similar issue
http://jsfiddle.net/u5a9b854/75/

There's at least two words that doesn't display (China and India) they are the biggesst weight in my entire series don't know if this is related.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan May 21, 2018

Contributor

@jon-a-nygaard any comments?

Contributor

sebastianbochan commented May 21, 2018

@jon-a-nygaard any comments?

@JockiHendry

This comment has been minimized.

Show comment
Hide comment
@JockiHendry

JockiHendry May 22, 2018

I also encountered the same problem. Looks like in @Dams591 code, the missing words failed the following test condition:

outsidePlayingField(element, field)

If I change the playing field into something big like replacing 1.1 with 2.1:

x = 1.1 * Math.max(info.maxHeight, info.maxWidth, Math.sqrt(info.area));

the missing words will appear as in https://jsfiddle.net/t253fxw3/1/.

JockiHendry commented May 22, 2018

I also encountered the same problem. Looks like in @Dams591 code, the missing words failed the following test condition:

outsidePlayingField(element, field)

If I change the playing field into something big like replacing 1.1 with 2.1:

x = 1.1 * Math.max(info.maxHeight, info.maxWidth, Math.sqrt(info.area));

the missing words will appear as in https://jsfiddle.net/t253fxw3/1/.

@Dams591

This comment has been minimized.

Show comment
Hide comment
@Dams591

Dams591 commented May 23, 2018

@JockiHendry nice find !!!

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej May 23, 2018

Contributor

Related to #7491

Contributor

KacperMadej commented May 23, 2018

Related to #7491

@Dams591

This comment has been minimized.

Show comment
Hide comment
@Dams591

Dams591 May 23, 2018

@KacperMadej trying the github build (https://github.highcharts.com/modules/wordcloud.js) doesn't solve the issue so not sure it is related (maybe close enough though)

Dams591 commented May 23, 2018

@KacperMadej trying the github build (https://github.highcharts.com/modules/wordcloud.js) doesn't solve the issue so not sure it is related (maybe close enough though)

@timlaughlin

This comment has been minimized.

Show comment
Hide comment
@timlaughlin

timlaughlin Jun 3, 2018

So @Dams591 what does the find @JockiHendry made control? I've increased the multiplier to 10.1 and don't see any visible changes other than all words are shown.

timlaughlin commented Jun 3, 2018

So @Dams591 what does the find @JockiHendry made control? I've increased the multiplier to 10.1 and don't see any visible changes other than all words are shown.

@Dams591

This comment has been minimized.

Show comment
Hide comment
@Dams591

Dams591 Jun 4, 2018

Hi @timlaughlin
I've used this release and things works pretty well for me.
#8012 (comment)

Dams591 commented Jun 4, 2018

Hi @timlaughlin
I've used this release and things works pretty well for me.
#8012 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment