mistic100 / jqcloud Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lucaong/jqcloud

268.0 268.0 106.0 326 KB

jQuery plugin for drawing neat word clouds that actually look like clouds

Home Page: mistic100.github.io/jQCloud

License: MIT License

JavaScript 95.28% CSS 2.74% HTML 1.98%

jqcloud's People

Contributors

Stargazers

Watchers

Forkers

wingify hexl84 weiyanxiang qwop69 thinkjones vague23 jdgomezb smbeiragh evil0x leider qiqi57 zhangbg phaneendrahari bloodcurdle mrbelk boboman-1 rostag raoulducorbot drferreira hariraj3 dannyel-34 samycookie supernihal felixdasgupta snamoah hemangsk quocanhbk09 wishoping govsciences girishla justinwen jobinpalenterprises krusematt rqman molo2004 tarcia rahulpapnoi jiquan51 azizultex ankurces leandroescobar myfreedom614 ktc1016 alamart abiwax durtto zouhairguijjane ruoyush aloogy anderson631 ivomehide davidwiesztal lashminov javiros ntpdate bkkrishna tiger-bea manro suratpyari krreet toldroyd jakobzhao xiaodin1 cheesecat jhingolelo wyatt88 stevefordev aassifh jonathanfunk ift1020 jlebrie mihui akhtar-h lindig11 xenoy raisaurabh7 tesparrow jonaskeutel jesusgarza huangtao00 liking zegnat wayne-butterworth divyaguna harrypearson lanxichan wyd1990 yahya1996 pabloio pikachule valrcs wangzl974 sid545454 ssj3hafeez alonso1526 alec-at-work katochimoto heeboventure jacksonhull mrtian

jqcloud's Issues

All the given words are not shown on cloud..

I have used this plugins in several website but all the given words are not shown, only some of them are shown... anybody have any idea whats wrong with my code... for reference you can visit my plugin included website http://www.prastakhabar.com

Set background color to each word with padding

How can each word be given a background color with some spacing between each word?

The link of words input doesn't support Chinese characters.

Say a link like "挑战程序设计竞赛.html":

words = [{ text: "挑战程序设计竞赛", link: "挑战程序设计竞赛.html", ... }, ...]
$('#test').jQCloud(words, ...)

Then the link is incorrectly rendered as %E6%8C%91%E6%88%98%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E7%AB%9E%E8%B5%9B.html in the generated cloud, pointing to an invalid place rather the the original place.

Completely blank tag cloud

I tried integrating this cloud into my solution and no matter what i do I cannot seem to get it to work... at first I thought maybe there is some script or something conflicting an causing problems with jQCloud, so what i did was create an extremely basic static html page just for testing this and I even linked to the versions of the .js and .css files on your site, but still all I get is a blank screen. Here's my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" /><meta name="description" />
<title>Home Page - My Site</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="demo"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.js" type="text/javascript"></script>

`<script type="text/javascript">`
    `var basic_words = [`
        `{text: "Lorem", weight: 13},`
        `{text: "Ipsum", weight: 10.5},`
        `{text: "Dolor", weight: 9.4},`
        `{text: "Sit", weight: 8},`
        `{text: "Amet", weight: 6.2},`
        `{text: "Consectetur", weight: 5},`
        `{text: "Adipiscing", weight: 5},`
        `{text: "Elit", weight: 5},`
        `{text: "Nam et", weight: 5},`
        `{text: "Leo", weight: 4},`
        `{text: "Sapien", weight: 4},`
        `{text: "Pellentesque", weight: 3},`
        `{text: "habitant", weight: 3},`
        `{text: "morbi", weight: 3},`
        `{text: "tristisque", weight: 3},`
        `{text: "senectus", weight: 3},`
        `{text: "et netus", weight: 3},`
        `{text: "et malesuada", weight: 3},`
        `{text: "fames", weight: 2},`
        `{text: "ac turpis", weight: 2},`
        `{text: "egestas", weight: 2},`
        `{text: "Aenean", weight: 2},`
        `{text: "vestibulum", weight: 2},`
        `{text: "elit", weight: 2},`
        `{text: "sit amet", weight: 2},`
        `{text: "metus", weight: 2},`
        `{text: "adipiscing", weight: 2},`
        `{text: "ut ultrices", weight: 2},`
        `{text: "justo", weight: 1},`
        `{text: "dictum", weight: 1},`
        `{text: "Ut et leo", weight: 1},`
        `{text: "metus", weight: 1},`
        `{text: "at molestie", weight: 1},`
        `{text: "purus", weight: 1},`
        `{text: "Curabitur", weight: 1},`
        `{text: "diam", weight: 1},`
        `{text: "dui", weight: 1},`
        `{text: "ullamcorper", weight: 1},`
        `{text: "id vuluptate ut", weight: 1},`
        `{text: "mattis", weight: 1},`
        `{text: "et nulla", weight: 1},`
        `{text: "Sed", weight: 1}`
    `];`
    `$('#demo').jQCloud(basic_words);`
`</script>`

</body>
</html>

I suppose I must be doing something wrong somewhere, but for the life of me I can't see it. Any help would be much appreciated. Note; when inspecting in FireBug, I can see that the jqcloud class is added to the div.. so something is happening, but for some reason nothing is visible.

Mobile Devices help

When viewed on the iPhone there is a large amount of space above and below the cloud. Does anyone know how to fix this issue. Been struggling with it for a while now. Can be view here http://www.shaunvine.com/ thanks.

New Release

Please could you create your new release with the scss the 2.0.3 so we could download it from bower.

Thank you in advance,

Morgan

Why it doesn't show all words I specified?

I have an array of 26 words, but on the screen appears only 8 of them. Is there a property which can manage qauntity of showing words?

Ensure all words are included without overflow

Hi,
is it possible to use jQCloud so that all the words in the array are included (not removed when overflowing), and contained within the cloud dimensions? Maybe separating a long word that is overflowing into multi lines and/or reducing the font size?
If due to the size of the container is not possible to include all words, is it possible to leave out less important words favoring the displaying of more weighted words over the less weighted.

Thanks in advance.

Position trouble with iframe

When I tried to show the wordcloud in a specific sized sub-frame, the position of every word seem to be set as the center of my new canvas.

upgrade from 1.x

What are the breaking changes going from 1.x to 2.x, or how do I upgrade (besides, of course, specifying a different dependency version)?

namespace in .jQCloud('destroy') - v2.0.1

For removing the children of a TagCloud from DOM you collect them using the namespace in a jQuery-selector. But instead of receiving the namespace over "this.data.namespace" just "this.namespace" is used. So the children cannot be found and aren't removed from DOM.

How can i add custom class to each word?

In docs, fontSize min/max should be from/to

Hi,

Just a note to get your attention to the fact that under "Cloud options", your docs say that fontSize can be defined as an object with max and min values. They should say "with from and to values" instead, as can be seen in the "Custom color & size via JS" example.

Great job with jQCloud!

Julián

JqCloud Implementation in Angular2

I am trying to integrate the JQCloud in angular2. I am able to access jquery in my ts file but not able to access JQ Cloud in ts.

ngAfterViewInit(){
//here you will have code where component content is ready.
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.js";
jQuery("head").append(s);

    jQuery('#jqcloud').jQCloud(this.data,{
    width: 500,
    height: 350
    });

}

Please guide me

How can I reduce the words spacing

The spacing between each words tends to be quite large, compared to traditional word cloud tools. How can I reduce it?

Deprecated warning Web SQL is deprecated. Please use IndexedDB instead.

On safari Mac OS in console it shows deprecated warning:
Web SQL is deprecated. Please use IndexedDB instead.

scroll support

I have lots of cloud words and i want container to have scroll..
is it possible ?

Links in word cloud broken when autoResize occurs

Recreate Steps:

1- Create a word cloud where the elements have a url link.
2- Have the URL link includes URL encoded characters. Example: {foobar}
3- Resize the browser window.

Result: Link in the word cloud has escaped the link multiple times, should only have been escaped once, resulting in a broken link.

Deprecated warning Web SQL is deprecated. Please use IndexedDB instead.

On safari Mac OS in console it shows deprecated warning:
Web SQL is deprecated. Please use IndexedDB instead.

Wrong dependency on jqcloud2#2.0.0 and angular-jqcloud#1.0.0

Current version #1.0.0 of angular-jqcloud is dependent on jqcloud2#2.0.0 which doesn't contain necessary functionality from master branch.

Part which is missing is
$.fn.jQCloud.defaults = {...};
from line 509

Please do new bower release

doesn't work on ms edge

see attached image

How are words squeezed into a container

Words never exceed the container，I want more than just show or hide

Controlling the number of words displayed

Hello there, great library, thank you! : )

Is there an easy way to control the fraction of words displayed in a container, possibly minimizing the words overflow?

autoresize lead to overlapping words

On using JQcloud in a bootstrap modal. If I use autoresize event in JQCloud, everything works fine if bootstrap modal is opened and zoom operation is performed but when the bootstrap modal is closed and zoom operations are performed on the browser then if the modal is opened again then entire words are being overlapped.

I tried it by removing autoresize: true then it worked fine. But some words are being overlapped now because of performing zoom-in operations many times.

So, is there any way to perform autoresize without using "autoresize: true" or is there any way to prevent overlapping of words on using autoresize

Problem with Dynamic Width

Hello.

First of all thank you for this great extension.
We are using jqcloud2 in our AngularJS project. It is invoked in the following way:
<jqcloud words="..." height="..." autoResize="true"/>
i. e. with autoResize and without the width specified. According to the documentation the width should be driven by the width of the container.

The problem is that when the container width is being set by jqcloud2 in jQCloud.prototype.initialize() the container still doesn't have it's final width (even though we are not setting its width dynamically - it is based only on media queries in the boostrap CSS). This results in an incorrectly formatted wordcloud.

I propose the following solution. In the module code I can see that the autoResize is solved as the window resize event. However nowadays with AJAX driven web pages the wordcloud size can easily change even without window resize (open/close a side pane, resize a modal window where the cloud is displayed etc.). So it would be more convenient for the module user to have the autoResize functionality bound to the container size change rather than to the window size change. Unfortunately such event is not natively supported by JavaScript. It can be managed by setTimeout() like this. In jqcloud.js

replace

if (this.options.autoResize) {
  (window).on('resize.' + this.data.namespace, throttle(this.resize, 50, this));
}

this.containerWidth = this.$element.width();
this.resizeCheckInterval = setInterval(function() {
  if (this.containerWidth != this.$element.width()) {
    this.containerWidth = this.$element.width();
    throttle(this.resize, 50, this)();
  }
}.bind(this));

replace

if (this.options.autoResize) {
  $(window).off('resize.' + this.data.namespace);
}

if (this.options.autoResize) {
  clearInterval(this.resizeCheckInterval);
}

I have tested this approach and it works fine for me. However I am aware that using setInterval() is not the best approach. There exist truly event driven solutions for capturing the element resize event (based on generating some hidden elements inside the container and binding events to it) but it is rather complex.

Please let me know what do you think about the fix proposed and whether you are about to include this or a different kind of fix to your distribution or we should rather use our "hacked" version.

Not every word is shown on the window.

Hello I am getting to know this jQCloud now.

I have an issue:

I have 66 words in the words variable. It seems like every words are visualized on the full-web in my laptop, but in my phone, only 20-ish words are shown. Why is that? Is there any solution to this problem?
I want to see every words that I have in the var list. Below is my code

[<script type="text/javascript">

					var words = [
						{text: "Lorem", weight: 13},
						{text: "Ipsum", weight: 10.5},
						{text: "Dolor", weight: 9.4},
						{text: "Sit", weight: 8},
						{text: "Amet", weight: 6.2},
						{text: "Consectetur", weight: 5},
						{text: "Adipiscing", weight: 5},
						{text: "Elit", weight: 5},
						{text: "Nam et", weight: 5},
						{text: "Leo", weight: 4},
						{text: "Sapien", weight: 4},
						{text: "Pellentesque", weight: 3},
						{text: "habitant", weight: 3},
						{text: "morbi", weight: 3},
						{text: "tristisque", weight: 3},
						{text: "senectus", weight: 3},
						{text: "et netus", weight: 3},
						{text: "et malesuada", weight: 3},
						{text: "fames", weight: 2},
						{text: "ac turpis", weight: 2},
						{text: "egestas", weight: 2},
						{text: "Aenean", weight: 2},
						{text: "vestibulum", weight: 2},
						{text: "elit", weight: 2},
						{text: "sit amet", weight: 2},
						{text: "metus", weight: 2},
						{text: "adipiscing", weight: 2},
						{text: "ut ultrices", weight: 2},
						{text: "justo", weight: 1},
						{text: "dictum", weight: 1},
						{text: "Adipiscing", weight: 5},
						{text: "El3t", weight: 5},
						{text: "Na4 et", weight: 5},
						{text: "Le2", weight: 4},
						{text: "Sa2ien", weight: 4},
						{text: "Pe2lentesque", weight: 3},
						{text: "ha2itant", weight: 3},
						{text: "mo2bi", weight: 3},
						{text: "tr2stisque", weight: 3},
						{text: "se2ectus", weight: 3},
						{text: "et2netus", weight: 3},
						{text: "et2malesuada", weight: 3},
						{text: "fa2es", weight: 2},
						{text: "ac2turpis", weight: 2},
						{text: "eg2stas", weight: 2},
						{text: "Ae2ean", weight: 2},
						{text: "ve2tibulum", weight: 2},
						{text: "el2t", weight: 2},
						{text: "si2 amet", weight: 2},
						{text: "me2us", weight: 2},
						{text: "ad2piscing", weight: 2},
						{text: "ut2ultrices", weight: 2},
						{text: "ju2to", weight: 1},
						{text: "di2tum", weight: 1},
						{text: "Ut et leo", weight: 1},
						{text: "metus", weight: 1},
						{text: "at molestie", weight: 1},
						{text: "purus", weight: 1},
						{text: "Curabitur", weight: 1},
						{text: "diam", weight: 1},
						{text: "dui", weight: 1},
						{text: "ullamcorper", weight: 1},
						{text: "id vuluptate ut", weight: 1},
						{text: "mattis", weight: 1},
						{text: "et nulla", weight: 1},
						{text: "Sed", weight: 1}
					];

                    $('#demo').jQCloud(words, {

                    		autoResize: true                    		

                    });

				</script>]

I tried not to put the autoResize, but it doesn't solve the problem.
Please let me know how should I do this. For the div size, I put 80% as the div width, and I didn't put any constraint for the height. Let me know when you got some solutions for this please.

Thank you!

Doesn't work

Being trying to digg into this with small example but not able to implement the simplest given example too, not sure where might I be going wrong, but need your help in implementing this.

Below is the small snippet of code I am using

<div id="cloud">
</div>
<script>
$(function(){
  var words = [
  {text: "Lorem", weight: 13},
  {text: "Ipsum", weight: 10.5},
  {text: "Dolor", weight: 9.4},
  {text: "Sit", weight: 8},
  {text: "Amet", weight: 6.2},
  {text: "Consectetur", weight: 5},
  {text: "Adipiscing", weight: 5}
];

$('#cloud').jQCloud(words);
});
</script>

Libraries I am using

jQuery - 1.11.3
jQuery-UI - 1.11.3
Bootstrap - 3.3.5
jQCloud2 - 2.0.1

I don't see any code getting generated via jQCloud library, is it something wrong I have been doing. Your help is appreciated

Issue might not be in library but over my usage part.

Seeking help over stackflow as well - http://stackoverflow.com/questions/32804718/jqcloud-not-generating-any-elements

CDN?

Hi guys, is there a CDN available for this library?
Thanks # #

best effort fit

I've found that long words that have a large font size get left out if removeOverflowing is set to true. The problem is, those words are the most important words. I'd rather see smaller words get left out than bigger words. It would be nice to see a feature that does a best-effort fit of words based on weight within the height/width constraints of the box.

Publish on NPM

Hi,

This is related to mistic100/angular-jqcloud#18 , in order for the Angular directive to be available on NPM jQCloud needs to be published on NPM first as the directive depends on it.

Thanks,

Nico

var words = [
    { text: "blah", weight:  2 },
    { text: "test", weight:  1 },
    { text: "foo", weight:  1 },           
    { text: "bar", weight:  1 },
];

The cloud that is generated chooses the absolute largest size for the word with weight: 2 and the absolute smallest size for the words with weight: 1.

If I set "steps: 2" on cloud options, then I get the 2 absolute smallest font sizes.