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:

Edit mode
Edit mode

Select the 'Shell' language from the "Language" drop-down menu. Add a .json type file through the "Add File" button.

main.sh
chart.json
[
  {
  "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.