Now imagine that we need to make the previous charts show live data. We simply cannot do it. We can set a JavaScript interval to poll new data from the server, every, let's say, 5 seconds, but then, how are we going to let XForms know what the newly pooled data is?

We can instead use a submission to refresh the data, but how are we going to trigger it from a JavaScript interval?

Actually, we can do both, but it depends on the renderer. For XSLTForms, for example, we can locate the xforms-model element dispatch an event from JavaScript, listen for it on XForms, and refresh whenever it's triggered. This works with XSLTForms 1.7 but not with previous versions because they don't build the HTML page in the same way.

// javascript code
setInterval(function () {
  document.querySelector('xforms-model').dispatchEvent(new CustomEvent('on-refresh'));
}, 5000);

<!-- xforms code -->
<xf:submission id="refresh" method="get" action="/refresh" replace="instance" instance="test-data"></xf:submission>
<xf:send submission="refresh" ev:event="on-refresh" />

However, what if we want a better solution? What if we want to use sockets instead? How complex would implementing that be? Is it worth the trouble, or would it just be a half-baked solution that is slightly easier to implement?

Wouldn't it be much better if we could write something like the following instead:

<chart type="bar" data-url="/load-data/bar-chart" refresh-interval="5" />

or

<chart type="bar" data-socket="bars-chart" />