topic Adding HighCharts as custom visual in Developer

Adding HighCharts as custom visual

Markzolotoy — Thu, 31 Dec 2020 00:27:14 GMT

I am working on adding HighCharts custom visual. A basic example is works fine. Here is chart's definition used in visual.ts:

Highcharts.chart(optionMain.id, { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], type: undefined }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], type: undefined }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], type: undefined }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], type: undefined }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], type: undefined }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } });

I am looking for making this chart working with real data. Two things should happen. Chart definition must be real. The one in this code is just a very simplistic example. Second, the data. So both parts can vary. Not sure if this is the right way but I can provide both in a single json being read from the SQL database. It will be pretty big though. So is it possible to provide such json at the runtime?

What are your thoughts?

Thanks

Re: Adding HighCharts as custom visual

Markzolotoy — Thu, 31 Dec 2020 13:31:33 GMT

Just to clarify. This visual is not to replace native Power BI charts meaning I don't need fully functional interactive UI for this chart. The visual is to show specific Highcharts chart in paginated reports. Both chart definition and data can be provided at the runtime if that is the way to go. Please provide your thoughts.

Re: Adding HighCharts as custom visual

V-lianl-msft — Mon, 04 Jan 2021 08:25:03 GMT

Hi @Markzolotoy ,

Defining visualTransform will allow you to convert DataView into a view model your visual will use. IVisualHost is required because when defining individual data points, you will want to assign colors and selection to them.

https://github.com/microsoft/PowerBI-visuals-sampleBarChart/blob/master/Tutorial/DataBinding.md#defining-and-using-visualtransform

Please refer to this sample.

https://github.com/Microsoft/PowerBI-visuals-sampleBarChart/commit/3c6e8186436b63bf0cf97d2cdd5dde8aa8d08709

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Re: Adding HighCharts as custom visual

Markzolotoy — Mon, 04 Jan 2021 14:27:12 GMT

But in my case I can provide the complete chart definition at runtime with colors and everything. Another words, the users will not use this custom visual for a normal chart design. Am I toally wrong?

Re: Adding HighCharts as custom visual

V-lianl-msft — Tue, 05 Jan 2021 01:53:58 GMT

Hi @Markzolotoy ,

If you are talking about static custom visual, you can only store the data in JSON.

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Re: Adding HighCharts as custom visual

Markzolotoy — Fri, 15 Jan 2021 20:55:05 GMT

Can you please elaborate?