4 posts tagged with "PowerBI"

Exciting News! Treemap Diagrams Now Available in Mermaid Chart Visuals for Power BI 📊

I have just rolled out an update to Mermaid Chart Visuals for Power BI The amazing developers at Mermaid have introduced a powerful new diagram type, the Treemap.

What are Treemap diagrams?​

For those new to them, Treemap diagrams are way to visualize hierarchical data. A set of nested rectangles where the size of each rectangle is proportional to its value. This makes it incredibly easy to see which categories are the most significant.

Dynamic Data Binding with Handlebars.js​

To make this even more powerful, the new visual leverages Handlebars.js for data binding. This allows you to use templating to dynamically generate the Treemap syntax directly from your Power BI data. Instead of manually writing out the hierarchy, you can create a template that automatically builds the diagram based on the fields and measures in your dataset, making your reports fully interactive and data-driven.

Code sample:

{{ var 'cat1' (map 'Country' table.rows) }}
{{ var 'cat2' (map 'Segment' table.rows) }}
{{ var 'measure1' (map 'Sales' table.rows) }}
{{ scaleBand 'Category1' (val 'cat1') (val 'cat1')}}
{{ scaleBand 'Category2' (val 'cat2') (val 'cat2')}}
{{ scaleBand 'Measure1' (val 'cat2') (val 'measure1')}}
```mermaid
treemap-beta
{{#each (getScale 'Category2' 'domain') as |cat2 cat1index| }}
"{{cat2}}"
        {{#each (getScale 'Category1' 'domain') as |cat1 cat2index|}}    
    {{#each ../../table.rows as |row rowindex|}}{{#if (eq row.Country cat1)}}{{#if (eq row.Segment cat2)}}"{{cat1}}":{{row.[ Sales]}}
{{else}}{{/if}}{{else}}{{/if}}{{/each}}{{/each}}
{{/each}}
```

Result:

The source code may seem complex, but I'm working on new helper functions to create a hierarchical data structure to solve this problem

Simple, Powerful, and Customizable​

One of the best things about the new Treemap diagram is its "refreshingly simple" syntax. With just a few lines of code, you can create a stunning and insightful visualization. Plus, with features like custom styling, value formatting, and theme customization, you have all the tools you need to make your data stories clear and compelling.

For a deeper dive into the technical details and to see more examples, we highly recommend checking out the original announcement from the Mermaid team.

Read the original blog post here: Mermaid supports Treemap Diagrams now!!!

✨ Charticulator Updates​

I've made several improvements to the Charticulator custom visual for Power BI:

• ✅ Unified the behavior of the Import Template and Open Chart actions.
• 🛠️ Fixed an issue where the visual wouldn't load a template into the editor if chart columns were not mapped.
• 🎨 Power BI Theme Support: The editor now respects the Power BI Desktop dark theme (Preview feature).
• 🧹 New Feature: Added a convenient button for deleting scales directly from the scales panel.
• 🎯 Bug Fix: The visual now correctly applies Power BI theme colors when rendering.

📌 Apache ECharts Visual​

Minor but useful updates for the Apache ECharts visual:

• 🧩 The built-in editor layout has been updated—Save and Apply buttons are now pinned to the top of the viewport for better accessibility.

  

• 📊 The visual now supports D3.js formatting options for enhanced data presentation flexibility.

The latest 1.4.0 update of the Markdown & Mermaid Diagrams visual introduces exciting new features and enhancements:

✨ New Features​

📌 Custom Styling with the styles Block​

You can now define custom styles for text elements using the new styles block.

All content within this block is added as a <style> tag in the final HTML render.

Example:

h1 {
    color: red;
}

This will make all <h1> headings appear in red.

🛠 New Handlebars.js Helper Functions​

We've added several new helper functions for the Handlebars.js templating engine, including:

• Equal (eq)
• Not Equal (ne)
• Less Than (lt)
• Less Than or Equal (lte)
• Greater Than (gt)
• Greater Than or Equal (gte)
• Logical AND (and)
• Logical OR (or)

📖 Read the full Handlebars.js helpers documentation →

🔍 Improved Debugging: View Source on Render Failure​

If rendering fails, the visual now displays the source configuration of the chart. This helps you quickly identify and fix any issues.

⚡ Increased Diagram Rendering Limit​

The maxEdges configuration parameter has been set to 30,000, allowing the visual to render diagrams with up to 30,000 nodes.

This post summarizes my work on the Charticulator App and Power BI visual for 2024. It includes an overview of the new features and a brief history of the project. The project is live, and my focus moving forward will be on improving the documentation and creating tutorials to showcase how to use the new features. Currently, the documentation is outdated and does not cover the latest updates.