Adding HighCharts as custom visual

[Markzolotoy]

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

[Markzolotoy]

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?

[V-lianl-msft]

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.

[Markzolotoy]

Can you please elaborate?

[V-lianl-msft]

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#defi... 

Please refer to this sample.

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

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

[Markzolotoy]

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.