Angular chart

The Angular chart example demonstrates a simple chart with basic AngularJS rendering.

Finding the examples

• Qlik Sense Desktop: ...\Users\<UserName>\Documents\Qlik\Examples\Extensions.

• Qlik Sense: ...\ProgramData\Qlik\Examples\Extensions.

Full code example

{
	"name" : "Angular Chart",
	"description" : "Extension with AngularJS template",
	"icon" : "bar-chart-vertical",
	"type" : "visualization",
	"version": "1.0",
	"preview" : "bar",
	"author": "QlikTech International AB"
}

define(["jquery", "text!extensions/com-qliktech-angularchart/template.html", "text!./angularchart.css"], 
function($, template, cssContent) {
	'use strict';

	$("<style>").html(cssContent).appendTo("head");
	return {
		template : template,
		initialProperties : {
			version : 1.0,
			qHyperCubeDef : {
				qDimensions : [],
				qMeasures : [],
				qInitialDataFetch : [{
					qWidth : 2,
					qHeight : 50
				}]
			}
		},
		definition : {
			type : "items",
			component : "accordion",
			items : {
				dimensions : {
					uses : "dimensions",
					min : 1,
					max : 1
				},
				measures : {
					uses : "measures",
					min : 1,
					max : 1
				},
				sorting : {
					uses : "sorting"
				},
				settings : {
					uses : "settings"
				}
			}
		},
		snapshot : {
			canTakeSnapshot : true
		},
		controller : ['$scope',
		function($scope) {
			$scope.getWidth = function(row, measureinfo) {
				var width = 80 * row[1].qNum / ( measureinfo ? measureinfo[0].qMax * 1.5 : 1) + '%';
				return {
					"width" : width
				}
			}
		}]

	};

});

<div qv-extension style="height: 100%; position: relative; overflow: auto;" >
	AngularJS example extension
	<div style="height: 100%; position: relative;">
		<div ng-repeat="row in layout.qHyperCube.qDataPages[0].qMatrix">
			<div title ='{{row[0].qText}}: {{row[1].qText}}'>
				<div class='label'>{{((row[0].qIsOtherCell)?layout.qHyperCube.qDimensionInfo[0].othersLabel:row[0].qText)}}</div>
				<div ng-style='getWidth(row, layout.qHyperCube.qMeasureInfo )' class='bar'>&nbsp;</div>
				<div style='clear:both'></div>
				</div>
		</div>
	</div>
</div>

.qv-object-com-qliktech-angularchart div.qv-object-content-container {
	overflow: auto;
}
.qv-object-com-qliktech-angularchart .label {
	width: 15%;
	height: 32px;
	float: left;
	font-family: Arial;
	font-size: 12px;
	line-height: 32px;
	clear: both;
	overflow: hidden
}
.qv-object-com-qliktech-angularchart .bar {
	display: block;
	float: left;
	height: 32px;
	clear: right;
	background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wBDAAICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgL/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsBAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKCxAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/wAARCAAgACADAREAAhEAAxEA/9oADAMBAAIRAxEAPwD9vPiN8S/C/wALtCOt+JLl1813g0zTbVVk1HVbtU3m3s4GZFCouGuLmZ4rW3Vk82UPLDHL5GdZ5l/D+CljMfUcIJ8lKlTSlXxFVptUqMG4pysm3KUowgvenOKOPG47D5fRdavLlje0IR1nOVr8sI3V33bailrJo+GdW/bL+IF3fSHw74Y8NadYLuMVtfQ6nrF9tyfmmure+0yE/Lg4jsYwpzl3GMfkOI8Uc7xFaUcsyvB0qS1UKsMTjK/Kn8UpUauHgk+qVL3b253u/kanFGNlN/VcLRhBaqMlUrTSXVuEqaXooad2dv8AD79slbq+g074j6JZ6ZbzuIz4g0Bbz7NZknCtfaPcSXt0YBnM1xZ3c0qY+SwkDHZ6+R+KNOtWhhs8wlPCKcuVY3Ce09hTk2kvbYepKpVpwWvNUhVqtO16SjeS68DxRGU40sdRjRTdvbUebki2/t05OUox7yjOVv5bXa+6La5t7y2t7yznhurS6hiubW5tpUmt7m3nRZYZ4JomaOWGaNlkiljZkkRlZWKkGv1yMozjGcJRlCUVKEotSjKMleMoyV04tNNNOzWqPrk00nFpppNNO6aeqaa0aa2aPzJ+Nz6p8VP2iIPA0dy8FlZ6lpHhPTuBs0+3ljt7vW9R8h5lilnWee9nJUxy3VtaWductFGB+C8W+34i45oZGqjp4ehVw2BpWelKFSnTxONrqD932tpTXTnjQoxltp8Hm3tMwzyngeZxp050qEbackZRjVr1EtufWX+JQgnsUfi7+09N8AfFN18Jfgt4R8L6fp/hP7Hb6/rWt2N1e3ms6u1ra3U2Psl7pryGGOYWt7f3zXNzcz+almLO2t7eSf8AcMtyvA5ThaeDwGHp4ahTSSjTiouUkknUqz+KrVna86k25Se7PtsPhqGDpRo4enGlTitFFWbfWUnvKT6yldvuXbrXNB/aU+C3iL4ox+G9O8NfE74fXkUfioaRGYLHXbBoreSS8LSu0rxGwM1xaC8nvNRs5tLuLATzW1xBLJ8P4hcN4PG5Ris1pUadLMcvp/WPbwioSr4eFvb0q7VvaclK9SlKV5xlBQi1CpNPxOIMto18JVxUIRhicNH2nOkoudNfHCdvitG8oN3aceVNKUk/o39kDxZd658Ob7Qr6Z55PCWsNZWTOSxj0jUIFvLS3LsSzCC6GoRxDOIrYW8CBY4kULwzzKrjeH5YatJylluKnhqTd7rDTpwrUYtv+SU6tOC2jSjTilZIOGcTOrl7pTbbw1V0oN7+ycYziv8At1ucV2iopaI+evj1Z6v8Kvj5Y/EK0tTJY6lf6Z4o0zJeOC6l0+O0tdd0mSco4SWWSN2n8tWMFpqtq6jcwA+K4yp4rhzjTDZ/TpuVDEVMPjaVvdjN0KdPD4zCudmlOcI8zaT5YYmDV2meJnMauWZ1Tx8Y+5OVOtD7KbhGNOtS5rOzkldu2iqprUo/FD9nPQf2jvEs/wAUfg94/wDDVnfeI4bK58UeFfE0s9ndaVfw2sVlJc7NNttQvbWSdbaJbi1ubB7ae8W5v7LVrm1uoY4/2fKc7yzOMLDE5fiqVWEopzp88Y18PJrWnXo356U07rX3ZW5oSnBxk/ssJjMNjKSq4erGSsm43SnTfWNSF7wkvPR7xbi02anbeCv2efg9rfwj8MeKLTxn488b3yz+NNZ0wxf2fpVrH5cEunxiJ7lItkFtJp0NjNO+oF73UtUuxYJJY2NfDeIPFeBwuWYnJ8HiKVfMMbH2FaNGcZrCYeTXt3WcbxjVqwTpQotqolUdVpKMefxM/wA1oUsLVwdGpGeIrL2c1BpqjTb9/naulKcbxUPitLmdklf6R/Y88OrpXw1vtbMtvJP4l1+6mCwTrK9vZ6XHHp8FvdojEQXP2lb+5ETASG2ubaRuHUDbwxwP1Th2WJcoOWYYytWShJN06dFRw0ITs7RnzU6lRx3UakbpPQ04Yoeyy51bq+IrTnZP4YxSpqMrbSvGUrdpK+p9BeOfAfhr4iaBceHPE9j9pspGE1vPEwhvtNvEVlivtOudjm2uogzLko8M0TyW9zDPbTSwv9nm2UYDOsHUwOYUVVoSalFp8tWjVimoVqNRa06sbtJq6lFyhOM6c5wl7OLwdDG0ZYfEQ5oPVW92UJLacJLWMld67NNxknFtP4d8QfsVeJIbt/8AhFfF+iXdgzsY11+G+0y8gjJJWN30611WC6dF2hpljs1kOWFvEMLX5LjPCbEqo/7OzWhKi5NxhjKNSlUhFvROdBVY1ZW3kqdFN/ZR8lW4TqqT+rYunyXdo1oShKK6Jyp8yk+75YX7HT+G/wBiqxjsbw+LPGNxLqU1rJHYR+H7RIrHT7xkYR3NzLfhrjVIUcoxto4dJZgrKbj5wyehgPCjCQpVP7SzKtWrSpuNKODpxoUqFRrScnV9pOvyuzUeWgmrp3umujD8KUoxl9ZxM5TcWoKjFU4wk/tNy5nPva1PzOz/AGefgh45+FviXxTd69riJoTRjT9O0zTbkTWPiJ2MUya7dWz5Ng1jGDaQRvGl+08t2nnLYRo2p+rwTwlm3DeMzGeLxyeDl+6w+HoSvRxT92SxtSnK/sJwj+6jBfvHJ1U5ujGnKt1ZJlGLy2tiXVrr2L9ynTpv3K17P20ov+G4r3Evib5rtwUXP//Z");
}

Example breakdown

1. Edit the applicable fields of the QEXT file to set a default title, description, icon and type.

2. Define properties and load reference to the html file where we code the AngularJS rendering:

   define(["jquery", "text!extensions/com-qliktech-angularchart/template.html"], function($, template) {'use strict';
   

3. Inject the template HTML file "text!extensions/com-qliktech-angularchart/template.html"

   	return {
   		template : template,

4. Define a cube by setting up the initial properties to include a qHyperCubeDef.

   		initialProperties : {
   			version : 1.0,
   			qHyperCubeDef : {
   				qDimensions : [],
   				qMeasures : [],
   				qInitialDataFetch : [{
   					qWidth : 2,
   					qHeight : 50
   				}]
   			}
   		},

5. Define the Properties panel to include sorting and the number of dimensions and measures.

   		definition : {
   			type : "items",
   			component : "accordion",
   			items : {
   				dimensions : {
   					uses : "dimensions",
   					min : 1,
   					max : 1
   				},
   				measures : {
   					uses : "measures",
   					min : 1,
   					max : 1
   				},
   				sorting : {
   					uses : "sorting"
   				},
   				settings : {
   					uses : "settings"
   				}
   			}
   		},

6. Enable snapshots.

   		snapshot : {
   			canTakeSnapshot : true
   		},

7. Create a function in the controller that dynamically calculates the width of the bar.

   		controller : ['$scope',
   		function($scope) {
   			$scope.getWidth = function(row, measureinfo) {
   				var width = 80 * row[1].qNum / ( measureinfo ? measureinfo[0].qMax * 1.5 : 1) + '%';
   				return {
   					"width" : width
   				}
   			}
   		}]

8. In the template.html file, use ng-repeat to iterate all the data and ng-style to apply the correct width defined in the controller as getWidth().

   <div qv-extension style="height: 100%; position: relative; overflow: auto;" >
   	AngularJS example extension
   	<div style="height: 100%; position: relative;">
   		<div ng-repeat="row in layout.qHyperCube.qDataPages[0].qMatrix">
   			<div title ='{{row[0].qText}}: {{row[1].qText}}'>
   				<div style='width:15%;height:32px;float:left;font-family:Arial;font-size:12px;line-height:32px;clear:both;overflow:hidden'>{{((row[0].qIsOtherCell)?layout.qHyperCube.qDimensionInfo[0].othersLabel:row[0].qText)}}</div>
   				<div ng-style='getWidth(row, layout.qHyperCube.qMeasureInfo )' style='height:32px;float:left;display:block;background-image : url("/extensions/com-qliktech-angularchart/qlogo.jpg");'>&nbsp;</div>
   				<div style='clear:both'></div>
   				</div>
   		</div>
   	</div>
   </div>