Mobile app development
Overview
Advanced Charts and Trading Platform are compatible with mobile devices.
The chart layout adapts to the device type and screen size by resizing/hiding elements. This means that the following features may not be supported on smaller devices:
- The right widget bar that includes Watchlist, Details, News, and Data Window widgets.
- Marks on the time scale.
- The Account Manager at the bottom bar. Instead, the Account Manager will be available through the Broker button () in the legend. You can disable this button by adding the
broker_button
featureset to thedisabled_features
array.
The library supports mouse and touch-based inputs and recognizes single and multi-touch gestures. It is available on all major browsers such as Google Chrome, Firefox, Safari, Opera, and Microsoft Edge, including their mobile versions.
Mobile specifics
You should be aware of the following mobile specifics:
- The chart legend shows a close price and percentage change. Open, high, and low prices and indicator values are displayed in tracking mode only. To activate this mode, a user should long tap on the bar and make a single tap on the chart to exit.
- You should implement the
getQuotes
andsubscribeQuotes
methods to display data in the legend if you use Trading Platform. Otherwise, NaN values will appear in the legend instead of the expected data. - The percentage change of the price is calculated based on intraday quotes, not the previous bar.
- Only one price scale can be displayed on the chart.
The following featuresets affect chart behavior on mobile devices:
show_zoom_and_move_buttons_on_touch
enables zoom in/out and scroll left/right buttons.horz_touch_drag_scroll
andvert_touch_drag_scroll
enable horizontal/vertical page scroll.pinch_scale
enables scaling using pinch gestures.
Mobile applications
You can embed Advanced Charts and Trading Platform inside a mobile application using a web view. Native wrappers for iOS or Android are not provided. Consider the following integration examples:
- TradingView Advanced Charts Android Integration Example
- TradingView Advanced Charts iOS (Swift version) Integration Example
- TradingView Advanced Charts React-Native Integration Example
We do not have an example of integrating the library with Flutter currently. You can consider the How to Build a Native Communication Bridge in Flutter with WebView and JavaScript article.
Frequently Asked Questions
The library Android Integration Example demonstrates a white screen. How to fix it?
Make sure that the WebView version installed on your device supports ES6. We recommend you update to the latest WebView version to avoid potential issues. For more information, refer to the WebView for Android article.
What is the minimum Android version required for the library?
The minimum Android version for the library is Android 5.0 (Lollipop). Starting from this version, you can update WebView separately to the Android platform. For more information, refer to the WebView for Android article.
How to check the library for errors?
- For Android applications, use Chrome DevTools. Refer to the Remote debug Android devices and Remote debugging WebViews articles for more information.
- For iOS applications, use Safari Web Inspector. Refer to the Enabling Web Inspector article for more information.
How to transfer data from native code to JavaScript code?
You should use a mechanism that allows the execution of arbitrary code. Refer to the following articles for more information:
- evaluateJavascript for Android
- evaluateJavaScript for iOS
You can consider the following projects as examples of interaction between the native code and JavaScript library:
How to open links in the built-in mobile browser instead of the web view on Android?
You can use the shouldOverrideUrlLoading
method to implement custom logic for loading URLs. To open a built-in web browser, you should use Intent
with the ACTION_VIEW
parameter.
- Java
- Kotlin
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://www.tradingview.com/"));
startActivity(browserIntent);
val browserIntent = Intent(Intent.ACTION_VIEW, Uri.parse("https://www.tradingview.com/"))
startActivity(browserIntent)
You can also open links in Google Chrome Custom Tabs. Refer to Implementation guide for more information.
How to resolve a truncated price and time scales issue?
This issue occurs only when emulating a mobile device on a Chrome-based browser. However, when using the charts on an actual mobile device, both the price and time scales will display correctly.