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

[Abhijith-Nagaraja]

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]

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

[jon-a-nygaard]

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

[Abhijith-Nagaraja]

@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]

@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]

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]

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]

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.

[jon-a-nygaard]

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]

@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]

@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]

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.

[jon-a-nygaard]

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]

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

[Abhijith-Nagaraja]

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

[Dams591]

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]

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]

@jon-a-nygaard any comments?

[sebastianbochan]

@jon-a-nygaard any comments?

[JockiHendry]

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

highcharts/js/modules/wordcloud.src.js

Line 333 in 88e8c48

outsidePlayingField(element, field)

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

highcharts/js/modules/wordcloud.src.js

Line 234 in 88e8c48

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]

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

highcharts/js/modules/wordcloud.src.js

Line 333 in 88e8c48

outsidePlayingField(element, field)

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

highcharts/js/modules/wordcloud.src.js

Line 234 in 88e8c48

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]

@JockiHendry nice find !!!

[Dams591]

@JockiHendry nice find !!!

[KacperMadej]

Related to #7491

[KacperMadej]

Related to #7491

[Dams591]

@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]

@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]

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]

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]

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

[Dams591]

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