Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Announcements
Join us in Bucharest on Sept 18th for Qlik's AI Reality Tour! Register Now
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
adambrian
Contributor III
Contributor III
‎2019-12-23 07:03 AM

Create an Extension

Hi guys,

I'm new in qlik sense. I want to create an animated tag cloud extension.
Can anybody can help me to convert to qlik sense extension from this code @ ways learned to created animated extensions?
Here i paste the code if anyone want to help me convert this code 😊

 

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://www.goat1000.com/jquery.tagcanvas.min.js?2.9"></script>
<script>
$(document).ready(function() {
if(!$('#myCanvas').tagcanvas({
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: false,
depth: 0.8,
maxSpeed: 0.05
},'tags')) {
$('.myCanvasContainer').s();
}
});
</script>

<canvas height="500" id="myCanvas" width="500"></canvas>
<div class="myCanvasContainer">
<div id="tags">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
<li><a>7</a></li>
<li><a>8</a></li>
<li><a>9</a></li>
<li><a>10</a></li>
</ul>
</div>
</div>
</body>
</html>

Labels (1)
Labels
2,434 Views
0 Likes
1 Solution

Accepted Solutions
hector
Specialist
Specialist
‎2019-12-24 07:32 AM

Hi

maybe this can help you.

https://github.com/HectorMunoz/QS-TagCanvas 

regards.

PS. literally is the same code with no improvements 😅

View solution in original post

2,399 Views
5 Replies
hector
Specialist
Specialist
‎2019-12-24 07:32 AM

Hi

maybe this can help you.

https://github.com/HectorMunoz/QS-TagCanvas 

regards.

PS. literally is the same code with no improvements 😅

2,400 Views
adambrian
Contributor III
Contributor III
‎2020-01-06 02:52 AM
Author

In response to hector

Hi Hector..

Thanks for your help..  it look perfect.. 👍

 

2,370 Views
0 Likes
adambrian
Contributor III
Contributor III
‎2020-01-06 02:54 AM
Author

In response to hector

Hi @hector ,

I tried to add dimension,  so data can change to what dimension I used.. Can you help me to edit script?

Thanks,
adam

 

 

define( [
"qlik",
"./js/jquery.tagcanvas.min"
],
function ( qlik , tagCanvas) {

return {
//definition: {
// type: "items",
// component: "accordion",
// items: {
// dimensions: {
// uses: "dimensions"
// },
// sorting: {
// uses: "sorting"
// },
// appearance: {
// uses: "settings"
// }
// }
// },
support : {
snapshot: true,
export: true,
exportData : false
},
paint: function ($element, layout) {
//add your rendering code here
html = "<canvas height='500' id='myCanvas' width='500'></canvas>";
html += "<div class='myCanvasContainer'>";
html += "<div id='tags'>";

html += "<ul>";
//html += "<li><a>1</a></li>";
//html += "<li><a>2</a></li>";
//html += "<li><a>3</a></li>";
//html += "<li><a>4</a></li>";
//html += "<li><a>5</a></li>";
for (var r = 0; r < layout.qHyperCube.qDataPages[0].qMatrix.length; r++) {
for (var c = 0; c < layout.qHyperCube.qDataPages[0].qMatrix[r].length; c++) {
ui += layout.qHyperCube.qDataPages[0].qMatrix[r][c].qText;
ui += '</br>';
}
}
html += "</ul>";

html += "</div></div>";
$element.html( html );

options = {
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: false,
depth: 0.8,
maxSpeed: 0.05
};

if(!$('#myCanvas').tagcanvas(options,'tags')) {
$('.myCanvasContainer').s();
}
}
};
} );

2,365 Views
0 Likes
hector
Specialist
Specialist
‎2020-01-10 09:23 AM

In response to adambrian

Hi

just uploaded a new version in my github. Check it out.

regards.

2,336 Views
adambrian
Contributor III
Contributor III
‎2020-01-16 06:35 PM
Author

In response to hector

Hi Hector..
Thank for your helps, i new a little bit how to convert to qlik sense format.

Can you help me again. From code before, you already help add the dimension right? after add the dimension,  when i click the value, it'll go to other page not select the value that i click.. I already change "<a href='#' >" but didn't find a ways to do it. " Can you help me again?

And is pleasure if your help me to make it size to responsive.

Thanks,

Adam

2,305 Views
0 Likes