Code Widget: Creating Charts
Charts are an effective way to visualize and analyze the data. You can use the 'Code widget' to let learners create their charts with JSON language.
The chart rendering feature comes in handy when you want learners to make any changes to the .json
file and play around with the plotted data. This adds to the interactivity of the content. Refer to the following sources:
Add the code widget and select the "Execute" checkbox. This is what it looks like:
Select the 'Shell' language from the "Language" drop-down menu. Add a .json
type file through the "Add File" button.
[{"data": [{"x": [10,2,3,4,5,6],"y": [2,6,3,9,3,2],"z": [7,8,9,8,2,5],"mode": "markers","marker": {"color": "green","size": 12,"symbol": "circle","line": {"color": "rgb(204, 204, 204)","width": 1},"opacity": 0.9},"type": "scatter3d"}],"layout": {"dragmode": true,"margin": {"l": 0,"r": 0,"b": 0,"t": 0},"autosize": true},"frames": [],"config": {"responsive": true}},{"type": "line","data": {"labels": ["January","February","March","April","May","June","July"],"datasets": [{"label": "My First dataset","backgroundColor": "rgb(255, 99, 132)","borderColor": "rgb(255, 99, 132)","data": [0,10,5,2,20,30,45]}]},"options": {}}]
In the main.sh
file, we're moving the chart.json
file from the current directory (usercode
) to the usercode/utput
directory and rename it as __ed_chart.json
.
Take a look at chart.json
file. It's JSON-format data of scatter-3D plot. Learners can modify the file to see the variations.