From Dark and Darker Wiki

No edit summary
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<div>
<div>
   <canvas id="myChart"></canvas>
   <canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
<script>
   const ctx = document.getElementById('myChart');
   var data = JSON.parse('<!--{$data|escape:'quotes'}-->');
 
  var color = '<!--{$color|escape:'quotes'}-->';
   new Chart(ctx, {
  var gridColor = '<!--{$gridColor|escape:'quotes'}-->';
     type: 'bar',
  var axisColor = '<!--{$axisColor|escape:'quotes'}-->';
  var fontColor = '<!--{$fontColor|escape:'quotes'}-->';
 
  if (color == "") {
    color = "black";
  }
  if (gridColor == "") {
    gridColor = "lightgray";
  }
  if (axisColor == "") {
    axisColor = gridColor;
  }
  if (fontColor == "") {
    fontColor = "gray";
  }
 
  var max = data[0]["x"];
  var min = max;
  for (let i = 0; i < data.length; i++) {
    if (data[i]["x"] > max) {
      max = data[i]["x"];
    }
    if (data[i]["x"] < min) {
      min = data[i]["x"];
    }
  }
 
  var range = [...Array(max - min + 1).keys()].map((x) => x + min);
 
   new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
     type: "line",
    axisX: {
      gridColor: "orange",
    },
     data: {
     data: {
       labels: <!--{$labels|escape:'javascript'}-->,
       labels: range,
       datasets: [{
       datasets: [
        label: '# of Votes',
        {
        data: <!--{$data|escape:'javascript'}-->,
          data: data,
         borderWidth: 1
          borderColor: color,
       }]
          backgroundColor: color,
          fill: false,
         },
       ],
     },
     },
     options: {
     options: {
      plugins:{
        legend: {
          display: false
        }
      },
       scales: {
       scales: {
         y: {
         y: {
           beginAtZero: true
           grid: {
            color: gridColor
          },
          border: {
            color: axisColor
          },
          ticks: {
            color: fontColor
          }
        },
        x: {
          type: 'linear',
          grid: {
            color: gridColor
          },
          border: {
            color: axisColor
          },
          ticks: {
            color: fontColor
          }
         }
         }
       }
       }
     }
     }
   });
   });
 
 
</script>
</script>
</includeonly>
</includeonly>

Latest revision as of 06:24, 7 January 2023

Retrieved from "http://darkanddarker.wiki.spellsandguns.com/index.php?title=Widget:Chart&oldid=1708"