(12-15-2022, 10:04 PM)MJS@mjs.us Wrote: Something like this has been working for me:
IWChartJS1->RefreshAsyncRender();
Thanks for your reply MJS@mjs.us. I think you are using the ChartJS component, so you have different options to me. I am using JavaScript in my HTML to draw the chart, so I don't have a component to control the chart.
For anyone else who is using Chart.js the same way as me, I found a way to update the chart with new data.
In your HTML you should have a canvas that the chart will draw onto. I took mine from a Bootstrap example.
<canvas id="xenoPrimaryVisitorChart" width="100%" height="40"></canvas>
You'll also need script in your HTML to load the version of chart.js that you want to use.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Remove the JavaScript from your HTML or JS file that configures the chart. We will inject our own JS to draw our chart.
Create some JavaScript in your HTML page to destroy any existing chart. If you don't do this, you will end up with a new chart with lots of unwanted events from previous versions of the same chart. I also have a JS function to draw the chart for the first time based on some JS that is applied by replacing the tag
_XENOPRIMARYVISITORCHARTDATA_ with chart data in my IWTemplateProcessorHTML's OnUnknowTag event.
<script type="text/javascript">
var primaryVisitorChart = null;
function drawPrimaryVisitorChart()
{
{%_XENOPRIMARYVISITORCHARTDATA_%}
}
drawPrimaryVisitorChart();
function destroyPrimaryVisitorChart()
{
if(primaryVisitorChart != null)
primaryVisitorChart.destroy();
}
</script>
2. When you want to update the chart with new data, create some JS text in Delphi/C++ to first call the
destroyPrimaryVisitorChart() function and then create a new chart with your new data. e.g.
destroyPrimaryVisitorChart();
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
var ctx = document.getElementById("xenoPrimaryVisitorChart");
new Chart("
ctx ", {
type: "line",
data: {
labels: xValues,
datasets: [{
backgroundColor: "rgba(0,0,0,1.0)",
borderColor: "rgba(0,0,0,0.1)",
data: yValues
}]
},
options:{...}
});
This Javascript is used in the IWTemplateProcessorHTMLUnknownTag event when the page is first loaded.
You can update the chart at anytime by using the
AddJavaScriptToExecuteAsCDATA function. This allows you to run your JavaScript in realtime to update a chart.
WebApplication->CallBackResponse->AddJavaScriptToExecuteAsCDATA(chartJavaScript);
I hope this helps anyone else that wants to use Chart.JS using JavaScript with Intraweb to control the chart.
Richard