Show chart

This page explains the basic steps for displaying a graph on a web page using blocks from the Chart.js group.

Initializing the Context

First, initialize the context based on the canvas element used for displaying the graph and assign it to a variable.
To do this, use the "Initialize Context" block found in the "Web" - "Chart.js" - "Basic" group.
Pass the canvas element as a parameter.
Also, assign the initialized context to a variable.

For example, suppose you have assigned the opened web page to a variable named `win`, following the final step on this page.
Assume also that the web page contains a canvas element with the ID attribute "myChart".
Finally, suppose you assign the initialized context to a variable named `ctx`.
In this case, you would assemble the blocks as shown below.

Setting the Graph to a Variable

Next, place the block that sets the graph to a variable.
For the "Context" parameter, pass the context variable you initialized earlier.
Select the type of graph using the "Type" parameter.
Since you may need to manipulate the graph later, assign it to a variable.

For example, suppose the initialized context is assigned to the variable `ctx`.
Also, suppose you want to display a bar chart.
And finally, suppose you assign the graph to a variable named `cht`.
In this case, you would assemble the blocks as shown below.

Setting Labels

You can add labels to the tick marks on the graph's horizontal axis.
This is specified using the "Label" parameter of the block that displays the graph.
You pass a list of strings to this parameter, representing the text to be displayed at each tick mark.
For example, to display the labels "1", "2", and "3" on the horizontal axis, you would assemble the blocks as shown below.

Setting Data

The group of data displayed on the graph is called a "dataset."
Drag a "Series" block into the "Create Dataset" block (which is part of the graph display block) and specify the data to be displayed using the "Data" parameter.
The data should be provided as a list of numbers.
You also specify the series name using the "Label" parameter.
Additionally, you can configure parameters such as the border color.
If you want to display multiple series on a single graph, you can increase the number of series by clicking the gear icon at the top-left of the "Create Dataset" block and dragging a "Series" block into the dataset area.

For example, suppose you assemble the blocks as shown below.

This block displays a graph like the one shown below.

Sample File

You can download the sample file used so far from here.
To try out this sample, please prepare the HTML for displaying the chart by following the steps below:

• Create a folder named "html" inside the Tsumicky installation folder.
• Copy the HTML example found on this page.
• Save it as a file named "chart.html" inside the "html" folder mentioned above.