Sunday, January 8, 2023

Membuat Graphic Menggunakan Javascript - chart.js


 

1. Download chart.js pada pada situs : github.com


2. Extrak ganti menjadi chartjs, ini untuk memudahkan atau menyerderhanakan pemanggilan


3. Buat file : index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat Graphic Menggunakan Javascript - chart.js </title>

<script type="text/javascript" src="chartjs/Chart.js"></script>

</head>

<body>

<style type="text/css">

body{

font-family: roboto;

}

</style>

<h2>Membuat Grafik Menggunakan Chart.js </h2>

<div style="width: 500px;height: 500px">

<canvas id="myChart"></canvas>

</div>

<script>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

datasets: [{

label: '# of Votes',

data: [12, 19, 3, 23, 2, 3],

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

],

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

],

borderWidth: 1

}]

},

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

}

});

</script>

</body>

</html>


Hasil : 



Memunculkan Simbol & Emoji Pada OS Mac

  Memunculkan Simbol & Emoji  1. Buka aplikasi Pages / Notes pada Macbook. 2. Klik pada Menubar Edit --> Pilih Emoji and Symbols a...