Skip to main content

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 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 and subscribeQuotes 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 and vert_touch_drag_scroll enable horizontal/vertical page scroll.
  • pinch_scale enables scaling using pinch gestures.

Gestures​

  • Single tap allows you to drag the chart left or right, as well as to adjust the price and time scales by dragging.
  • Long press
    • Opens a context menu for price and time scales.
    • Enables crosshair mode on the chart, allowing for detailed data visualization in the legend.
  • Double tap activates line movement mode: double-click a line, then drag it vertically to adjust its position.

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:

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?​

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:

You can consider the following projects as examples of interaction between the native code and JavaScript library:

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.

Intent browserIntent = new 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.