Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Membuat Grafik Chart Dengan Canvas HTML5

Fitur istimewa dalam HTML5 ini adalah canvas. Dengan adanya canvas, kita bisa membuat sebuah objek dengan bantuan JavaScript. Objek tersebut bisa berupa animasi dan sebagainya. Jadi dengan adanya canvas ini, kita tidak memerlukan flash lagi untuk membuat sebuah objek beranimasi. Untuk contoh canvas saat ini adalah membuat sebuah grafik chart dengan HTML5. Untuk demonya, anda bisa lihat dihalaman demo dibawah ini.

Demo Grafik Chart HTML5

Bagaimana hasilnya ? Keren kan ? Anda bisa lihat sendiri source codenya. Disitu tidak ada komponen flash yang berperan dalam pembuatan grafik chart tadi. Untuk lebih jelasnya, silahkan lihat dan praktekkan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Grafik Chart Dengan Canvas HTML5</title>
<style type="text/css">
body {
  background: #eee;
  font-size: 0.8em;
}
.utama {
  width: 50%;
  margin: 50px 25%;
}
.bersih  {
  clear: both;
}
h1, p {
  text-align: justify;
}
a, a:hover, a:link, a:active {
  color: #000;
  display: block;
  text-decoration: none;
}
</style>
</head>
<body>
<article class="utama">
<h1>Grafik Chart Dengan HTML5</h1>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/mc/js/lib/meteorcharts-v0.0.11.min.js"></script>
    <script defer="defer"> 
      function Grapher(config) {
        var minX = config.minX,
            minY = config.minY,
            maxX = config.maxX,
            maxY = config.maxY,
            increment = config.increment,
            equations = config.equations,
            len = equations.length,
            series = [],
            n, x, equation, currentSeries, func, y;
  
        for (n=0; n<len; n++) {
          equation = equations[n];
          func = equation.func;
          currentSeries = {
            title: equation.title,
            points: []
          };
  
          for (x=minX; x<=maxX; x+=increment) {
            y = Math.round(func(x) * 100) / 100;
            if (y>=minY && y<=maxY) {
              currentSeries.points.push({
                x: Math.round(x * 100) / 100,
                y: y
              });
            }
          }
  
          series.push(currentSeries);
        }
  
        return series;
      }
  
      var series = Grapher({
        minX: -10,
        minY: -10,
        maxX: 10,
        maxY: 10,
        increment: 0.1,
        equations: [
          {
            title: 'y=5*sin(x)',
            func: function(x) {
              return 5 * Math.sin(x);
            }
          },
  
          {
            title: 'y=x^2',
            func: function(x) {
              return x * x;
            }
          },
     
          {
            title: 'y=x',
            func: function(x) {
              return 1 * x;
            }
          }
        ]
      });
  
      var lineChart = new MeteorCharts.Line({
        container: 'container',
        view: {
          width: 580,
          height: 300,
          xAxis: {
            formatter: 'Number',
            min: -10,
            max: 10
          },
          yAxis: {
            min: -10,
            max: 10
          }
        },
        model: {
          title: 'Grapher',
          series: series
        }
      });
    </script>
<section style="clear:both;margin:10px"></section>
<p><a href="http://www.nurulimam.com/2014/01/membuat-grafik-chart-dengan-canvas-html5.html">Kembali ke Tutorial</a></p>
</article>
  </body>
</html>

Silahkan simpan dengan nama grafik.html kemudian jalankan di web browser anda. Untuk contoh lainnya akan saya publish di artikel mendatang. Tunggu kelanjutannya yah :)

27 Comments

  1. Anthonie EkaReply

    wah keren banget mas gambar grafiknya bisa digerakkan juga, tapi kodenya kok panjang banget yah, sip deh :)

    • Nurul ImamReply

      Dikit kok, kan di load di server luar javascriptnya :p

  2. Index ApkReply

    haduh mas, lihat banyak kode kek gitu jadi pusing palak saya…

    • Nurul ImamReply

      Minum obat sakit kepala dulu sebelum liat kodenya :D

  3. IchaLReply

    web ini sy bukmark dulu untuk jadikan bhn belajar

    • Nurul ImamReply

      Silahkan mas, semoga bermanfaat :)

  4. Mizz AizaReply

    terima kasih sharing berkenaan cara membuat grafik chart dengan canvas ini.. :D

    • Nurul ImamReply

      Sama-sama :D

  5. Intan SudibjoReply

    sepertinya kodenya mudah dan ringan dimuat ya mas :)

    • Nurul ImamReply

      Ringan tapi mumet :D

  6. RirinReply

    wah bagus mas grafi nya. Bisa buat pelajaran matematika ya :D

    • Nurul ImamReply

      Iya bagi yang doyan maenan Aljabar Linier, Kalkulus, dsb :D

  7. NehandReply

    Artikel yang sangat menarik untuk belajar bagi pemula sperti sya mas..trmksh mas.

    • Nurul ImamReply

      Sama-sama :)

  8. AgriReply

    1 kata. WOW!
    tapi yg masih saya bikin bgnung sama jsnya itu.. defer="defer" soalnya yg ini baru nengok mas. apa gk ada masalah sama error validasi html5 ya?

    • Nurul ImamReply

      Ayo apa itu defer :D
      Cari tau donk :p
      Error sih pasti mas :D

  9. andi lutfi hidayatReply

    wah sangat menambah engetahuan sy mas tentang html5 lg :)

    • Nurul ImamReply

      SIlahkan dipelajari lebih lanjut lagi :)

  10. TegarReply

    Kasih keterangan dong mas supaya tau fungsi ini untuk apa ? tapi thanks untuk sriptnya

    • Nurul ImamReply

      Fungsinya buat bikin grafik chart :D

  11. apriyantoReply

    cara input datanya gmna ya gan ??

    bingung nie ??

    • Nurul ImamReply

      Itu tinggal kita maen mau statis apa dinamis :)

  12. EffendiReply

    Mas….. grafiknya keren banget, tapi aku kesulitan membuatnya untuk ditrapkan ke data yang lain.
    Bisa ga tlong dibuatkan contoh. misal grafik jumlah penduduk laki perempuan di suatu wilayah atau yang lain.
    sebagai input data bisa di lihat di web (http;//pasuruankota.bps.go.id).
    Trims banyak atas bantuannya. sbagai info untuk mas. Blognya sangat keren dan banyak ilmu yg aku dapat. pokoknya oke banget deh.

    • Nurul ImamReply

      Tinggal disesuaikan saja mas, di combine dengan php buat pemrosesan datanya :)

  13. bi4siReply

    maaf mas kenapa grafiknya gak bisa tampil ya?
    gimana caranya bisa tampil di localhost?

  14. andrianReply

    bro cara membuat grafik matematika seperti daigram cartesian itu gimana ya ?

  15. nopriReply

    bro cara buat grafik diagram kartesian gimana ya ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>