Cara Membuat Multiple Line Chart | PHP,MySQL, Chart JS

Cara Membuat Multiple Line Chart | PHP,MySQL, Chart JS

Views 5/14/2019 11:30:00 am
Multiple line chart adalah sebuah grafik yang dibuat untuk membandingkan sebuah nilai dari beberapa label tertentu. Apabila chart biasanya hanya mewakil sebuah hasil dari sebuah label data, kalau line chart ini mewakili banyak hasil seperti hasil dari daerah tertentu.

Daripada bingung, mari kita buat saja Multiple line chart menggunakan php,mysql dan chart js.

Pertama kita harus menentukan datanya terlebih dahulu, disini saya sudah menyiapkan database dengan nama learnings dan tabel bernama tes_chart.

Seperti inilah strukturnya
Lalu inilah datanya
Saya membuat 24 data yang isinya Januari sampai Juni untuk tiap-tiap kota.

Selanjutnya mari ke skrip PHP nya


<?php
//koneksi
$koneksi=new mysqli('localhost','root','','learnings');

//untuk mengambil nilai pencapaian solo
$sql_solo="select pencapaian from tes_chart where kota='solo'";
$query_solo=mysqli_query($koneksi,$sql_solo);

//untuk mengambil nilai pencapaian jakarta
$sql_jakarta="select pencapaian from tes_chart where kota='jakarta'";
$query_jakarta=mysqli_query($koneksi,$sql_jakarta);

//untuk mengambil nilai pencapaian makasar
$sql_makasar="select pencapaian from tes_chart where kota='makasar'";
$query_makasar=mysqli_query($koneksi,$sql_makasar);

//untuk mengambil nilai pencapaian medan
$sql_medan="select pencapaian from tes_chart where kota='medan'";
$query_medan=mysqli_query($koneksi,$sql_medan);

//untuk mengambil bulan dari januari sampai juni
$sql_label="select * from tes_chart Group by bulan order by id ";
$query_label=mysqli_query($koneksi,$sql_label);
?>  

Seperti yang ada dikomentar // tersebut, itu adalah penjelasan dari masing-masing fungsi kodingannya yang akan digunakan untuk membuat multiple line chart

Selanjutnya mari kita memasuki ke kodingan htmlnya untuk membuat tampilan dari multiple line chart


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>chart</title>
    <script src="chart/chart.min.js"></script>
</head>
<body>
    <div class="t" style="width:600px;background-color:skyblue">
    <center><h3 style="padding:10px">Chart Pencapaian Beras Antar Kota</h3></center>
        <canvas id="kotaChart"></canvas>
    </div>

kodingan diatas, kita memanggil chart.min.js yang merupakan library untuk membuat chart, lalu perhatikan <canvas id="kotaChart"></canvas> , codingan tersebut merupakan tempat chart yang akan kita buat

Oh iya untuk library chart.min.js, kalian bisa download disini

Selanjutnya mari ke kodingan Script Js nya untuk membuat chart dan mengisikan data dari php yang telah kita buat tadi


 <script>
 

var kotaCanvas = document.getElementById("kotaChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontColor = "black";
Chart.defaults.global.defaultFontSize = 12;

var dataFirst = {
    label: "Solo",
    data: [<?php foreach($query_solo as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBorderColor: 'red',
    pointBackgroundColor: 'red',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect'
  };

var dataSecond = {
    label: "Jakarta",
    data: [<?php foreach($query_jakarta as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'blue',
    backgroundColor: 'transparent',
    pointBorderColor: 'blue',
    pointBackgroundColor: 'blue',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'cross'
  };

  var datathird = {
    label: "makasar",
    data: [<?php foreach($query_makasar as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'green',
    backgroundColor: 'transparent',
    pointBorderColor: 'green',
    pointBackgroundColor: 'green',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect',
  };

  var four = {
    label: "medan",
    data: [<?php foreach($query_medan as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'purple',
    backgroundColor: 'transparent',
    pointBorderColor: 'purple',
    pointBackgroundColor: 'purple',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
    
  };

var kotaData = {
  labels:  [<?php foreach($query_label as $key){  echo  '"'.$key['bulan'].'",';}?> ] ,
  datasets: [dataFirst, dataSecond,datathird,four]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
         xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 0,
        }
      }]
         
     },

    
};

var lineChart = new Chart(kotaCanvas, {
  type: 'line',
  data: kotaData,
  options: chartOptions
});

    </script>
Penjelasannya


var kotaCanvas = document.getElementById("kotaChart");
kotaCanvas merupakan variabel yang dibuat untuk menampung id dari kotaChart yang ada di html sebelumnya

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontColor = "black";
Chart.defaults.global.defaultFontSize = 12;

Ini merupakan pengaturan global pada chart, yang mengatur jenis font, warna dan ukuran font

var dataFirst = {
    label: "Solo",
    data: [<?php foreach($query_solo as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBorderColor: 'red',
    pointBackgroundColor: 'red',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect'
  };

Disana kamu bisa memperhatikan beberapa kodingan, dataFirst merupakan variabel yang dibuat untuk menampung chart dari solo

Pada kodingan diatas, kamu bisa fokus melihat ke label dan data.
label merupakan nama dari perwakilan data solo yang nantinya isinya pencapaian dari solo dari bulan januari hingga juni
data: didalam data kita membuat sebuah perulangan php foreach, kamu bisa melihat $query_solo, itu sama dengan yang ada di kodingan php sebelumnya. Disini data dari solo mulai dari januari hingga juni akan diambil nilai pencapaiannya

untuk kodingan dibawahnya, itu merupakan pengaturan dari chart line solo atau pengaturan tentang garis solo, seperti misalnya pointStyle: react, nanti akan membentuk persegi dalam setiap pointnya

untuk dataSecond dan selanjutnya, penjelasannya sama dengan dataFirst

var kotaData = {
  labels:  [<?php foreach($query_label as $key){  echo  '"'.$key['bulan'].'",';}?> ] ,
  datasets: [dataFirst, dataSecond,datathird,four]
};
Pada kodingan diatas, kita membuat variabel kotaData untuk menggabungkan semua data antara semua kota yang dipilih tadi.
labels ini akan berisikan bulan januari sampai juni yang mana merupakan garis x dari chart yang mana dalam setiap kota memiliki bulan yang sama
datasets ini merupakan kumpulan dari data-data yang dikumpulkan, mulai dari solo hingga medan

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
         xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 0,
        }
      }]
         
     },

    
};

Kodingan diatas merupakan pengaturan dari chart yang dibuat, yang mana labelnya yang ada di sumbu x bisa berubah 90 derajat bila tulisannya saling berdekatan, dan pengaturan lainnya

var lineChart = new Chart(kotaCanvas, {
  type: 'line',
  data: kotaData,
  options: chartOptions
});

Kodingan diatas merupakan inti dari pembuatan chart, ini merupakan aturan standar dalam pembuatan chart pada chart.js.

kamu bisa memperhatikan type, itu merupakan tipe chart yang biasanya berupa line, bar dll
Untuk kotaData, itu data dari yang kita buat sebelumnya sedangkan
options, itu merupakan options yang telah kita buat juga
kotaCanvas, merupakan variabel yang akan menghubungkan dengan id kotaChart


Untuk melihat codingan fullnya kamu bisa melihat dibawah ini

<?php
//koneksi
$koneksi=new mysqli('localhost','root','','learnings');

//untuk mengambil nilai pencapaian solo
$sql_solo="select pencapaian from tes_chart where kota='solo'";
$query_solo=mysqli_query($koneksi,$sql_solo);

//untuk mengambil nilai pencapaian jakarta
$sql_jakarta="select pencapaian from tes_chart where kota='jakarta'";
$query_jakarta=mysqli_query($koneksi,$sql_jakarta);

//untuk mengambil nilai pencapaian makasar
$sql_makasar="select pencapaian from tes_chart where kota='makasar'";
$query_makasar=mysqli_query($koneksi,$sql_makasar);

//untuk mengambil nilai pencapaian medan
$sql_medan="select pencapaian from tes_chart where kota='medan'";
$query_medan=mysqli_query($koneksi,$sql_medan);

//untuk mengambil bulan dari januari sampai juni
$sql_label="select * from tes_chart Group by bulan order by id ";
$query_label=mysqli_query($koneksi,$sql_label);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>chart</title>
    <script src="chart/chart.min.js"></script>
</head>
<body>
    <div class="t" style="width:600px;background-color:skyblue">
    <center><h3 style="padding:10px">Chart Pencapaian Beras Antar Kota</h3></center>
        <canvas id="kotaChart"></canvas>
    </div>
    <script>
 
//membuat variabel kotaCanvas untuk menampung id='kotaChart'
var kotaCanvas = document.getElementById("kotaChart");

//settingan untuk jenis tulisan, warna maupun ukuran font untut chart
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontColor = "black";
Chart.defaults.global.defaultFontSize = 12;

//dataFirst merupakan variabel yang dibuat untuk menampung isi dari nilai pencapaian solo, ini berhubungan dengan koding php yang dibuat
var dataFirst = {
    label: "Solo",
    data: [<?php foreach($query_solo as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBorderColor: 'red',
    pointBackgroundColor: 'red',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect'
  };

var dataSecond = {
    label: "Jakarta",
    data: [<?php foreach($query_jakarta as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'blue',
    backgroundColor: 'transparent',
    pointBorderColor: 'blue',
    pointBackgroundColor: 'blue',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'cross'
  };

  var datathird = {
    label: "makasar",
    data: [<?php foreach($query_makasar as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'green',
    backgroundColor: 'transparent',
    pointBorderColor: 'green',
    pointBackgroundColor: 'green',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect',
  };

  var four = {
    label: "medan",
    data: [<?php foreach($query_medan as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'purple',
    backgroundColor: 'transparent',
    pointBorderColor: 'purple',
    pointBackgroundColor: 'purple',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
    
  };

var kotaData = {
  labels:  [<?php foreach($query_label as $key){  echo  '"'.$key['bulan'].'",';}?> ] ,
  datasets: [dataFirst, dataSecond,datathird,four]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
         xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 0,
        }
      }]
         
     },

    
};

var lineChart = new Chart(kotaCanvas, {
  type: 'line',
  data: kotaData,
  options: chartOptions
});

    </script>
</body>
</html>

Dan hasilnya nanti akan seperti ini

Apabila kalian ingin melihat sendiri seluruh kodingan diatas, kalian bisa mendownloadnya disini download atau apabila ingin melihat html nya dan chart.min.js kamu bisa mendownload di github saya disini download github

2 comments

avatar
Balas
Allya Agung delete 2 February 2020 at 16:03

mas kok saya coba tapi punya saya ga keluar chartnya kenapa ya ini mas bisa tolong dibantu mungkin

avatar
Balas
Roni delete 30 September 2020 at 10:52

suee ngibul-ngibul
chartnya kaga tampil


EmoticonEmoticon

Subscribe to: Post Comments (Atom)