DataVisualization_Chart.js/script.js at master · ruchibrata/DataVisualization_Chart.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//global variable
var selectChartType = "";

function selectType() {
  const chartTypeSelector = document.getElementById("select-chart-type");
  let selectChartType =
    chartTypeSelector.options[chartTypeSelector.selectedIndex].value;
  createChart(selectChartType);
}

//create the chart with selected chart type option
function createChart(selectChartType) {
  var myChart = new Chart(document.getElementById("chart"), {
    type: selectChartType,
    data: {
      labels: ["JavaScript", "HTML/CSS", "SQL", "Python", "Java"],
      datasets: [
        {
          label: "Percentage ",
          backgroundColor: [
            "#3e95cd",
            "#8e5ea2",
            "#3cba9f",
            "#e8c3b9",
            "#c45850",
          ],
          data: [67.7, 63.1, 54.7, 44.1, 40.2],
        },
      ],
    },
    options: {
      legend: { display: true },
      title: {
        display: true,
        text: "Percentage ",
      },
      events: null,
    },
  });
}