I'm trying to incorporate the Kendo bubble chart into a form as a 2x2 matrix. Since the entire Kendo library is already installed, I figured it should be pretty straightforward. I referenced https://demos.telerik.com/kendo-ui/bubble-charts/index.

I'm starting simple with static data adapted from the demo. I'm using a form with an HTML form cell. My HTML is:

<div class="k-content wide">
	<div id="chart"></div>
</div>

My JavaScript is:

function createChart() {
            $("#chart").kendoChart({
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bubble"
                },
                series: [{
                    data: [{
                        x: -2.5,
                        y: 5,
                        size: 5,
                        category: "Microsoft"
                    }, {
                        x: 0.5,
                        y: 1.1,
                        size: 4,
                        category: "Starbucks"
                    }, {
                        x: 0.7,
                        y: 1.9,
                        size: 3.9,
                        category: "Google"
                    }, {
                        x: 1.4,
                        y: -1.5,
                        size: 1,
                        category: "Publix Super Markets"
                    }, {
                        x: -2.4,
                        y: 3,
                        size: 3,
                        category: "PricewaterhouseCoopers"
                    }]
                }],
                xAxis: {
					max: 5,
					min: -5,
                    axisCrossingValue: 0,
                    majorUnit: 1,
                    plotBands: [{
                        from: 0,
                        to: 5,
                        color: "green",
                        opacity: 0.05
                    },{
                        from: 0,
                        to: -5,
                        color: "red",
                        opacity: 0.05
                    }]
                },
                yAxis: {
					max: 5,
					min: -5,
					axisCrossingValue: 0,
                    majorUnit: 1,
                    plotBands: [{
                        from: 0,
                        to: 5,
                        color: "green",
                        opacity: 0.05
                    },{
                        from: 0,
                        to: -5,
                        color: "red",
                        opacity: 0.05
                    }]
                },
                tooltip: {
                    visible: true,
                    format: "{3}",
                    opacity: 1
                }
            });
        }

    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);

It looks fine in preview mode.
Matrix IDE.png

But I've run into a couple snags:

1) I can't get it to show up in test. When I go to Inspect, I don't see the JavaScript anywhere.

2) I can't figure out how to do the data-binding. Telerik offers suggestions for how to do it in Javascript here https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding, but there doesn't seem to be an example anywhere in the AIM documentation or forum, which is what I really need.