Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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>
Hi
maybe this can help you.
https://github.com/HectorMunoz/QS-TagCanvas
regards.
PS. literally is the same code with no improvements 😅
Hi
maybe this can help you.
https://github.com/HectorMunoz/QS-TagCanvas
regards.
PS. literally is the same code with no improvements 😅
Hi Hector..
Thanks for your help.. it look perfect.. 👍
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();
}
}
};
} );
Hi
just uploaded a new version in my github. Check it out.
regards.
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