|
| 1 | +# codewander-plotlyScatterPlotPlayer |
| 2 | +Qliksense Extension Animated Bubble chart |
| 3 | +Here is the new qliksense extension - bubble chart animated. This is an inspiration from the <a href="https://plot.ly/javascript/gapminder-example/">animation with sliders example</a> of <a href="https://plot.ly/">plotly</a>. This is a basic extension quickly created to demonstrate the capability. |
| 4 | +<iframe width="560" height="315" src="https://www.youtube.com/embed/siropQVs_GY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 5 | + |
| 6 | +<h1>Steps to use</h1> |
| 7 | +<h2>Download and Install</h2> |
| 8 | +<ul> |
| 9 | + <li>You can download the extension from the below link. If you like to contribute you can also use the <a href="https://github.com/CodeAtRoost/codewander-plotlyScatterPlotPlayer" target="_blank" rel="noopener">GIT HUB</a></li> |
| 10 | + <li>Extract and copy contents of the folder in the Extensions folder on your desktop or server. It usually is in the My Documents/Qlik/Sense/Extensions folder</li> |
| 11 | +</ul> |
| 12 | +<div style="width: 100%;"> |
| 13 | + |
| 14 | +<a style="background-color: #81d742; padding: 14px; color: white; display: inline-block; text-align: center; text-decoration: none;" href="http://www.codewander.com/download/?download_link=https://orchilens.sgp1.digitaloceanspaces.com/codewander.com/codewander.com/codewander-plotlyScatterPlotPlayer.zip&download_title=Qliksense%20Extension%20Bubble%20Chart%20Animated" target="_blank" rel="noopener">Download Qliksense Animated Bubble Chart Extension </a><a style="display: inline-block; background-color: #ffbe0a; padding: 14px; color: white; text-align: center; text-decoration: none;" href="https://github.com/CodeAtRoost/codewander-plotlyScatterPlotPlayer" target="_blank" rel="noopener"> Clone from GIT HUB </a> |
| 15 | + |
| 16 | +</div> |
| 17 | +<h2>Add to the sheet and set measures and dimensions</h2> |
| 18 | +The animated bubble chart will now be available under the custom visualization. The visualization required three measures and three dimensions. |
| 19 | +<div style="wdth: 100%;"><a href="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Dimensions.png"><img class="size-medium wp-image-260 alignleft" src="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Dimensions-157x300.png" alt="Qliksense Extension Animated Bubble Chart-Dimensions" width="157" height="300" /></a><a href="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-measures.png"><img class="size-medium wp-image-261 alignleft" src="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-measures-140x300.png" alt="Qliksense Extension Animated Bubble Chart-measures" width="140" height="300" /></a></div> |
| 20 | +<h3><a href="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Details.png"><img class="aligncenter size-full wp-image-259" src="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Details.png" alt="Qliksense Extension Animated Bubble Chart-Details" width="1333" height="375" /></a></h3> |
| 21 | +<h3>Measures</h3> |
| 22 | +<ul> |
| 23 | + <li>The first measure the x-axis</li> |
| 24 | + <li>The second measure is the y-axis</li> |
| 25 | + <li>The third measure is the size of the bubble</li> |
| 26 | +</ul> |
| 27 | +<h3>Dimensions</h3> |
| 28 | +<ul> |
| 29 | + <li>The first dimension is for the slider</li> |
| 30 | + <li>The second dimension is for color code of the bubble</li> |
| 31 | + <li>The third dimension is the dimension to compute the values of the measures</li> |
| 32 | +</ul> |
| 33 | +<h3>Options for the chart</h3> |
| 34 | +<a href="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Options.png"> |
| 35 | +<img class="aligncenter size-full wp-image-262" src="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Options.png" alt="Qliksense Extension Animated Bubble Chart-Options" width="221" height="625" /></a> |
| 36 | +Under Appearance section, you will see the custom options for this visualization |
| 37 | +<ul> |
| 38 | + <li>Transition Duration in milliseconds - This is the duration for the transition from one frame to another frame.</li> |
| 39 | + <li>Play button text</li> |
| 40 | + <li>Pause button text</li> |
| 41 | + <li>Bubble size (25 to 100)</li> |
| 42 | +</ul> |
| 43 | +<h3>Features</h3> |
| 44 | +<h4>Advanced built-in features</h4> |
| 45 | +The plotly graphs comes with some advanced built-in options including lasso select, pan and zoom.You can also download the visualizations as png or export data |
| 46 | + |
| 47 | +<a href="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Advanced-Features.png"><img class="aligncenter size-full wp-image-264" src="http://www.codewander.com/wp-content/uploads/2018/05/Qliksense-Extension-Animated-Bubble-Chart-Advanced-Features.png" alt="Qliksense Extension Animated Bubble Chart-Advanced Features" width="370" height="40" /></a> |
| 48 | +<h4>Handling of large data</h4> |
| 49 | +The default rendering can handle 1000 rows of data. This extension fetches data gradually when the total data exceeds 1000 records. However, the chart will render and refresh as per the data fetched. So the users will not have any delay in seeing the data |
| 50 | + |
| 51 | +Please use it and share your comments. |
0 commit comments