how to create chart on twincat 3

Question

I create Pie chart on my Twincat project.

But it's not dynamic. I just put it on the TcHmiHtmlHost like this

<div id="htmlhost_piechart" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-height="100" data-tchmi-height-unit="%" data-tchmi-left-unit="px" data-tchmi-top="0" data-tchmi-top-unit="px" data-tchmi-width-unit="%" data-tchmi-creator-visibility="Visible" data-tchmi-zindex="1" data-tchmi-width="100" data-tchmi-creator-locked="False" data-tchmi-left="0">

        <script src="../../../CodeBehind/Scripts/Chart.js"></script>
        <canvas id="pieChart" style="width:90%;height:90%;float:right"></canvas>
        <script>
                var xValues = ["Pass", "Reject"];

                var barColors = [
                    '#02c39a', '#fe4a49'
                ];

                const pieConfig = {
                    type: 'pie',
                    data: {labels: xValues,
                        datasets: [{
                            backgroundColor: barColors,
                            data: [159, 3],
                            borderWidth: 2
                        }]},
                    options: {
                        title: {
                            display: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            }
                        }
                    }
                }

                var v = new Chart("pieChart", pieConfig);

        </script>


    </div>

currently, I can pass the value to the pie chart data using this

console.log('setupDataforPie');
async function setupDataforPie() {
  try {
        underValue = await TcHmiEx.Utilities.ReadFromServer('%s%PLC1.ProductCounter.f_undercounter.rOpCount.Count%/s%');
        overValue = await TcHmiEx.Utilities.ReadFromServer('%s%PLC1.ProductCounter.f_overcounter.rOpCount.Count%/s%');
            
  }
  catch(error) {
    console.log(`error occured in setupDataforPie = ${error}`);
  }
}
setupDataforPie();

and change data on the tcHmiHtmlHost to

                        datasets: [{
                            backgroundColor: barColors,
                            data: [underValue , overValue ],
                            borderWidth: 2
                        }]},

But, how can I make it dynamic/realtime?

What I've done is: create usercontrol of TcHmiHtmlHost, and put the value to the parameter. But I don't know how to pass the value.

another way, I create js and create TcHmiHtmlHost using CreateEx, but I don't know what next.

Looking on the web and they suggest to use subscription, but still not working.

please kindly advise.

Answer 1

1. As HTML host can not have symbols, you have done right by using global variables.
2. Now you need to preserve the chart object in global space. So rather than using var v= new chart(), you can try pieChart = new chart() this will create a global pieChart object that can be accessed from you js.
3. You can call pieChart.update() after setting the variables this will update the pie chart.

Regarding doing this as UserControl or js file you can choose best option suitable to you. UserControl gives you option to create more charts in the project, but you will need to program a JS functions to update chart values from parameters.

If not using userControl, you need to call your setupDataforPie() function regularly at a fixed interval, this will read any changed value and update the chart.