Template UI: Accessing Properties of Elements in Scripts

WEB TMS WEB Core
1

I'm trying to use a Template from Creative Tim (Material Dashboard 2). How do I access the chart elements' (e.g. chart-bars) properties in dashboard.html (50.8 KB)? Basically, I want to programmatically assign values to the "type", "data", "options", etc. fields.
An example would be highy appreciated :slight_smile:

2

With

var
  el: TJSElement;
begin
  el := document.getElementById('chart-bars')
end;

you have access to the HTML element 'chart-bars' in this document.
I'm not sure what kind of manipulation you want to do, as this element is a HTML CANVAS element and I would expect it is some JavaScript code that is responsible for rendering on this HTML CANVAS.

3

Hi Bruno

Yes. It is the javascript code below:

<script>
    var ctx = document.getElementById("chart-bars").getContext("2d");

    new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["M", "T", "W", "T", "F", "S", "S"],
        datasets: [{
          label: "Sales",
          tension: 0.4,
          borderWidth: 0,
          borderRadius: 4,
          borderSkipped: false,
          backgroundColor: "rgba(255, 255, 255, .8)",
          data: [50, 20, 10, 22, 50, 10, 40],
          maxBarThickness: 6
        }, ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        interaction: {
          intersect: false,
          mode: 'index',
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
              display: true,
              drawOnChartArea: true,
              drawTicks: false,
              borderDash: [5, 5],
              color: 'rgba(255, 255, 255, .2)'
            },
            ticks: {
              suggestedMin: 0,
              suggestedMax: 500,
              beginAtZero: true,
              padding: 10,
              font: {
                size: 14,
                weight: 300,
                family: "Roboto",
                style: 'normal',
                lineHeight: 2
              },
              color: "#fff"
            },
          },
          x: {
            grid: {
              drawBorder: false,
              display: true,
              drawOnChartArea: true,
              drawTicks: false,
              borderDash: [5, 5],
              color: 'rgba(255, 255, 255, .2)'
            },
            ticks: {
              display: true,
              color: '#f8f9fa',
              padding: 10,
              font: {
                size: 14,
                weight: 300,
                family: "Roboto",
                style: 'normal',
                lineHeight: 2
              },
            }
          },
        },
      },
    });
</script>

I want to access and assign values to different fields, e.g.the data field:, data.labels, data.datasets.data.

4

I would suggest to put this script block in your application code in an ASM block.
You can then use a variable mychart: JSValue and set it to

mychart = new Chart(...)

and reference in other places in your code in ASM blocks to mychart.