ribbon iwa

Cara Singkat Menggunakan AnyCharts Pada Website Anda

Selamat siang sobat blogger kembali lagi dengan kami kali ini kami akan menjelaskan bagaimana menggunakan AnyChart pada website anda atau tepatnya intoduction menggunakan anychart pada website anda.



Sebelumnya kami belum pernah sama sekali menggunakan AnyChart ini pada project atau website kami, tetapi setelah melihat dan mempelajari tutorial dan source code pada website resminya, kami rasa ini tidak begitu sulit.

Kali ini kami akan menjelaskan bagaimana memsang pada website, dan pada postingan-postingan berikutnya kami akan mencoba menghubungkan AnyChart ini dengan PHP dan MySQL.

Tetapi ssebelum kami melangkah terlalu jauh kami ingin memberikan penjelasan lengkap apa itu AnyChart. Menurut dari sumber resminya "AnyChart adalah solusi berbasis JavaScript (HTML5) fleksibel yang memungkinkan pengembang untuk menanamkan diagram dan dasbor yang interaktif dan hebat ke dalam proyek web, mandiri atau seluler".

Read More :
  1. Tutorial Menggunakan Grafik HighCharts Dengan PHP MySQL
  2. Membuat Grafik Highcharts Dengan Php MyAdmin Menggunakan Ajax Bootsrap
  3. Cara Menggunakan Google Chart (Pie Chart) Menggunakan PHP MySQL
  4. Cara Menggunakan Google Chart (Line Chart) Pada PHP

Kami juga ingin mengatakan bahwa penggunaan AnyCharts ini sama persis denga highchart dan google chart. Langsung saja berikut cara menggunakan AnyCharts dalam website anda.

source code berikut adalah source utama yang perlu anda gunakan ketika ingin menggunakan AnyCharts ini.


                      <!doctype html>
                     <html>
                     <head>
                      <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
                      <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
                      <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
                      <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
                      <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />
                    </head>
                    <body>
                      <div id="container"></div>
                      <script type="text/javascript">
                        anychart.onDocumentReady(function() {
  // create column chart
  var chart = anychart.column();

  // turn on chart animation
  chart.animation(true);

  // set chart title text settings
  chart.title('Top 10 Cosmetic Products by Revenue');

  // create area series with passed data
  var series = chart.column([
    ['Mangga', '5000'],
    ['Timun', '6000'],
    ['Nangka', '10000'],
    ['Nanas', '3000'],
    ['Apple', '2000'],
    ['Semangka', '14360'],
    ['Durian', '7670'],
    ['Lobe-Lobe', '13210'],
    ['Kaluatere', '9980']
    ]);

  // set series tooltip settings
  series.tooltip().titleFormat('{%X}');

  series.tooltip()
  .position('center-top')
  .anchor('center-bottom')
  .offsetX(0)
  .offsetY(5)
  .format('${%Value}{groupsSeparator: }');

  // set scale minimum
  chart.yScale().minimum(0);

  // set yAxis labels formatter
  chart.yAxis().labels().format('${%Value}{groupsSeparator: }');

  // tooltips position and interactivity settings
  chart.tooltip().positionMode('point');
  chart.interactivity().hoverMode('by-x');

  // axes titles
  chart.xAxis().title('Product');
  chart.yAxis().title('Revenue');

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});
</script>
</body>
</html>
 

Berikutnya kita membuat templatenya sebagai tempat untuk AnyChartnya ini, kami menggunakan template yang sudah biasa kami gunakan. Buat file dengan nama index.html kemudian masukkan source dibawah ini, Perlu kalian ketahui source di bawah ini sudah digabungkan dengan source Anycharts di atas.

 <!DOCTYPE html>
<html>
<head>
 <title>AnyCharts</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <script src="bootstrap/js/bootstrap.min.js"></script>
 
 <!--code install AnyCharts-->
 <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.4.1/themes/dark_earth.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />
  <style>
    #container {
      width: 100%;
      height: 500px;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
 <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
    <ul class="nav navbar-nav">
     <li class="active"><a href="index.html">Home</a></li>
    </ul>
   </div>
  </div>
 </nav>
 <div class="container">
  <div class="row">
      <div id="container"></div>

    </div>
  </div>
        <script type="text/javascript">
        anychart.onDocumentReady(function() {
          anychart.theme('darkEarth');
  // create column chart
  var chart = anychart.column();

  // turn on chart animation
  chart.animation(true);

  // set chart title text settings
  chart.title('Top 10 Buah-Buahan Enak Yang ada Dikampungku');

  // create area series with passed data
  var series = chart.column([
    ['Mangga', '5000'],
    ['Timun', '6000'],
    ['Nangka', '10000'],
    ['Nanas', '3000'],
    ['Apple', '2000'],
    ['Semangka', '14360'],
    ['Durian', '7670'],
    ['Lobe-Lobe', '13210'],
    ['Kaluatere', '9980']
    ]);

  // set series tooltip settings
  series.tooltip().titleFormat('{%X}');

  series.tooltip()
  .position('center-top')
  .anchor('center-bottom')
  .offsetX(0)
  .offsetY(5)
  .format('Rp{%Value}{groupsSeparator: }');

  // set scale minimum
  chart.yScale().minimum(0);

  // set yAxis labels formatter
  chart.yAxis().labels().format('Rp{%Value}{groupsSeparator: }');

  // tooltips position and interactivity settings
  chart.tooltip().positionMode('point');
  chart.interactivity().hoverMode('by-x');

  // axes titles
  chart.xAxis().title('Product');
  chart.yAxis().title('Revenue');

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});
</script>
</body>
</html> 

Kalian bisa melihat hasilnya langsung pada gambar di atas, kalian juga bisa mendownload source codenya dibawah ini.


Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, Jangan lupa mengunjungi wabsite ini karena kami akan membahas hal yang sama di artikel berikutnya tetapi kami ingin mnecoba memperluas pembahasan dengan menggunakan PHP dan MySQL.

Oh ya kalian juga bisa mencari dan mencoba menggunakan AnyCharts langsung di website resminya yaitu AnyChart.com disana sangat banyak tutorial dan jenis-jenis chart yang beragam.


SUBSCRIBE TO OUR NEWSLETTER

close