From Dark and Darker Wiki

No edit summary
(Attempting to make y-axis label larger.)
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<div>
<div style="aspect-ratio: 2">
    <canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas>
<canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas>
</div>
</div>
<script>
<script>
    var junkData    = JSON.parse('<!--{$junkData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var datasets  = JSON.parse('<!--{$datasets|escape:'quotes'}-->');
    var poorData     = JSON.parse('<!--{$poorData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var title     ='<!--{$title|default:''|escape:'quotes'}-->';
    var commonData  = JSON.parse('<!--{$commonData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var yAxisLabel= '<!--{$yAxisLabel|default:''|escape:'quotes'}-->';
    var uncommonData = JSON.parse('<!--{$uncommonData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var xAxisLabel= '<!--{$xAxisLabel|default:''|escape:'quotes'}-->';
    var rareData    = JSON.parse('<!--{$rareData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var gridColor = '<!--{$gridColor|default:'#80808080'|escape:'quotes'}-->';
    var epicData    = JSON.parse('<!--{$epicData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var axisColor = '<!--{$axisColor|escape:'quotes'}-->';
    var legendaryData= JSON.parse('<!--{$legendaryData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var fontColor = '<!--{$fontColor|default:'white'|escape:'quotes'}-->';
    var uniqueData  = JSON.parse('<!--{$uniqueData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
    var artifactData = JSON.parse('<!--{$artifactData|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
    var junkColor = '#323232';
    var poorColor = '#646464';
    var commonColor = '#DEDEDE';
    var uncommonColor = '#62BE0B';
    var rareColor = '#4A9BD1';
    var epicColor = '#AD5AFF';
    var legendaryColor = '#F7A22D';
    var uniqueColor = '#E3D88C';
    var artifactColor = '#E3D88C';
    var gridColor = '<!--{$gridColor|escape:'quotes'}-->';
    var axisColor = '<!--{$axisColor|escape:'quotes'}-->';
    var fontColor = '<!--{$fontColor|escape:'quotes'}-->';


    if (gridColor == "") {
var hasTitle = true
        gridColor = "lightgray";
if (title == "") {
    }
hasTitle = false;
}


    if (axisColor == "") {
var yAxisBoolean = true
        axisColor = gridColor;
if (yAxisLabel == "") {
    }
yAxisBoolean = false;
}


    if (fontColor == "") {
var xAxisBoolean = true
        fontColor = "gray";
if (xAxisLabel == "") {
    }
xAxisBoolean = false;
}


    new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
if (axisColor == "") {
        type: "line",
axisColor = gridColor;
        axisX: {
}
            gridColor: "orange",
 
        },
new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
        data: {
type: "line",
            labels: ["0","50","100","150","200","250","300","350","400","450","500"],
data: datasets,
            datasets: [
options: {
                {
plugins:{
                    data: junkData,
title: {
                    borderColor: junkColor,
display:hasTitle,
                    backgroundColor: junkColor,
text:title,
                    fill: false,
font: {
                },{
size: 22
                    data: poorData,
},
                    borderColor: poorColor,
color:fontColor
                    backgroundColor: poorColor,
},
                    fill: false,
legend: {
                },
display:hasTitle
                {
},
                    data: commonData,
tooltip: {
                    borderColor: commonColor,
callbacks: {
                    backgroundColor: commonColor,
label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw}`)
                    fill: false,
}
                },
}
                {
},
                    data: uncommonData,
scales: {
                    borderColor: uncommonColor,
y: {
                    backgroundColor: uncommonColor,
title:{
                    fill: false,
text:yAxisLabel,
                },
display:yAxisBoolean,
                {
color:fontColor,
                    data: rareData,
font: {
                    borderColor: rareColor,
size: 18
                    backgroundColor: rareColor,
}
                    fill: false,
},
                },
grid: {
                {
color:gridColor
                    data: epicData,
},
                    borderColor: '#AD5AFF',
border: {
                    backgroundColor: '#AD5AFFAA',
color:axisColor
                },
},
                {
ticks: {
                    data: legendaryData,
color:fontColor,
                    borderColor: '#F7A22D',
font: {
                    backgroundColor: '#F7A22DAA',
size: 18
                },
}
                {
}
                    data: uniqueData,
},
                    borderColor: uniqueColor,
x: {
                    backgroundColor: uniqueColor,
title:{
                    fill: false,
text:xAxisLabel,
                },
display:xAxisBoolean,
                {
color:fontColor
                    data: artifactData,
},
                    borderColor: artifactColor,
grid: {
                    backgroundColor: artifactColor,
color:gridColor
                    fill: false,
},
                },
border: {
            ],
color:axisColor
        },
},
        options: {
ticks: {
            plugins:{
color:fontColor
                legend: {
}
                    display: false
}
                }
}
            },
}
            scales: {
});
                y: {
                    grid: {
                        color: gridColor
                    },
                    border: {
                        color: axisColor
                    },
                    ticks: {
                        color: fontColor
                    }
                },
                x: {
                    type: 'linear',
                    grid: {
                        color: gridColor
                    },
                    border: {
                        color: axisColor
                    },
                    ticks: {
                        color: fontColor
                    }
                }
            }
        }
    });
</script></includeonly><noinclude>
</script></includeonly><noinclude>
{{#widget:TestChart|uniqueId=TestChart|legendaryData=[{"x": 0,"y": 1},{"x": 1,"y": 1.014},{"x": 3,"y": 1.04},{"x": 4,"y": 1.054},{"x": 5,"y": 1.067},{"x": 6,"y": 1.081},{"x": 8,"y": 1.107},{"x": 9,"y": 1.121},{"x": 13,"y": 1.173},{"x": 14,"y": 1.187},{"x": 24,"y": 1.317},{"x": 25,"y": 1.329},{"x": 29,"y": 1.381},{"x": 30,"y": 1.393},{"x": 32,"y": 1.419},{"x": 33,"y": 1.431},{"x": 34,"y": 1.444},{"x": 35,"y": 1.456},{"x": 37,"y": 1.482},{"x": 39,"y": 1.506},{"x": 40,"y": 1.519},{"x": 41,"y": 1.531},{"x": 42,"y": 1.544},{"x": 44,"y": 1.568},{"x": 45,"y": 1.581},{"x": 47,"y": 1.605},{"x": 48,"y": 1.618},{"x": 64,"y": 1.81},{"x": 65,"y": 1.821},{"x": 67,"y": 1.845},{"x": 68,"y": 1.856},{"x": 70,"y": 1.88},{"x": 71,"y": 1.891},{"x": 73,"y": 1.915},{"x": 74,"y": 1.926},{"x": 75,"y": 1.938},{"x": 77,"y": 1.96},{"x": 78,"y": 1.972},{"x": 79,"y": 1.983},{"x": 80,"y": 1.995},{"x": 82,"y": 2.017},{"x": 83,"y": 2.029},{"x": 87,"y": 2.073},{"x": 88,"y": 2.085},{"x": 99,"y": 2.206},{"x": 100,"y": 2.216},{"x": 103,"y": 2.249},{"x": 104,"y": 2.259},{"x": 106,"y": 2.281},{"x": 107,"y": 2.291},{"x": 109,"y": 2.313},{"x": 110,"y": 2.323},{"x": 111,"y": 2.334},{"x": 112,"y": 2.344},{"x": 113,"y": 2.355},{"x": 114,"y": 2.365},{"x": 115,"y": 2.376},{"x": 117,"y": 2.396},{"x": 118,"y": 2.407},{"x": 121,"y": 2.437},{"x": 122,"y": 2.448},{"x": 127,"y": 2.498},{"x": 128,"y": 2.509},{"x": 132,"y": 2.549},{"x": 133,"y": 2.558},{"x": 139,"y": 2.618},{"x": 140,"y": 2.627},{"x": 142,"y": 2.647},{"x": 143,"y": 2.656},{"x": 145,"y": 2.676},{"x": 146,"y": 2.685},{"x": 147,"y": 2.695},{"x": 148,"y": 2.704},{"x": 149,"y": 2.714},{"x": 150,"y": 2.723},{"x": 151,"y": 2.733},{"x": 152,"y": 2.742},{"x": 153,"y": 2.752},{"x": 155,"y": 2.77},{"x": 156,"y": 2.78},{"x": 159,"y": 2.807},{"x": 160,"y": 2.817},{"x": 174,"y": 2.943},{"x": 175,"y": 2.951},{"x": 178,"y": 2.978},{"x": 179,"y": 2.986},{"x": 181,"y": 3.004},{"x": 182,"y": 3.012},{"x": 183,"y": 3.021},{"x": 184,"y": 3.029},{"x": 185,"y": 3.038},{"x": 186,"y": 3.046},{"x": 187,"y": 3.055},{"x": 188,"y": 3.063},{"x": 189,"y": 3.072},{"x": 190,"y": 3.08},{"x": 191,"y": 3.089},{"x": 193,"y": 3.105},{"x": 194,"y": 3.114},{"x": 198,"y": 3.146},{"x": 199,"y": 3.155},{"x": 209,"y": 3.235},{"x": 210,"y": 3.242},{"x": 214,"y": 3.274},{"x": 215,"y": 3.281},{"x": 217,"y": 3.297},{"x": 218,"y": 3.304},{"x": 220,"y": 3.32},{"x": 221,"y": 3.327},{"x": 222,"y": 3.335},{"x": 223,"y": 3.342},{"x": 224,"y": 3.35},{"x": 225,"y": 3.357},{"x": 226,"y": 3.365},{"x": 228,"y": 3.379},{"x": 229,"y": 3.387},{"x": 231,"y": 3.401},{"x": 232,"y": 3.409},{"x": 237,"y": 3.444},{"x": 238,"y": 3.452},{"x": 244,"y": 3.494},{"x": 245,"y": 3.5},{"x": 250,"y": 3.535},{"x": 251,"y": 3.541},{"x": 253,"y": 3.555},{"x": 254,"y": 3.561},{"x": 256,"y": 3.575},{"x": 257,"y": 3.581},{"x": 258,"y": 3.588},{"x": 259,"y": 3.594},{"x": 260,"y": 3.601},{"x": 261,"y": 3.607},{"x": 262,"y": 3.614},{"x": 263,"y": 3.62},{"x": 264,"y": 3.627},{"x": 266,"y": 3.639},{"x": 267,"y": 3.646},{"x": 270,"y": 3.664},{"x": 271,"y": 3.671},{"x": 286,"y": 3.761},{"x": 287,"y": 3.766},{"x": 290,"y": 3.784},{"x": 291,"y": 3.789},{"x": 292,"y": 3.795},{"x": 293,"y": 3.8},{"x": 295,"y": 3.812},{"x": 296,"y": 3.817},{"x": 297,"y": 3.823},{"x": 298,"y": 3.828},{"x": 299,"y": 3.834},{"x": 301,"y": 3.844},{"x": 302,"y": 3.85},{"x": 304,"y": 3.86},{"x": 305,"y": 3.866},{"x": 308,"y": 3.881},{"x": 309,"y": 3.887},{"x": 322,"y": 3.952},{"x": 323,"y": 3.956},{"x": 326,"y": 3.971},{"x": 327,"y": 3.975},{"x": 329,"y": 3.985},{"x": 330,"y": 3.989},{"x": 331,"y": 3.994},{"x": 332,"y": 3.998},{"x": 334,"y": 4.008},{"x": 336,"y": 4.016},{"x": 337,"y": 4.021},{"x": 338,"y": 4.025},{"x": 339,"y": 4.03},{"x": 341,"y": 4.038},{"x": 342,"y": 4.043},{"x": 345,"y": 4.055},{"x": 346,"y": 4.06},{"x": 358,"y": 4.108},{"x": 359,"y": 4.111},{"x": 363,"y": 4.127},{"x": 364,"y": 4.13},{"x": 366,"y": 4.138},{"x": 367,"y": 4.141},{"x": 368,"y": 4.145},{"x": 369,"y": 4.148},{"x": 370,"y": 4.152},{"x": 371,"y": 4.155},{"x": 372,"y": 4.159},{"x": 373,"y": 4.162},{"x": 374,"y": 4.166},{"x": 375,"y": 4.169},{"x": 376,"y": 4.173},{"x": 379,"y": 4.182},{"x": 380,"y": 4.186},{"x": 383,"y": 4.195},{"x": 384,"y": 4.199},{"x": 394,"y": 4.229},{"x": 395,"y": 4.231},{"x": 399,"y": 4.243},{"x": 400,"y": 4.245},{"x": 402,"y": 4.251},{"x": 403,"y": 4.253},{"x": 405,"y": 4.259},{"x": 406,"y": 4.261},{"x": 407,"y": 4.264},{"x": 408,"y": 4.266},{"x": 409,"y": 4.269},{"x": 410,"y": 4.271},{"x": 411,"y": 4.274},{"x": 413,"y": 4.278},{"x": 414,"y": 4.281},{"x": 416,"y": 4.285},{"x": 417,"y": 4.288},{"x": 421,"y": 4.296},{"x": 422,"y": 4.299},{"x": 431,"y": 4.317},{"x": 432,"y": 4.318},{"x": 436,"y": 4.326},{"x": 437,"y": 4.327},{"x": 439,"y": 4.331},{"x": 440,"y": 4.332},{"x": 442,"y": 4.336},{"x": 443,"y": 4.337},{"x": 444,"y": 4.339},{"x": 445,"y": 4.34},{"x": 446,"y": 4.342},{"x": 447,"y": 4.343},{"x": 448,"y": 4.345},{"x": 450,"y": 4.347},{"x": 451,"y": 4.349},{"x": 453,"y": 4.351},{"x": 454,"y": 4.353},{"x": 458,"y": 4.357},{"x": 459,"y": 4.359},{"x": 467,"y": 4.367},{"x": 468,"y": 4.367},{"x": 473,"y": 4.372},{"x": 474,"y": 4.372},{"x": 476,"y": 4.374},{"x": 477,"y": 4.374},{"x": 479,"y": 4.376},{"x": 480,"y": 4.376},{"x": 481,"y": 4.377},{"x": 482,"y": 4.377},{"x": 483,"y": 4.378},{"x": 484,"y": 4.378},{"x": 485,"y": 4.379},{"x": 487,"y": 4.379},{"x": 488,"y": 4.38},{"x": 490,"y": 4.38},{"x": 491,"y": 4.381},{"x": 496,"y": 4.381},{"x": 497,"y": 4.382},{"x": 500,"y": 4.382}]|epicData=[{"x": 0,"y": 1},{"x": 1,"y": 1.012},{"x": 3,"y": 1.034},{"x": 4,"y": 1.046},{"x": 5,"y": 1.057},{"x": 6,"y": 1.069},{"x": 8,"y": 1.091},{"x": 9,"y": 1.103},{"x": 12,"y": 1.136},{"x": 13,"y": 1.148},{"x": 18,"y": 1.203},{"x": 19,"y": 1.215},{"x": 26,"y": 1.292},{"x": 27,"y": 1.302},{"x": 32,"y": 1.357},{"x": 33,"y": 1.367},{"x": 36,"y": 1.4},{"x": 37,"y": 1.41},{"x": 38,"y": 1.421},{"x": 39,"y": 1.431},{"x": 41,"y": 1.453},{"x": 42,"y": 1.463},{"x": 43,"y": 1.474},{"x": 44,"y": 1.484},{"x": 45,"y": 1.495},{"x": 46,"y": 1.505},{"x": 47,"y": 1.516},{"x": 49,"y": 1.536},{"x": 50,"y": 1.547},{"x": 51,"y": 1.557},{"x": 52,"y": 1.568},{"x": 55,"y": 1.598},{"x": 56,"y": 1.609},{"x": 61,"y": 1.659},{"x": 62,"y": 1.67},{"x": 69,"y": 1.74},{"x": 70,"y": 1.749},{"x": 75,"y": 1.799},{"x": 76,"y": 1.808},{"x": 79,"y": 1.838},{"x": 80,"y": 1.847},{"x": 82,"y": 1.867},{"x": 83,"y": 1.876},{"x": 84,"y": 1.886},{"x": 85,"y": 1.895},{"x": 86,"y": 1.905},{"x": 87,"y": 1.914},{"x": 88,"y": 1.924},{"x": 89,"y": 1.933},{"x": 90,"y": 1.943},{"x": 91,"y": 1.952},{"x": 92,"y": 1.962},{"x": 94,"y": 1.98},{"x": 95,"y": 1.99},{"x": 97,"y": 2.008},{"x": 98,"y": 2.018},{"x": 101,"y": 2.045},{"x": 102,"y": 2.055},{"x": 116,"y": 2.181},{"x": 117,"y": 2.189},{"x": 121,"y": 2.225},{"x": 122,"y": 2.233},{"x": 124,"y": 2.251},{"x": 125,"y": 2.259},{"x": 126,"y": 2.268},{"x": 127,"y": 2.276},{"x": 129,"y": 2.294},{"x": 130,"y": 2.302},{"x": 131,"y": 2.311},{"x": 132,"y": 2.319},{"x": 133,"y": 2.328},{"x": 135,"y": 2.344},{"x": 136,"y": 2.353},{"x": 137,"y": 2.361},{"x": 138,"y": 2.37},{"x": 141,"y": 2.394},{"x": 142,"y": 2.403},{"x": 145,"y": 2.427},{"x": 146,"y": 2.436},{"x": 159,"y": 2.54},{"x": 160,"y": 2.547},{"x": 164,"y": 2.579},{"x": 165,"y": 2.586},{"x": 167,"y": 2.602},{"x": 168,"y": 2.609},{"x": 170,"y": 2.625},{"x": 171,"y": 2.632},{"x": 172,"y": 2.64},{"x": 173,"y": 2.647},{"x": 174,"y": 2.655},{"x": 175,"y": 2.662},{"x": 176,"y": 2.67},{"x": 177,"y": 2.677},{"x": 178,"y": 2.685},{"x": 180,"y": 2.699},{"x": 181,"y": 2.707},{"x": 183,"y": 2.721},{"x": 184,"y": 2.729},{"x": 186,"y": 2.743},{"x": 187,"y": 2.751},{"x": 205,"y": 2.877},{"x": 206,"y": 2.883},{"x": 209,"y": 2.904},{"x": 210,"y": 2.91},{"x": 212,"y": 2.924},{"x": 213,"y": 2.93},{"x": 214,"y": 2.937},{"x": 215,"y": 2.943},{"x": 216,"y": 2.95},{"x": 217,"y": 2.956},{"x": 218,"y": 2.963},{"x": 219,"y": 2.969},{"x": 220,"y": 2.976},{"x": 221,"y": 2.982},{"x": 222,"y": 2.989},{"x": 223,"y": 2.995},{"x": 224,"y": 3.002},{"x": 226,"y": 3.014},{"x": 227,"y": 3.021},{"x": 230,"y": 3.039},{"x": 231,"y": 3.046},{"x": 248,"y": 3.148},{"x": 249,"y": 3.153},{"x": 252,"y": 3.171},{"x": 253,"y": 3.176},{"x": 255,"y": 3.188},{"x": 256,"y": 3.193},{"x": 257,"y": 3.199},{"x": 258,"y": 3.204},{"x": 260,"y": 3.216},{"x": 261,"y": 3.221},{"x": 262,"y": 3.227},{"x": 263,"y": 3.232},{"x": 264,"y": 3.238},{"x": 266,"y": 3.248},{"x": 267,"y": 3.254},{"x": 269,"y": 3.264},{"x": 270,"y": 3.27},{"x": 272,"y": 3.28},{"x": 273,"y": 3.286},{"x": 278,"y": 3.311},{"x": 279,"y": 3.317},{"x": 287,"y": 3.357},{"x": 288,"y": 3.361},{"x": 293,"y": 3.386},{"x": 294,"y": 3.39},{"x": 297,"y": 3.405},{"x": 298,"y": 3.409},{"x": 299,"y": 3.414},{"x": 300,"y": 3.418},{"x": 302,"y": 3.428},{"x": 303,"y": 3.432},{"x": 304,"y": 3.437},{"x": 305,"y": 3.441},{"x": 306,"y": 3.446},{"x": 307,"y": 3.45},{"x": 308,"y": 3.455},{"x": 310,"y": 3.463},{"x": 311,"y": 3.468},{"x": 313,"y": 3.476},{"x": 314,"y": 3.481},{"x": 316,"y": 3.489},{"x": 317,"y": 3.494},{"x": 323,"y": 3.518},{"x": 324,"y": 3.523},{"x": 329,"y": 3.543},{"x": 330,"y": 3.546},{"x": 336,"y": 3.57},{"x": 337,"y": 3.573},{"x": 340,"y": 3.585},{"x": 341,"y": 3.588},{"x": 342,"y": 3.592},{"x": 343,"y": 3.595},{"x": 345,"y": 3.603},{"x": 346,"y": 3.606},{"x": 347,"y": 3.61},{"x": 348,"y": 3.613},{"x": 349,"y": 3.617},{"x": 350,"y": 3.62},{"x": 351,"y": 3.624},{"x": 352,"y": 3.627},{"x": 353,"y": 3.631},{"x": 355,"y": 3.637},{"x": 356,"y": 3.641},{"x": 359,"y": 3.65},{"x": 360,"y": 3.654},{"x": 364,"y": 3.666},{"x": 365,"y": 3.67},{"x": 376,"y": 3.703},{"x": 377,"y": 3.705},{"x": 381,"y": 3.717},{"x": 382,"y": 3.719},{"x": 384,"y": 3.725},{"x": 385,"y": 3.727},{"x": 387,"y": 3.733},{"x": 388,"y": 3.735},{"x": 389,"y": 3.738},{"x": 390,"y": 3.74},{"x": 391,"y": 3.743},{"x": 392,"y": 3.745},{"x": 393,"y": 3.748},{"x": 394,"y": 3.75},{"x": 395,"y": 3.753},{"x": 396,"y": 3.755},{"x": 397,"y": 3.758},{"x": 399,"y": 3.762},{"x": 400,"y": 3.765},{"x": 403,"y": 3.771},{"x": 404,"y": 3.774},{"x": 409,"y": 3.784},{"x": 410,"y": 3.787},{"x": 417,"y": 3.801},{"x": 418,"y": 3.802},{"x": 423,"y": 3.812},{"x": 424,"y": 3.813},{"x": 427,"y": 3.819},{"x": 428,"y": 3.82},{"x": 430,"y": 3.824},{"x": 431,"y": 3.825},{"x": 432,"y": 3.827},{"x": 433,"y": 3.828},{"x": 434,"y": 3.83},{"x": 435,"y": 3.831},{"x": 436,"y": 3.833},{"x": 437,"y": 3.834},{"x": 438,"y": 3.836},{"x": 439,"y": 3.837},{"x": 440,"y": 3.839},{"x": 442,"y": 3.841},{"x": 443,"y": 3.843},{"x": 445,"y": 3.845},{"x": 446,"y": 3.847},{"x": 450,"y": 3.851},{"x": 451,"y": 3.853},{"x": 463,"y": 3.865},{"x": 464,"y": 3.865},{"x": 468,"y": 3.869},{"x": 469,"y": 3.869},{"x": 471,"y": 3.871},{"x": 472,"y": 3.871},{"x": 474,"y": 3.873},{"x": 475,"y": 3.873},{"x": 476,"y": 3.874},{"x": 477,"y": 3.874},{"x": 478,"y": 3.875},{"x": 479,"y": 3.875},{"x": 480,"y": 3.876},{"x": 481,"y": 3.876},{"x": 482,"y": 3.877},{"x": 483,"y": 3.877},{"x": 484,"y": 3.878},{"x": 486,"y": 3.878},{"x": 487,"y": 3.879},{"x": 490,"y": 3.879},{"x": 491,"y": 3.88},{"x": 495,"y": 3.88},{"x": 496,"y": 3.881},{"x": 500,"y": 3.881}]|color=orange}}}}
==Parameters==
<pre style="width:fit-content">uniqueId</pre>
*Determines canvas element name
*Name needs to be unique if multiple widgets are to be displayed on the same page.
<pre style="width:fit-content">title</pre>
*Default: <code>""</code> empty string
*String of text to display as the title of the graph.
*This string also serves to detemine whether or not to show the legend.<br>If no string is provided both the legend and the title are not displayed.
<pre style="width:fit-content">yAxisLabel</pre>
*Default: <code>""</code> empty string
*String of text to display on the y-axis. Text is rendered vertically, bottom to top.
<pre style="width:fit-content">xAxisLabel</pre>
*Default: <code>""</code> empty string
*String of text to display on the x-axis.
<pre style="width:fit-content">gridColor</pre>
*Default: <code>'#80808080'</code>
<pre style="width:fit-content">axisColor</pre>
*Default: <code>var gridColor</code>
<pre style="width:fit-content">fontColor</pre>
*Default: <code>'white'</code>
<pre style="width:fit-content">datasets</pre>
*String of text that is a properly formatted JSON object when parsed by <code>JSON.parse()</code>. The graph will not render if an improper JSON object is passed.<br>It is recommended that you check the string format with some sort of tool like JSON Lint, or whatever else you prefer.
*The first set of objects within the JSON object must have the "datasets" array pair.
**For specifics on what options and formats are available, please see [https://www.chartjs.org/docs/3.9.1/general/accessibility.html the official Chart.js documentation.]
 
 
==Example==
<pre>{{#widget:DatasetsChart|uniqueId=ExampleChart|title=This String Becomes the Title|datasets={"labels":[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],"datasets":[{"label":"Luck Grade 5","data":[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],"borderColor":"#AD5AFF","backgroundColor":"#AD5AFFBB"},{"label":"Luck Grade 6","data":[1, 3, 6, 8, 10, 12, 14, 16, 18, 20, 22],"borderColor":"#F7A22D","backgroundColor":"#F7A22DBB"}]}|}}</pre>
{{#widget:DatasetsChart|uniqueId=ExampleChart|title=This String Becomes the Title|datasets={"labels":[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],"datasets":[{"label":"Luck Grade 5","data":[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],"borderColor":"#AD5AFF","backgroundColor":"#AD5AFFBB"},{"label":"Luck Grade 6","data":[1, 3, 6, 8, 10, 12, 14, 16, 18, 20, 22],"borderColor":"#F7A22D","backgroundColor":"#F7A22DBB"}]}|}}
</noinclude>
</noinclude>

Latest revision as of 07:19, 23 June 2024

Parameters

uniqueId
  • Determines canvas element name
  • Name needs to be unique if multiple widgets are to be displayed on the same page.
title
  • Default: "" empty string
  • String of text to display as the title of the graph.
  • This string also serves to detemine whether or not to show the legend.
    If no string is provided both the legend and the title are not displayed.
yAxisLabel
  • Default: "" empty string
  • String of text to display on the y-axis. Text is rendered vertically, bottom to top.
xAxisLabel
  • Default: "" empty string
  • String of text to display on the x-axis.
gridColor
  • Default: '#80808080'
axisColor
  • Default: var gridColor
fontColor
  • Default: 'white'
datasets
  • String of text that is a properly formatted JSON object when parsed by JSON.parse(). The graph will not render if an improper JSON object is passed.
    It is recommended that you check the string format with some sort of tool like JSON Lint, or whatever else you prefer.
  • The first set of objects within the JSON object must have the "datasets" array pair.


Example

{{#widget:DatasetsChart|uniqueId=ExampleChart|title=This String Becomes the Title|datasets={"labels":[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],"datasets":[{"label":"Luck Grade 5","data":[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],"borderColor":"#AD5AFF","backgroundColor":"#AD5AFFBB"},{"label":"Luck Grade 6","data":[1, 3, 6, 8, 10, 12, 14, 16, 18, 20, 22],"borderColor":"#F7A22D","backgroundColor":"#F7A22DBB"}]}|}}

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