Angular chart (extension example)

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

See also: For more information about AngularJS, see AngularJS overview.

Finding the code examples

In a Qlik Sense Desktop environment, you find the code examples in ...\Users\<UserName>\Documents\Qlik\Examples\Extensions.

In a Qlik Sense environment, you find the code examples in ...\ProgramData\Qlik\Examples\Extensions.

The code examples are not visible in Qlik Sense until you have deployed them. For more information about deploying examples, see Deploying your visualizations.

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"], function($, template) {'use strict'; 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].qNum}}'> <div style='width:15%;height:32px;float:left;font-family:Arial;font-size:12px;line-height:32px;clear:both;overflow:hidden'>{{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/angular.jpg");'> </div> <div style='clear:both'></div> </div> </div> </div> </div>

Code example breakdown

Edit the applicable fields of the qext file to set a default title, description, icon and type.
Define properties and load reference to the html file where we code the AngularJS rendering:

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

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – please let us know!

Leave your feedback here