Quanist Coding

JavaScript has a built-in Math.random() method for creating random variables. I've built a simulator to test whether this method creates uniform random variables. The JavaScript 's Math.random() method originally creates a random number from 0-1 with 1 excluded. In order to visualize the results, I multiply 100 random numbers created by the Math.random() method by 10 and round them down. Start Stop Change the Range of Random Variables Created By Math.random() The JavaSript Math.random() method creats continuous uniform random variable ranged from 0 to 1 with 1 excluded. If we can expand its range buy multiplying the Math.random() method with a scale parameter. For example, we can use Math.ranomd()*10 to generate continuous uniform random variable ranged from 0 to 10 with 10 excluded. We can also move the lower and upper bounds by adding a parameter to the Math.random() method. For exampe, 10 + Math.random()*10 creates continuous uniform random varia...

If you use a input and grab the value inside from it, the value, even if it's a number will be converted to a string. One way to solve this problem is add parseInt or parseFloat to the values. Playgrond This is supposed to be a calculater, however, the results are worng since javascript treats even number inputs as numbers.  input1: input2: Add Result: Also this can cause problems when using Vue v-modal and vue methods when data is supposed to be a number which needs to react to both the v-model and method.  Example Click the "add" button then click the input up or down arrow to change input value, then click the "add" button again to see the effect. <div id="app"> {{ count }} <br /> <input type="number" v-model="count" /> <br /> <button v-on:click="add">Add</button> </div> <script> var app = new Vue({ el: '#app', data: { count: 1 }...

Chartjs has its buinl-in update methond which can be used to add or remove data point and update the chart. But I have found another way to do so, which is to remove the canvas where the chart is graphed and create the same canvas. If we don't remove the canvas before we redraw, we may see this error "Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused." Sample HTML Code <div id="chartwrap"> <canvas height="400" id="myChart" width="400"></canvas> </div> <script> chartwrap.removeChild(document.getElementById('myChart')); var newchart = document.createElement('canvas'); newchart.setAttribute('id','myChart'); chartwrap.appendChild(newchart); </script> Adding Data: Add Date and Update Chart Using orgainc update method <script src="https://cdn.jsdelivr.net/npm/chart.js"></scrip...

Chartjs ticks font size falls under the namespace of options/scales/x (or y) /ticks/font/size. Legend font size fall under options/plugins/legend/labels/font/size. Playground By clicking the "Get Sample Codes" button, there will be a line chart with input attributes and its HTML codes. Ticks (y-axis) Font Size: Legend Font Size: Get Sample Code

Chart js tooltip is in the options/plugins namespace. We can change font size in the titleFont or bodyFont object under the options/plugins namespace.  The below example is a bar chart with tooltip titleFont set to 30 nd bodyFont set to 40. Example Sample code const myChart = new Chart(ctx, { type: 'bar', data: { labels: [1,2,3,4,5], datasets: [{ label: 'Daily Tracking Errors', data: [12, 19, 3, 5, 2, 3], backgroundColor: ['rgba(54, 162, 235, 0.2)'], borderColor: ['rgba(54, 162, 235, 1)'], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true, ticks: { callback: function(value, index, values) { return + value + '%'; ...

The default Chart js doughnut and pie Charts is responsive, which means the whole charts would take up all the screen with a width of 100%. One simple way to adjust their size is to wrap them around with a div tag which has width set to, say 50%.  If you want to change their position, you can also adjust the div tag's margin-left style attribute. If your pie chart has a 50% width and you also want to position it in the middle, make sure you subtract the 50% from 1 and divide by 2 to get the value for margin-left.  For thie example, 1 - 50% = 50%, 50% / 2 = 25%, value for margin left is 25%. Sample Code <div style = "width:50%;margin-left:25%"> <canvas id="myChart"></canvas> </div> Playaround Size (between 0% and 100%): 50 % Margin-left (between 0% and 100%): 25 %