Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Updating Chart.js script
#1
I've got some chart.js data in a script inside my HTML file. I can replace part of the chart.js script with tags that I then process in the IWTemplateProcessorHTML's UnknownTag event. This works when I populate the script before the HTML page is loaded. Once the page is loaded, I'm struggling to find a way to force the chart to redraw, so I can inject new data into the chart using the UnknownTag event.

I've tried using WebApplication->CallBackResponse->AddJavaScriptToExecuteAsCDATA(js) to inject some JavaScript, but I don't know enough JS to work out how to get the chart to update.

I've also tried surrounding the chart with divs and giving the div the name of an IWRegion. I then call invalidate on the region, but this didn't work for me.

Any help would be very gratefully received. Thanks.

Richard
Reply
#2
Something like this has been working for me:

IWChartJS1->RefreshAsyncRender();
Reply
#3
(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
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)