OpenAI Model Veracity - Chart Fixed v4

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    h1 {
      font-family: sans-serif;
      text-align: center;
    }

    html,
    body {
      background-color: white;
      margin: 0;
      padding: 0;
      width: 100%;
      height: calc(100% - 1em);
    }

    .chart--container {
      margin: 0 auto;
      max-height: 500px;
      min-height: 150px;
      width: 100%;
      height: calc(100% - 3.33em);
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <h1>OpenAI Model Veracity</h1>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      zingchart.loadModules('patterns');

      let pieDefaults = {
        type: 'pie',
        legend: {
          x: '44%',
          y: '10%',
          collapse: true,
          shared: true,
          draggable: true,
          'border-width': 1,
          'border-color': "gray",
          'border-radius': "5px",
          header: {
            text: "Legend",
            'font-family': "sans-serif",
            'font-size': 12,
            'font-color': "black",
            'font-weight': "normal"
          },
          marker: {
            type: "circle"
          },
          'toggle-action': "remove",
          'minimize': true,
          'icon': {
            'line-color': "#9999ff"
          },
          'max-items': 8,
          'overflow': "scroll",
          mediaRules: [{
            maxWidth: 600,
            x: '40%',
            y: '45%',
            collapse: false
          }]
        },
        tooltip: {
          borderRadius: '3px',
          text: '%v% %t',
          htmlMode: true
        }
      };

      let correct = {
        text: 'Correct',
        backgroundColor: '#34ab50',
      };
      let notAttempted = {
        text: 'Not Attempted',
        // backgroundColor: '#f0afaf',
        backgroundColor: 'lightgray',
      };
      let incorrect = {
        text: 'Incorrect',
        backgroundColor: '#bf4744',
      };

      let pieChartTitles = [
        'GPT-4o mini',
        'o1-mini',
        'GPT-4o',
        'o1-preview'
      ];
      let pieChartValues = [
        [8.6, 8.1, 38.2, 42.7], // correct
        [0.9, 28.5, 1.0, 9.2], // not attempted
        [90.5, 63.4, 60.8, 48.1], // incorrect
      ];

      let pieCharts = [];
      for (let i = 0; i < pieChartValues[0].length; i++) {
        pieCharts.push({
          ...pieDefaults,
          title: {
            text: pieChartTitles[i]
          },
          series: [{
              values: [pieChartValues[0][i]],
              ...correct
            },
            {
              values: [pieChartValues[1][i]],
              ...notAttempted
            },
            {
              values: [pieChartValues[2][i]],
              ...incorrect
            }
          ]
        });
      }

      // render chart
      zingchart.render({
        id: 'myChart',
        data: {
          layout: '1x4',
          graphset: [...pieCharts]
        },
        height: '100%',
        width: '100%',
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <h1>OpenAI Model Veracity</h1>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

h1 {
  font-family: sans-serif;
  text-align: center;
}

html,
body {
  background-color: white;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100% - 1em);
}

.chart--container {
  margin: 0 auto;
  max-height: 500px;
  min-height: 150px;
  width: 100%;
  height: calc(100% - 3.33em);
}

.zc-ref {
  display: none;
}

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  zingchart.loadModules('patterns');

  let pieDefaults = {
    type: 'pie',
    legend: {
      x: '44%',
      y: '10%',
      collapse: true,
      shared: true,
      draggable: true,
      'border-width': 1,
      'border-color': "gray",
      'border-radius': "5px",
      header: {
        text: "Legend",
        'font-family': "sans-serif",
        'font-size': 12,
        'font-color': "black",
        'font-weight': "normal"
      },
      marker: {
        type: "circle"
      },
      'toggle-action': "remove",
      'minimize': true,
      'icon': {
        'line-color': "#9999ff"
      },
      'max-items': 8,
      'overflow': "scroll",
      mediaRules: [{
        maxWidth: 600,
        x: '40%',
        y: '45%',
        collapse: false
      }]
    },
    tooltip: {
      borderRadius: '3px',
      text: '%v% %t',
      htmlMode: true
    }
  };

  let correct = {
    text: 'Correct',
    backgroundColor: '#34ab50',
  };
  let notAttempted = {
    text: 'Not Attempted',
    // backgroundColor: '#f0afaf',
    backgroundColor: 'lightgray',
  };
  let incorrect = {
    text: 'Incorrect',
    backgroundColor: '#bf4744',
  };

  let pieChartTitles = [
    'GPT-4o mini',
    'o1-mini',
    'GPT-4o',
    'o1-preview'
  ];
  let pieChartValues = [
    [8.6, 8.1, 38.2, 42.7], // correct
    [0.9, 28.5, 1.0, 9.2], // not attempted
    [90.5, 63.4, 60.8, 48.1], // incorrect
  ];

  let pieCharts = [];
  for (let i = 0; i < pieChartValues[0].length; i++) {
    pieCharts.push({
      ...pieDefaults,
      title: {
        text: pieChartTitles[i]
      },
      series: [{
          values: [pieChartValues[0][i]],
          ...correct
        },
        {
          values: [pieChartValues[1][i]],
          ...notAttempted
        },
        {
          values: [pieChartValues[2][i]],
          ...incorrect
        }
      ]
    });
  }

  // render chart
  zingchart.render({
    id: 'myChart',
    data: {
      layout: '1x4',
      graphset: [...pieCharts]
    },
    height: '100%',
    width: '100%',
  });
});