Mobile Friendly Horizontal Bar Chart - Qlik Community

Yianni_Ververis · ‎2016-09-16

In our Qlik Demo Team we are trying to create mashups that are suitable for all devices. This is why we created another version of a Horizontal Bar Chart that we use almost exclusively. This has various options like setting the bar height, color, text color, text hover color etc. It can also change from regular Horizontal Bar Chart to Horizontal Stacked Bar Chart, Grouped Bar Chart or a Lollipop.

All of the UI/UX guidance is coming from my colleague Michael Anthony | Qlik

Installation

Download Zip file from Branch: http://branch.qlik.com/#!/project/57161998713777448667b063
Desktop - Unzip at the extension folder (C:\Users<user>\Documents\Qlik\Sense\Extensions\SenseUIBarChart)
Server - Upload the zip file

Settings

Dimension and Measures

Set 1 dimension for the Labels and
up to 5 Measures for Grouped, Stacked Bar or Lollipop

General Settings

Text Color
Font Size

Bar

Height
Comma separated colors for the stacked bar fill color
Fill color when you mouse over
Text Color for each bar
Text Color when you mouse over
Border Weight
Border Spacing
Enable Selections
Toggle between Stacked and Grouped Bar Chart

Tooltip

Enable Tooltip
Show Dimension in the Tooltip

X-Axis

Show X-Axis
Show Legend (check Stacked Bar image below)

Y-Axis

Show Y-Axis
Label Width (Usually 150px, even for the smallest device )
Number of visible characters, if you want to truncate your labels.

Even though we still have a long way to go to make this perfect, features are always welcome!

YIANNI

Files

Qlik Branch

simondachstr · ‎2016-09-17

Can you provide the source code of the native Qlik Sense Bar Chart?

Also, this extension is developed using SVG, while the native object makes usage of canvas. Any reason why you went a different route?

Yianni_Ververis · ‎2016-09-19

Hello Martin,

Unfortunately I do not have source code for the native bar chart.

No particular reason, just because we like D3!

mgranillo · ‎2016-10-11

Yianni,

A great addition to this would be the ability to select multiple bars. I've been trying to find a bar chart extension that does this so I don't lose any native Qlik functionality. Any plans to do that?

Mike

Yianni_Ververis · ‎2016-10-11

Yes I will try and put that in

Thank you Mike

mgranillo · ‎2016-10-12

Yianni,

Now that i think about it, you also lose access to the exploration menu and the confirm selection frame. Do your users not care about that functionality?

Mike

mgranillo · ‎2016-10-19

Yianni,

I like the tooltip you used in this.

I tried adding it to another extension of mine but get an of message of "d3.tip() is not a function".

Did you have to edit the d3-tip.js script or do anything special to implement this?

Mike

Yianni_Ververis · ‎2016-10-19

Hello Mike,

Yes I did.

(function (root, factory) {

if (typeof define === 'function' && define.amd) {

define(['./d3.min'], function (d3){

d3.tip = factory(d3);

})

} else if (typeof module === 'object' && module.exports) {

module.exports = function(d3) {

d3.tip = factory(d3)

return d3.tip

}

} else {

root.d3.tip = factory(root.d3)

}

}(this, function (d3) {

mgranillo · ‎2016-10-19

Thanks, I'll look through that.

Mike