{"id":7209,"date":"2019-01-16T10:37:07","date_gmt":"2019-01-16T10:37:07","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=7209"},"modified":"2019-01-22T03:43:02","modified_gmt":"2019-01-22T03:43:02","slug":"qlik-data-visualization-custom-drawing","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/01\/16\/qlik-data-visualization-custom-drawing\/","title":{"rendered":"Qlik Data Visualization Extension: Introducing Custom Drawing Over Custom Theme"},"content":{"rendered":"

\"Qlik<\/a>Our Qlik Charts Extension<\/a> now allows a custom renderer to be set for certain chart types! We’ll show you how to make use of this new great feature in your Qlik data visualization practice, implementing custom drawing over a custom theme.<\/p>\n

Before we begin, please note: We recommend getting acquainted with the custom drawing documentation<\/a> of AnyChart JS Charts<\/a> if you never worked with it before. When you do that, it will be easier for you to understand what the custom drawing functions are and how to use them right and best.<\/p>\n

<\/p>\n

Custom Renderer Overview<\/h2>\n

Setting up a custom renderer became possible thanks to the updates we pushed live to the AnyChart JavaScript charting library and our Qlik Sense extension last year. It works for all the basic chart types, pie charts, and gauge charts\u2019 bar pointer.<\/p>\n

The main thing to note is that the code of a custom renderer is placed in a custom theme, where one can also change any other settings such as palette, background color, font, and so on.<\/p>\n

The code of any theme starts with the following pattern:<\/p>\n

\/** customTheme *\/\r\n(function(root) {\r\n  root['anychart'] = root['anychart'] || {};\r\n  root['anychart']['themes'] = root['anychart']['themes'] || {};\r\n  root['anychart']['themes']['customTheme'] = {};\r\n})(this);\r\n<\/code><\/pre>\n
In the code above, customTheme<\/code> is the name of a custom theme. All the other settings are in the object which is empty now.<\/p>\n
Setting Up Custom Renderer for Advanced Qlik Data Visualization<\/h2>\n
(1) Palette and Default Background Color<\/h3>\n
First of all, add a palette and a default background color to be applied to all the charts.<\/p>\n
{\r\n    'palette': {\r\n      'type': 'distinct',\r\n      'items': ['#779868', '#c8eca3', '#e5d6c9', '#a39387', '#4e4e4f']\r\n    },\r\n    'defaultBackground': {\r\n      'fill': '#283b6e',\r\n      'stroke': '#9da5bc',\r\n      'cornerType': 'round',\r\n      'corners': 0\r\n    },\r\n}\r\n<\/code><\/pre>\n
Now, let’s see how to make it work for several chart types.<\/p>\n
(2) Custom Renderer for Column Chart<\/h3>\n
For example, here’s how to add a custom renderer for the column series type<\/a>. This particular drawer will be used by all the basic charts with a column series, making corners of all the columns rounded like this:<\/p>\n
\"Custom<\/p>\n
To achieve this result in your Qlik data visualization, we need to include the following custom drawing function:<\/p>\n
'cartesianBase': {\r\n      'defaultSeriesSettings': {\r\n        'column': {\r\n          'rendering': {\r\n            'point': function() {\r\n              \/\/ if missing (not correct data), then skipping this point drawing\r\n              if (this['missing']) {\r\n                return;\r\n              }\r\n\r\n              \/\/ get shapes group\r\n              var shapes = this['shapes'] || this['getShapesGroup'](this['pointState']);\r\n\r\n\t  \/\/ if the thickness is set, then use it; if no, use the default =1.5\r\n              var strokeThickness = this['series']['stroke']();\r\n              if (strokeThickness['thickness']) {\r\n                strokeThickness = strokeThickness['thickness'];\r\n              } else {\r\n                strokeThickness = 1.5;\r\n              }\r\n              var halfStrokeThick = strokeThickness \/ 2;\r\n  \r\n          \/\/ find the coordinates needed for custom drawing\r\n\r\n              \/\/ calculate the half of the point width\r\n              var rx = this['pointWidth'] \/ 2;\r\n              var diff = 5;\r\n              var ry = this['pointWidth'] \/ 2;\r\n              \/\/ calculate the left value of the X-axis\r\n              var leftX = this['x'] - rx;\r\n              \/\/ calculate the right value of the X-axis\r\n              var rightX = this['x'] + rx;\r\n              var pointHeight = this['zero'] - this['value'];\r\n              var zero = this['zero'];\r\n              var value = this['value'];\r\n              var x = this['x'];\r\n\r\n\t    \/\/ if the column is above xAxis and its height is bigger than 2 ry\r\n              if (value <= zero && pointHeight >= 2 * (ry - diff)) {\r\n                shapes['path']\r\n                \/\/ resets all 'line' operations\r\n                  .clear()\r\n                  .moveTo(leftX, zero - ry + diff - halfStrokeThick)\r\n                  .lineTo(leftX, value + ry - diff + halfStrokeThick)\r\n                  ['circularArc'](x, value + ry - diff + halfStrokeThick, rx, ry - diff, 180, 180)\r\n                  .lineTo(rightX, zero - ry + diff - halfStrokeThick)\r\n                  ['circularArc'](x, zero - ry + diff - halfStrokeThick, rx, ry - diff, 0, 180)\r\n                  .close();\r\n              }\r\n\r\n           \/\/ if the column is above xAxis and its height is smaller than 2 ry\r\n              if (value <= zero && pointHeight < 2 * (ry - diff)) { ry = pointHeight \/ 2; shapes['path'] .clear() ['circularArc'](x, value + ry, rx, ry - halfStrokeThick, 180, 180) ['circularArc'](x, zero - ry, rx, ry - halfStrokeThick, 0, 180); } \/\/ if the column is below xAxis and its height is bigger than 2 ry if (value > zero && Math.abs(pointHeight) >= 2 * (ry - diff)) {\r\n                shapes['path']\r\n                  .clear()\r\n                  .moveTo(leftX, zero - ry + diff - halfStrokeThick)\r\n                  ['circularArc'](x, value - ry + diff - halfStrokeThick, rx, ry - diff, 0, 180)\r\n                  .lineTo(leftX, zero + ry - diff + halfStrokeThick)\r\n                  ['circularArc'](x, zero + ry - diff + halfStrokeThick, rx, ry - diff, 180, 180)\r\n                  .lineTo(rightX, value - ry + diff - halfStrokeThick)\r\n                  .close();\r\n              }\r\n\r\n          \/\/ if the column is below xAxis and its height is smaller than 2 ry\r\n              if (value > zero && Math.abs(pointHeight) < 2 * (ry - diff)) {\r\n                ry = Math.abs(pointHeight) \/ 2;\r\n                shapes['path']\r\n                  .clear()\r\n                  ['circularArc'](x, value - ry, rx, ry - halfStrokeThick, 180, -180)\r\n                  ['circularArc'](x, zero + ry, rx, ry - halfStrokeThick, 0, -180);\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n<\/code><\/pre>\n
That might seem complex at first. But when you look closer, that’s a simple work with the AnyChart Graphics Engine<\/a>.<\/p>\n
For any other basic chart series, the code starts with the same lines. For an area series, for example, it should be:<\/p>\n
'area': {\r\n 'rendering': {\r\n   'point': function() {}\r\n }\r\n}\r\n<\/code><\/pre>\n
(3) Custom Renderer for Pie Chart<\/h3>\n
The same technique can be applied to a pie chart<\/a>. It\u2019s a single-series chart, so its API is a bit different from a multi-series one. A pie with a custom renderer is shown in the picture below. You can find the code for this renderer in the custom AnyChart theme file<\/a>.<\/p>\n
\"Custom<\/p>\n
(4) Custom Renderer for Gauge Chart<\/h3>\n
And it works fine just like that for gauges<\/a> too. The picture below shows a sample custom drawing in a circular gauge. You can find the code for this renderer in the custom AnyChart theme file<\/a>.<\/p>\n
\"Custom<\/p>\n
For each chart type, the approach is the same.<\/p>\n
If you want to achieve something you can\u2019t do, please reach out to our Support Team<\/a> and we will be happy to help.<\/p>\n
Custom Theme Usage<\/h2>\n
The custom theme code for the charts shown above can be downloaded here: AnyChart Sample Custom Theme<\/a>.<\/p>\n
To add a custom theme to the AnyChart Qlik Extension, edit the file at ..\\Users\\\\Documents\\Qlik\\Sense\\Extensions\\AnyChart-Qlik\\lib\\themes-combined.js<\/code><\/strong> by putting the code of your custom theme at the end.<\/p>\n
To use the theme by default in the future, edit the config.js<\/code><\/strong> file at ..\\Users\\\\Documents\\Qlik\\Sense\\Extensions\\AnyChart-Qlik<\/code><\/strong>. There is a property with an empty value at the end of the file. Set the name of your custom theme there so it looks: defaultTheme: \"customTheme\"<\/code>. This name should be the same as the name of the custom theme.<\/p>\n
When all this is done, you just need to launch Qlik Sense and you’ll be able to use our Qlik data visualization extension along with the custom rendered charts.<\/p>\n
***<\/p>\n
The AnyChart Qlik data visualization extension is a powerful tool, and we continue its active development to make it even better. So if you have any questions or more suggestions about how it can be improved, feel free to share. You can send a message to AnyChart Support Team<\/a> or simply leave a comment below.<\/p>\n
Don\u2019t hesitate to ask and suggest. We\u2019re always glad to work with your feedback as it greatly helps us make our products better.<\/p>\n