Prepare and show HTML

The "Web" - "Chart.js" group blocks allow you to display graphs on a web page.

This page explains how to create a web page for displaying graphs.

Placing the canvas element

The "Web" - "Chart.js" group blocks use the JavaScript library Chart.js to display graphs.
Chart.js works by drawing graphs on a canvas element on a web page.
Therefore, it is necessary to include a canvas element in the HTML of your web page.
The canvas element should have an id attribute, and the graph display block will use this ID to identify the canvas element.

Wrapping the canvas element in a div element and specifying the style attribute

Chart.js has a feature to make graphs responsive.
To ensure this feature works correctly, wrap the canvas element in a div element as shown below.

<div style="position: relative;">
  <canvas id="XXX"></canvas>
</div>

Also, if you want to specify the size of the graph, you can specify attributes such as width and height in the div element.
For example, doing the following will make the width of the graph match the width of the parent element surrounding the div element.
Also, the aspect ratio will be 3:2.

<div style="position: relative; width: 100%; aspect-ratio: 3/2">
  <canvas id="XXX"></canvas>
</div>

The following HTML is an example of HTML for a web page that displays a graph, based on Bootstrap.
The canvas element has the ID "myChart".

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>Chart</h1>
        <div class="row">
            <div class="col-md-12">
                <div style="position: relative; width: 100%; aspect-ratio: 3/2">
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Displaying a Web Page

Use the "Browser Window" block in the "Web" - "Browser" group to display the web page for graph display in a popup window.
For example, suppose you create a folder named "html" in the Tsumicky installation directory and prepare a web page as an HTML file named "chart.html" inside it.
Also, suppose you display this web page and assign it to the variable `win`.
In this case, the following block will display the web page for graph display.
The width and height parameters are used to specify the width and height of the popup window as appropriate.

Next page：Show chart »