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 :
- Tutorial Menggunakan Grafik HighCharts Dengan PHP MySQL
- Membuat Grafik Highcharts Dengan Php MyAdmin Menggunakan Ajax Bootsrap
- Cara Menggunakan Google Chart (Pie Chart) Menggunakan PHP MySQL
- 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.