Menampilkan Chart Peta pada Android Menggunakan Highcharts -Android

Platform android sudah ada diberbagai perangkat elektronik membuat kita ingin menampilkan segala hal. Namun kemudahan pembuatan dan ketersediaan library dalam menyajikan konten yang menarik masih kalah dengan platform web. Platform web yang saat ini  sudah didukung dengan HTML5 dan CSS 3.

Chart Peta merupakan salah satu hal yang mudah dibuat pada platform web namun sulit diplatform android dengan bahasa java-nya. Oleh karena itu disini akan memaparkan Chart Peta / Map Chart (menggunakan bahasa web) ditampilkan ke platform android. Libray Chart peta yang digunakan yaitu highcharts / highmaps.

Berikut langkah-langkah / cara nya

1. Pastikan sudah ada source  code  highcharts  / highmaps yang sudah bisa di-run dan berhasil tampil pada browser jika belum dapat lihat di:

https://komputasistat.blogspot.co.id/2016/09/cara-menggunakan-highmap-highchart-dari.html

2. Buka Android Studio  dan buat direktori  assets (direktori assets akan digunakan untuk menyimpan source code file html dan javascript highchart ).

Gambar 1. Direktori Assets

3. Copy paste source code highchart ke direktori assets

Gambar 2. Copy paste source code ke  assets

4.  MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView)findViewById(R.id.webView1);
        Button button5=(Button)  findViewById(R.id.button5);
        WebSettings webSetting = webView.getSettings();
        webSetting.setBuiltInZoomControls(true);
        webSetting.setJavaScriptEnabled(true);
        webSetting.setAllowFileAccessFromFileURLs(true);
        webSetting.setAllowUniversalAccessFromFileURLs(true);
        webView.setWebChromeClient(new WebChromeClient());
        webView.loadUrl("file:///android_asset/hallo.html");
        button5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("file:///android_asset/hallo.html");


            }
        });
    }

}

kode dibawah digunakan agar kita bisa mengakses file diinternal android walaupun protocol yang digunakan harusnya menggunakan http /https

 webSetting.setAllowFileAccessFromFileURLs(true);
        webSetting.setAllowUniversalAccessFromFileURLs(true);

5.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.windows.highmaps1.MainActivity">



    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_weight="1">



    </WebView>

    <Button
        android:id="@+id/button5"

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Random" />

</LinearLayout>

hasil:

gif 1. hasil

Selamat bereksperimen
Sekian dan terima kasih

Artikel Terkait Android