Admin Profusion|January 21, 2021

Video Transcript

Hi, my name is Diego Cordero and I’m the BI Lead and Data Scientist at Profusion. Today we’ll be looking at Sisense BloX, and how to create a custom bar chart. On previous videos, we’ve seen how BloX can help us create smart graphic objects, indicators, and now progress bars. And that’s how we’re going to create our custom bar chart.

So, let’s jump right into the demo. Here is my code, I can I’ve created a very, very simple HTML that we’ve we will translate into a BloX simply, as you can see, we have one element here that is a text block, and then two columns. Now, the first one is a tooltip, that shows how the value in the bar chart. The second one is the column that contains the category. And in this case, it’s called Local Authority, because that’s the category of the example. And here we have another column that contains the bar, which will show the progress.

Now, as you can see, this one is a text BloX that in the text actually has another HTML element to show the progress. So, this is basically the container of the bar and this one builds up the percentage that it’s given, and I’ve added this style at the top to show you how this is being styled. What’s here, we have BloX element. And this is basically the style that goes into each of the BloX elements in the style tag for each element, and I’ll show you in a bit. So, this is the column the text BloX is inside that column, as well as this is the other column and the text BloX inside that one. Now, with these inline, it’s the style that goes in the text BloX inside the text BloX in the text, we’ve added an HTML element. And that’s where we have added the style, and I’ll show you in a bit where it goes and then we have BloX style.

So, at the top of each template, we can add more style like to the general style document will actually either affect the whole dashboard, but in this case, as we have an ID will just affect our tool, our tooltip container here. So, as you can see in BloX, you can add styles in many different ways. And I’ve probably covered all of them in these are most of them in this document. But I’ll show you now, on the actual template, how that looks. So, if we go to our template, we can see that we have here is this style tag, the general style type that has was here in the bottom. And then we have inside the text BloX, we have a text and there we can add actual HTML. You can see that we’ve added text, in an inline style here, which is this one, and then we have one column here, the column set where we have one column, another column, and this is the style that I was mentioning for the local authority container, and the actual local authority text BloX, as well as the bar container. It doesn’t have a class here, but that’s how we call it in the HTML just for more understanding. Here we have text BloX, which contains, in itself another deep, in this case, I called it a deep inner, we have style within that element and style within the text.

Just so you kind of understand a bit because it’s a bit of mess, it’s probably not the style or the structure that you’re used to viewing in HTML, but this element here is the grey background that you see in each bar, and this element here within the text is a green-blue, or the teal element that you see filling up the bar, and the tooltip is a purple element, and the text here the column is this text right here, which is a column. So, that’s pretty much it and that’s how you can create custom bar charts.

If you use this technique, you can create a progress bar, or I mean, your imagination is limitless. So, you can put into practice any of these techniques. And I’ll make sure to say to share this template as well in the post in the blog post in on our website and also make sure to watch all the different content that we have within Profusion, we have very talented people showing more content. Thank you very much for watching!

Sign up to our newsletter

Want to make life easier by staying on top of market trends?