From Dark and Darker Wiki

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


<script>
<script>
 
   var data = JSON.parse('<!--{$data|escape:'quotes'}-->');
   var data = JSON.parse('<!--{$data|escape:'quotes'}-->')
  var label = '<!--{$label|escape:'quotes'}-->';
   var color = '<!--{$color|escape:'quotes'}-->';
   var color = '<!--{$color|escape:'quotes'}-->';
   var backgroundColor = '<!--{$backgroundColor|escape:'quotes'}-->';
   var gridColor = '<!--{$gridColor|escape:'quotes'}-->';
  var axisColor = '<!--{$axisColor|escape:'quotes'}-->';
  var fontColor = '<!--{$fontColor|escape:'quotes'}-->';
    
    
   if (color == "") {
   if (color == "") {
Line 17: Line 15:
   }
   }
   
   
  if (gridColor == "") {
    gridColor = "lightgray";
  }
  if (axisColor == "") {
    axisColor = gridColor;
  }
  if (fontColor == "") {
    fontColor = "gray";
  }
 
   var max = data[0]["x"];
   var max = data[0]["x"];
   var min = max;
   var min = max;
Line 30: Line 40:
   var range = [...Array(max - min + 1).keys()].map((x) => x + min);
   var range = [...Array(max - min + 1).keys()].map((x) => x + min);
    
    
   new Chart(document.getElementById('<!--{$id|escape:'html'}-->'), {
   new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
     type: "line",
     type: "line",
     axisX: {
     axisX: {
Line 40: Line 50:
         {
         {
           data: data,
           data: data,
          label: label,
           borderColor: color,
           borderColor: color,
           backgroundColor: color,
           backgroundColor: color,
Line 48: Line 57:
     },
     },
     options: {
     options: {
      plugins:{
        legend: {
          display: false
        }
      },
       scales: {
       scales: {
         y: {
         y: {
           grid: {
           grid: {
             color: 'white'
             color: gridColor
           },
           },
           border: {
           border: {
             color: 'white'
             color: axisColor
          },
          ticks: {
            color: fontColor
           }
           }
         },
         },
         x: {
         x: {
          type: 'linear',
           grid: {
           grid: {
             color: 'white',
             color: gridColor
           },
           },
           border: {
           border: {
             color: 'white'
             color: axisColor
          },
          ticks: {
            color: fontColor
           }
           }
         }
         }
Line 68: Line 89:
     }
     }
   });
   });
 
  document.getElementById('<!--{$id|escape:'html'}-->').style.backgroundColor = backgroundColor;
    
    
    
    
</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"