The Charticulator application has a new dataset list that allows you to import datasets with a single click to create a chart from scratch.
The chart list view also supports quick filtering of datasets by name.
If you want to see data samples on list, contact with me. But make sure that dataset is allowed to copy and using doesn't breaks laws or agreements.
The next version of the Editor visual (1.3.0.0) will support importing pre build charts and templates from public source.
On importing chart the visual imports data and rewrites current data passed from Power BI.
Then on saving imported chart the visual opens mapping view to map chart columns to current data passed from Power BI.
On importing template the visual opens data mapping view to map current data passed from Power BI to template columns.
The Charticulator App can allow to import data from *.csv files, but there is no opportunities to pre edit, enter or edit data on chart development phase.
The PR48 closes this gap. Powered by ReactGrid component brings feature to edit current data, creating table from scratch, inserting rows and columns.
The layout of current charts are changed from vertical list to grid to display private and publicly available charts.
On PR48 page you can find link to deployment of the latest development branch.
The Charticulator App now has a built-in list of charts (gallery) that can be imported with a single click.
There are only few examples in the diagram list so far, but it will be updated soon, and will also support importing templates. If you want to add your own examples, feel free to contact me.
The list of charts has a filter of charts by name and type (private, charts that are stored in the browser's indexed database, and public, which are downloaded from a CDN).
This is one of the most significant updates for Charticulator. The mark allows to draw arbitrary shape for data visualization. The polygon support snapping to other marks or parent objects and supports basic styling like rectangle, ellipsis or triangle marks.
The mark doesn't have a icon yet. But already available for testing in application on https://ilfat-galiev.im/charticulator/ page.
Current limitations:
There is POC of the visual for rendering Markdown layout and Mermaid diagrams in Power BI reports.
The visual has built in editor powered by react-md-editor with preview feature.
Diagrams rendering powered by Mermaid
Future work:
The preview version of the visual available in Visuals menu (above)
Demo:
The Charticulator Visual Community (View) has passed the certification and will be available for end users in 2-3 weeks.
The Charticulator Visual Community (Editor) shows notification in toast when chat saves in visual settings.
Issue with scale editor popup on click on scale has been partially fixed. When user clicks on scale name on Scales list panel editor opens Scale editor.
The visual passed highlight columns correctly. Highlight controls was added into visual settings.
The visual enabled the highlight settings for editor if template contains highlight columns.
TODO: need to implement case when highlight disabled and visual doesn't filter category values.
Attribute panel has border lines for each group of properties.
The sorting axis value by another colum works now
The visual supports importing templates in edit mode.
The icons of data binding button has been fixed
The issue, when chart attributes doesn't filters properly, has been fixed
It brings more space for editing the chart. Data can be bind to properties on Attributes panel. It's not necessary to have Dataset panel always visible
You can download the latest development version in Visuals menu of blog
The Charticulator documentation has been partially moved to the doc section of the website.
The original source documentation is available in the github repository. It was deployed to https://charticulator.com/docs/, which is now unavailable.
The first version of the visual for rendering Charticulator templates has been published in AppSource
The editor version of the visual available on GitHub repository page or by direct link
To use the visual, you need to create a new chart using either the old Charticulator or a visual with an editor, or import a template that you have (or took from https://charticulator.com/gallery/index.html).
You also can use The New Charticulator App to create chart templates.
it's not recommend to use Old Charticulator App because it doesn't include new features and bug fixes.
To import the template, create instance of the new visual, assign data from Power BI and switch the visual to edit mode by click on "Edit" on visual menu. You should see button to import the template, click on it and select template file. The visual saves the template in settings immediately.
Click on "Back to report" to exit from edit mode.
The visual shows the chart built from template if the visual has all data for template, otherwise it requires to provide columns mapping between data columns and template columns. In this case set column mappings and confirm by clicking on "Confirm".
After that visual should show the chart built from template and data assigned from Power BI.
To build the chart from scratch, create instance of the visual and assign data, then switch the visual to old Charticulator visual or to the new Charticulator with editor.
After that click on "Edit" in visual menu to switch the visual to editor mode, it launches the Charticulator App for plotting new chart.
Save the chart and close editor by click on "Back to report", the editor version of the visual will show preview version of chart.
To save the chart switch back to the view version of the visual and save a report. The visual with editor will not work in Power BI services in view mode of the report.
If you have an idea or suggestions, feel free to open a discussion on the GitHub repository page
Here's a brief description of what I want to offer to the Power BI community. There may be a need for a visual that would allow the use of HTML and SVG to layout content in Power BI reports using data from Power BI. Yes, AppSource already has visuals that offer these solutions. But all of them load HTML content through data.
The video shows the process of using two visual objects to create a simple table.
The idea is very simple, I already have a visual that has the Monaco editor built in, with syntax highlighting and autocomplete. The second visual will display the handlebarsjs template, which is created using the editor. The templateizer allows you use handlebars expressions to use the data in the resulting output.
Example Handlebars expression
<p>{{there can be Power BI data}}</p>
gives us an HTML paragraph element with data from Power BI.
In the video, I use another example similar to the following one:
<p>Title</p>
<p>Rows: {{table.rows.length}}</p>
<table>
{{#each table.columns}}
<th>{{this.displayName}}</th>
{{/each}}
{{#each table.rows}}
<tr>
<td>{{this.Country}}</td>
<td>{{this.[ Sales]}}</td>
<td>{{this.Date}}</td>
</tr>
{{/each}}
</table>
The table object contains data in the form of a table passed from Power BI to visual.
I use the {{table.rows.length}} expression to get the number of rows. In the output, instead of {{{table.rows.length}}, the templating engine outputs the value. And it is dynamic, it updates the value when the data changes.
Handlebarsjs has custom helpers that allows developers provide custom functionality. I used it to provide D3.js formatting features.
You can use format and timeFormat functions to formad numbers and date.
<tr>
<td>{{this.Country}}</td>
<td>{{format this.[ Sales] '.1f'}}</td>
<td>{{timeFormat this.Date '%Y.%m.%d'}}</td>
</tr>
Output of template:
Try it for yourself:
HTML/SVG/Handlebars Visual is not 100% ready, there is no error output in the UI, to understand what is wrong you need to use browser DevTools if your template is not working.
Don't forget switch the target visual and schema for Power BI Visual Editor:
I'm currently experimenting with adding functions from D3.js, such as scale and axes.
Would love to hear your opinion, you can connect with me on LinkedIn