{"id":20893515,"url":"https://github.com/Lightning-Chart/lcjs-android-example","last_synced_at":"2025-05-12T22:33:09.597Z","repository":{"id":98723573,"uuid":"293813755","full_name":"Arction/lcjs-android-example","owner":"Arction","description":"LightningChart JS Android usage example","archived":false,"fork":false,"pushed_at":"2024-08-05T09:50:08.000Z","size":35843,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-05T11:30:56.787Z","etag":null,"topics":["android","example","js-android","lcjs","lightningchart-js","webview"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Arction.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-08T13:09:07.000Z","updated_at":"2024-08-05T09:50:12.000Z","dependencies_parsed_at":"2024-08-05T11:30:01.452Z","dependency_job_id":null,"html_url":"https://github.com/Arction/lcjs-android-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-android-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-android-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-android-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-android-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arction","download_url":"https://codeload.github.com/Arction/lcjs-android-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225156947,"owners_count":17429701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","example","js-android","lcjs","lightningchart-js","webview"],"created_at":"2024-11-18T10:16:05.605Z","updated_at":"2025-05-12T22:33:02.906Z","avatar_url":"https://github.com/Arction.png","language":"Kotlin","readme":"# LightningChart JS x Android template\n\nThis is a minimal example of using LightningChart JS in an Android application.\n\nThe project was bootstrapped with [Android Studio](https://developer.android.com/studio) 2022.3.1.20, Kotlin DSL, API 24.\n\n## Running the application\n\nPlease refer to Android Studio materials on instructions how to run Android applications.\n\n**Emulators may not be supported!** Many emulators still don't support WebGL as well as browsers do, so they may be completely non-functional with LightningChart JS or may perform very badly.\nThis repository was tested only using locally connected physical Android phones.\n\nIn order to run the application, you need to [get a license key](https://lightningchart.com/js-charts/#license-key) and supply it in [index.js file](https://github.com/Arction/lcjs-android-example/blob/master/app/src/main/assets/index.js).\n\nhttps://github.com/Arction/lcjs-android-example/assets/55391673/71d67f8f-af67-4fde-8b4b-8935059253ba\n\n## How can LightningChart JS be used in an Android application?\n\nLightningChart JS is a JavaScript library for high-performance data visualization.\nIt is an extensive suite of data visualization features and provides the greatest performance in the world of JavaScript charts. Read more general information about LightningChart JS [here](https://lightningchart.com/js-charts/docs/).\n\nLightningChart JS can be embedded into Android applications by placing a separate **Web application** (HTML/CSS/JS) into the code base and loading it inside a `WebView` component.\n\nThe main application is still developed like any Android application, but the charting parts are isolated to a separate application, which is developed in `JavaScript` or `TypeScript`. Data is generally connected to the Android application, and transferred from there to the Web application. This example shows an example how this can be done.\n\nFor more information about using Web-based content in Android application, you may refer to materials maintained by Android.\nSee \"Web-based content\" in Android developer materials, for example. https://developer.android.com/develop/ui/views/layout/webapps\n\n## Step-by-step guide to adding LightningChart JS to an Android application\n\nHere you can find the steps that were done to create this project template, so you can follow them for any existing Android application.\n\nAll LightningChart JS related code changes have been isolated to a single commit, which you can conveniently view [here](https://github.com/Arction/lcjs-android-example/commit/c84cc6570f81edb766531998d94f4002684b5528).\n\n### 1. Add charting Web application to code base\n\nIn the example these are static HTML/CSS/JS files.\nAlternatively, you could dynamically build these files from a more complicated code base for the Web application, and utilize `Node.js` modules, for example.\n\nThese files can be found under `app/src/main/assets`:\n\n- [`index.html`](https://github.com/Arction/lcjs-android-example/blob/master/app/src/main/assets/index.html)\n- [`index.js`](https://github.com/Arction/lcjs-android-example/blob/master/app/src/main/assets/index.js)\n- `lcjs.iife.js`\n  - This is the IIFE bundle of LightningChart JS library, downloaded from [NPM](https://www.npmjs.com/package/@lightningchart/lcjs?activeTab=code)\n\n### 2. Add required project configurations for using LightningChart JS in WebView\n\n- Add `implementation(\"androidx.webkit:webkit:1.8.0\")` to [`app/build/gradle.kts`](https://github.com/Arction/lcjs-android-example/blob/master/app/build.gradle.kts). Required for using WebView.\n- Add `\u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e` to [`app/src/main/AndroidManifest.xml`](https://github.com/Arction/lcjs-android-example/blob/master/app/src/main/AndroidManifest.xml). Required for LightningChart JS developer/trial license verification.\n\n### 3. Display the Web application in a WebView\n\nIn your applications Activity where you want to display the chart(s), create a `WebView` and load the `index.html` asset.\n\n```kotlin\nclass MainActivity : ComponentActivity() {\n    private lateinit var webView: WebView\n    override fun onCreate(savedInstanceState: Bundle?) {\n        webView = WebView(this)\n        webView.settings.javaScriptEnabled = true\n        webView.settings.domStorageEnabled = true\n        setContentView(webView)\n        webView.loadUrl(\"file:///android_asset/index.html\")\n    }\n}\n```\n\nMake sure both JavaScript and DOM storage are enabled for the WebView! (as seen above)\n\nThis should result in the Web application becoming visible in the Android application.\nYou can inspect the JavaScript code running with the \"Logcat\" tab. If there are license or other errors in JavaScript run-time, they should popup there.\n\nPlease note that the `index.js` file found in this repository does not display any chart until data is actually sent to the WebView.\n\n### 4. Communicate with the Web application and send data to charts\n\nThere are a number of different methods of communicating between the Android application and the Web application.\n**This example utilizes the `loadUrl` method to trigger a function call in JavaScript side with parameters injected as strings from Android side.**\n\n```js\n// Function definition in Web application.\n//      channel = string\n//      xValues = list of x values\n//      yValues = list of y values\nfunction appendData(channel, xValues, yValues) {}\n```\n\n```kotlin\n// Trigger JavaScript function from Android application and send XY data points over as parameters.\nval channel = 0\nval xValues = listOf(1000, 2000, 3000, 4000, 5000)\nval yValues = listOf(10.0, 20.0, 15.0, 25.0, 30.0)\nwebView.loadUrl(\"javascript:appendData($channel, ${JSONArray(xValues)}, ${JSONArray(yValues)})\")\n```\n\n## More information\n\nLearn more about LightningChart JS and Android [here](https://lightningchart.com/js-charts/docs/frameworks/android/).\n\nLearn more about connecting to real-time data sources [here](https://lightningchart.com/js-charts/docs/basic-topics/real-time-data/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLightning-Chart%2Flcjs-android-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLightning-Chart%2Flcjs-android-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLightning-Chart%2Flcjs-android-example/lists"}