This is not your ordinary custom visual - this is EVERY custom visual. Charticulator puts the power to design and develop custom visuals to meet your precise requirements in your hands - with no coding required!
Custom Visual: Charticulator
Scores
Data Clarity: 10/10
Versatility: 10/10
Fun Factor: 10/10
PBI Certified: It's developed by Microsoft (but it's in preview!)
Description
You read that right - 10/10 in all categories. The Charticulator Custom Visual is a Microsoft developed preview visual that enables you to create your own Power BI visualizations using simple images, your own data, and a bit of patience. Since this visual gives you the power to develop your own custom visualization, the way we use this visual is a bit different to most other custom visuals.
- It will take you a bit more time, especially if you've never used Charticulator before.
- It will give you a lot more flexibility, especially if you're constantly searching for formatting options that don't exist in the built in visual library.
- It will make you feel like a superstar for having built your very own visual.
Let's start by seeing how to use Charticulator. I'm going to expand slightly on the Microsoft Charticulator Blog.
How to
Step 0: Get Charticulator
First, we need to get the Charticulator custom visual. You can do this the same way you get any custom visual, just download it from the marketplace.
The Charticulator visual will appear on the bottom row of the Visualizations pane. Let's put this in a blank new page in our report. Select the Charticulator visual icon to add it to the report.
Now we're ready to follow the steps in the Charticulator visual itself.
Step 1: Start with adding and assigning your data to visual and create a charticulator visual.
For this example, we're going to use a nice simple dataset - the freediving data from a previous blog post. It has three columns: Depth, Pressure and Volume.
Our goal is to plot the percent change in Volume of our lungs as Depth changes when freediving, so we'll add Depth and Volume to the Data box in the Visualizations pane.
Step 2: Import existing template or start creating from blank visual
Since this is our first time using Charticulator, we don't have any of our own templates (though there are plenty of Charticulator Templates available for download).
In order to develop our own visualization, we must hover over the Charticulator visual header and click 'Edit'.
This will open the Charticulator visual in focus mode and give you a screen that looks a bit like this:
Click 'Create chart' and the Charticulator design canvas will open up.
Now we're ready to start creating. Check out the Charticulator Tutorials for more info on Glyphs, Layers, Attributes and how to use the Charticulator designer, or follow along with the Freediving example below. You can download all the necessary Charticulator Freedive Sample Data to follow along.
Glyph
We'll start with our glyph - glyphs can be shapes, images or lines.
Since we're trying to visualize the change in lung volume, we'll use an image of human lungs. Transparent files are best if you have them, for this example I've used .png file.
To add an image, click the Icon button in the ribbon at the top.
I want the lungs to be the center of the chart, so I will select the center of the Glyph graph at top right to put the Icon placeholder in the middle.
Layers
You'll notice that you now see Icon1 under Glyph in the 'Layers' section of the designer. Select Icon1 here to edit its Attributes.
Attributes
Now we'll give it a name - Lungs, and browse on our computer to find the image we want to use for this icon.
Finally, select the desired alignment for this Glyph relative to the position we chose earlier. I want them both centred.
Bind Data
Note that in the .gif above, I typed a static size for my Glyph, mainly so we could see it for alignment purposes. We want the size of the lungs to change based on the Volume selected in the data. Click the Link next to the 'Size' and choose the 'Volume' data field. Now set the Domain and Range start and end sizes until you get the size you want for your icon. I set Domain Start to 0 and Domain End to 1, Range Start to 0 and Range End to 10,000. Hit tab after entering each value to save, then click away from the pop up to return to the Designer main screen.
Save
This is a simple visual, but it will work. Click Save at the top left of the Charticulator designer. There are many ways to save your Charticulator visual. If you want to use it again you can click the Export arrow to export it as a template. This action is still in preview from Power BI Desktop, so you'll have to copy and save as a .tmplt file.
Test
We're now ready to test our visual. One of the BEST FEATURES about the Charticulator Custom Visual being integrated into Power BI Desktop is that we can save, test, and rework our custom visual without needing to export and import the custom visual each time.
Click 'Back to Report' to return to the Power BI report. You'll now see a beautiful set of lungs on the page.
Add a slicer for Depth and only allow single selections. BONUS: Create a parameter to make this slicer a slider as in the sample file. See the Parameter How To blog if you're not familiar with DAX parameters.
It works, but could use a bit of refining. Let's go back into Edit mode and see what else we can do.
PlotSegment
So far, we've just managed to resize our glyph based on the data, which is handy, but what if we want its position to change relative to the data selected? To make that happen, we need to return to the Layers area and select the PlotSegment1 layer.
Now in the Attributes section, we'll rename this to PlotSegmentDepth.
Click the link next to Y Axis and choose 'Depth' data field.
This will put avg(Depth) in the Data field. Our depth ranges from 0 to 65, but since we're diving down, we want this to be negative, so put a - symbol in front of the avg(Depth) so that it reads -avg(Depth). Now set the range to -65 to 0. Be sure to untick the Auto range min value and Auto range max value boxes in order to keep the Y-axis consistent for any depth selected!
Add Meaning by expanding your Glyph
We're making good progress, but this visual still doesn't tell the story I want it to - it's too difficult to see the change in size of lung volume when we can only see one depth at a time. We want to compare to the surface volume, so I'm going to add a semi-transparent lung at full surface volume.
Return to Edit mode and start at the beginning. Note we're still working with our original Glyph. Recall that a Glyph can be a shape, icon, lines, drawings. Well, it can also be a combination of all of the above. Let's add another Icon to our Glyph. Click the Icon button in the ribbon, select the new icon from the Layers area and format it in the Attributes area: give it the same size as you specified in your Range End, the same alignment as the original LungsVolumeIcon and don't bind it to any data.
Save and test the visual.
Wow!
That's pretty cool. So many possibilities with this Charticulator Custom Visual. We haven't even started to look at text labels, color, and stacking Glyphs, but I hope I've inspired you to go and have a bit of a play with it yourself. Let me know what you create.
