search

tradingview / charting-library-examples

Examples of Charting Library integrations with other libraries, frameworks and data transports
MIT License
1.44k stars 768 forks source link

Flutter sample #81

Open zhangyu0218 opened 5 years ago

zhangyu0218 commented 5 years ago

Is there an tradingview example of flutter?

kirchet commented 5 years ago

No, we don't have such example

timocov commented 5 years ago

Feel free to make a PR with such example!

buckcao commented 5 years ago

can you support flutter? flutter is fashion

Pascaltallarida commented 5 years ago

Hello, we will work on it using Flutter, have you finally worked on it?

timocov commented 5 years ago

have you finally worked on it?

No.

TinkerBuild commented 4 years ago

hi can u do it in flutter?

makedonsky94 commented 4 years ago

Unfortunately, current state of WebView in Flutter is not acceptable. The widget still needs a lot of improvements. At the moment you can use combination of native code and Flutter. Check this link out

alinetskyi commented 4 years ago

Hey, anybody has any news regarding this ?

muzairk92 commented 3 years ago

Is there a tradingview example of flutter?

kkapuria3 commented 3 years ago

https://pub.dev/packages/trading_chart

Is this worthwhile looking into ?

teneon commented 3 years ago

Since Flutter 2.0, web channel is now out of beta. I would also be very interested in Flutter example with Tradingview.

ducthong97 commented 3 years ago

I agree, please support Flutter, Flutter is growing super fast.

thicow commented 3 years ago

Hi guys! Sorry for restarting this thread but I managed to run tv charting_library using flutter_inappwebview and follow this sample. It is running default and basic sample tv charting library.

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_inappwebview/flutter_inappwebview.dart'; class TradindView extends StatefulWidget { @override _TradindViewState createState() => _TradindViewState(); } final InAppLocalhostServer localhostServer = new InAppLocalhostServer(); class _TradindViewState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('InAppLocalhostServer Example'), ), body: Container( child: Column(children: [ Expanded( child: InAppWebView( initialUrlRequest: URLRequest( url: Uri.parse("http://localhost:8080/assets/index.html")), onWebViewCreated: (controller) {}, onLoadStart: (controller, url) {}, onLoadStop: (controller, url) {}, ), ) ])), ); } }

my pubspec.yalm:

assets:

alexanderytaylor commented 3 years ago

@thicow could you please go into more detail about this? I'm trying to implement something similar

thicow commented 3 years ago

@thicow could you please go into more detail about this? I'm trying to implement something similar

Hi @alexanderytaylor ! I implemented exactly it. Using flutter_inappwebview I created a widget with InAppWebView using initialUrlRequest: URLRequest(url: Uri.parse("http://localhost:8080/assets/index.html")),

I download tv-chart-library into assets folder and configure pubspec.yalm:

assets:

and it works fine! Inside my index.html I configured the datasource to render the chart.

alexanderytaylor commented 3 years ago

@thicow thanks for the reply! Does setting the initialUrlRequest to localhost work when the site is live as well or just for debugging?

thicow commented 3 years ago

@thicow thanks for the reply! Does setting the initialUrlRequest to localhost work when the site is live as well or just for debugging?

Localhost everytime! Localhost because index.html works like a angular app (SPA)... I don't need open a remote website in initialUrlRequest. But the most important is setting the urldatafeed to production datafeed in file index.html (https://github.com/tradingview/charting_library/blob/master/index.html) on line

datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),

VishalS01 commented 2 years ago

Hi @timocov, @kirchet , is there any update on this issue? Any PoC, sample projects, dummy code etc. that your team can provide will be much appreciated. Please update.

serzhikdnepr commented 2 years ago

Localhost everytime! Localhost because index.html works like a angular app (SPA)... I don't need open a remote website in initialUrlRequest. But the most important is setting the urldatafeed to production datafeed in file index.html (https://github.com/tradingview/charting_library/blob/master/index.html) on line

datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),

Hi @thicow ! If possible, could you provide an example project or an example of what is in the following files

timocov commented 2 years ago

@serzhikdnepr see https://github.com/tradingview/charting_library/, all files are there

serzhikdnepr commented 2 years ago

@serzhikdnepr see https://github.com/tradingview/charting_library/, all files are there

@thicow Thanks for the answer! I don't have access to this repository

coditori commented 2 years ago

Hi guys is there any update?

caglarylmz commented 2 years ago

if need works with flutter_inappwebview .

  1. add flutter_inappwebview: ^5.3.2
  2. Create index.hstm and td.js files in assets folder. And define its, under to assets index.html 
    
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<title>Document</title>
</head>
<body>
<div class="tradingview-widget-container">
<div id="tradingview_17f8f"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
</div>

td.js

new TradingView.widget( { "width": 350, "height": 480, "symbol": "NASDAQ:AAPL", "interval": "D", "timezone": "Etc/UTC", "theme": "dark", "style": "1", "locale": "en", "toolbar_bg": "#f1f3f6", "enable_publishing": false, "allow_symbol_change": false, "container_id": "tradingview_17f8f" } );

3 main.dart

void main() async { WidgetsFlutterBinding.ensureInitialized(); await localhostServer.start(); if (Platform.isAndroid) { await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true); var swAvailable = await AndroidWebViewFeature.isFeatureSupported( AndroidWebViewFeature.SERVICE_WORKER_BASIC_USAGE); var swInterceptAvailable = await AndroidWebViewFeature.isFeatureSupported( AndroidWebViewFeature.SERVICE_WORKER_SHOULD_INTERCEPT_REQUEST); if (swAvailable && swInterceptAvailable) { AndroidServiceWorkerController serviceWorkerController = AndroidServiceWorkerController.instance();

  serviceWorkerController.serviceWorkerClient = AndroidServiceWorkerClient(
    shouldInterceptRequest: (request) async {
      print(request);
      return null;
    },
  );
}

} runApp(const Forex()); }

4.

class MYView extends StatefulWidget { const MYView ({Key? key}) : super(key: key);

@override State createState() => _MyViewState(); }

class _MyViewState extends State {

@override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: SizedBox( width: Get.width, height: Get.height, child: InAppWebView( initialUrlRequest: URLRequest( url: Uri.parse("http://localhost:8080/assets/web/index.html")), androidOnPermissionRequest: (controller, origin, resources) async { return PermissionRequestResponse( resources: resources, action: PermissionRequestResponseAction.GRANT); }, onWebViewCreated: (controller) {}, onLoadStart: (controller, url) {}, onLoadStop: (controller, url) {}, ), ), ), ); } }


and works
segungreat commented 2 years ago

await localhostServer.start();

could not resolve reference

segungreat commented 2 years ago

await localhostServer.start();

could not resolve reference

Solved, Thanks

DasunInduwara commented 1 year ago

i'm trying to add some data to TradingView chart. but i's not working,

` late InAppWebViewController _webViewController;

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TradingView Chart'), ), body: InAppWebView( initialUrlRequest: URLRequest( url: Uri.parse('http://localhost:8080/assets/web/index.html'), ), onWebViewCreated: (InAppWebViewController controller) { _webViewController = controller; }, onLoadStop: (controller, url) async { // Wait for the TradingView widget to load await Future.delayed(Duration(seconds: 2));

      // Check if the TradingView widget is displayed correctly
      bool isWidgetDisplayed =
          await _webViewController.evaluateJavascript(source: '''
        // Check if the TradingView widget is displayed
        var widgetContainer = document.querySelector('.tradingview-widget-container');
        var isWidgetDisplayed = widgetContainer && widgetContainer.offsetWidth > 0 && widgetContainer.offsetHeight > 0;
        isWidgetDisplayed;
      ''');

      if (isWidgetDisplayed) {
        print('TradingView widget loaded successfully');
        _loadTradingViewChart();
      } else {
        print('Error: TradingView widget did not load');
      }
    },
  ),
);

}`

    void _loadTradingViewChart() {
    List<Map<String, dynamic>> data = [
      {
        "time": 1648041600000,
        "open": 58353.11,
        "high": 58727.53,
        "low": 56566.16,
        "close": 56954.84
      },
      {
        "time": 1647955200000,
        "open": 58154.92,
        "high": 59129.91,
        "low": 57601.37,
        "close": 58353.11
      },
      {
        "time": 1647868800000,
        "open": 56032.22,
        "high": 58713.57,
        "low": 55253.87,
        "close": 58154.92
      },
      {
        "time": 1647782400000,
        "open": 57517.58,
        "high": 57569.16,
        "low": 54754.38,
        "close": 56032.22
      },
      {
        "time": 1647696000000,
        "open": 56853.84,
        "high": 58082.69,
        "low": 55822.07,
        "close": 57517.58
      },
    ];

    String jsonData = jsonEncode(data);

    String js = '''
    new TradingView.widget({
      "width": 350,
      "height": 480,
      "symbol": "BTC/USDT",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "light",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "allow_symbol_change": false,
      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },
      "container_id": "tradingview_17f8f",
      "overrides": {
        "mainSeriesProperties.style": 1,
        "paneProperties.background": "#ffffff",
        "paneProperties.vertGridProperties.color": "#e1e1e1",
        "paneProperties.horzGridProperties.color": "#e1e1e1",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor" : "#AAA",
        "scalesProperties.backgroundColor" : "#FFF",
        "scalesProperties.lineColor" : "#D4D4D4",
        "scalesProperties.priceLabelsColor" : "#787B86"
      },
      "studies_overrides" : {
        "volume.volume.color.0" : "#6fba44",
        "volume.volume.color.1" : "#f25866",
        "volume.volume.transparency" : 70,
        "volume.show ma" : false,
        "bollinger bands.median.color" : "#33FF88",
        "bollinger bands.upper.linewidth" : 7
      },
      "loading_screen": { 
        "backgroundColor": "#FFFFFF", 
        "foregroundColor": "#000000"
      }
    });
  ''';

    _webViewController.evaluateJavascript(source: js).whenComplete(() {
      print("Complete");
    }).onError((error, stackTrace) {
      print("print $e");
    });
  }
}

this is working without this,

      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },

but i need to add my data list to chart @caglarylmz Plz Help me

tapas-tw commented 1 year ago

Any update on flutter support?

doanngoctu95 commented 1 year ago

any update here?

Floul commented 1 year ago

Any Update?

ghost commented 1 year ago

Any update?

Bitsy-Chuck commented 1 year ago

Any update?

sthakrishnakumar commented 1 year ago

Is there any update regarding the flutter implementation?

rahultrivedi1800 commented 1 year ago

i'm trying to add some data to TradingView chart. but i's not working,

` late InAppWebViewController _webViewController;

@OverRide Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TradingView Chart'), ), body: InAppWebView( initialUrlRequest: URLRequest( url: Uri.parse('http://localhost:8080/assets/web/index.html'), ), onWebViewCreated: (InAppWebViewController controller) { _webViewController = controller; }, onLoadStop: (controller, url) async { // Wait for the TradingView widget to load await Future.delayed(Duration(seconds: 2));

      // Check if the TradingView widget is displayed correctly
      bool isWidgetDisplayed =
          await _webViewController.evaluateJavascript(source: '''
        // Check if the TradingView widget is displayed
        var widgetContainer = document.querySelector('.tradingview-widget-container');
        var isWidgetDisplayed = widgetContainer && widgetContainer.offsetWidth > 0 && widgetContainer.offsetHeight > 0;
        isWidgetDisplayed;
      ''');

      if (isWidgetDisplayed) {
        print('TradingView widget loaded successfully');
        _loadTradingViewChart();
      } else {
        print('Error: TradingView widget did not load');
      }
    },
  ),
);

}`

    void _loadTradingViewChart() {
    List<Map<String, dynamic>> data = [
      {
        "time": 1648041600000,
        "open": 58353.11,
        "high": 58727.53,
        "low": 56566.16,
        "close": 56954.84
      },
      {
        "time": 1647955200000,
        "open": 58154.92,
        "high": 59129.91,
        "low": 57601.37,
        "close": 58353.11
      },
      {
        "time": 1647868800000,
        "open": 56032.22,
        "high": 58713.57,
        "low": 55253.87,
        "close": 58154.92
      },
      {
        "time": 1647782400000,
        "open": 57517.58,
        "high": 57569.16,
        "low": 54754.38,
        "close": 56032.22
      },
      {
        "time": 1647696000000,
        "open": 56853.84,
        "high": 58082.69,
        "low": 55822.07,
        "close": 57517.58
      },
    ];

    String jsonData = jsonEncode(data);

    String js = '''
    new TradingView.widget({
      "width": 350,
      "height": 480,
      "symbol": "BTC/USDT",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "light",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "allow_symbol_change": false,
      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },
      "container_id": "tradingview_17f8f",
      "overrides": {
        "mainSeriesProperties.style": 1,
        "paneProperties.background": "#ffffff",
        "paneProperties.vertGridProperties.color": "#e1e1e1",
        "paneProperties.horzGridProperties.color": "#e1e1e1",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor" : "#AAA",
        "scalesProperties.backgroundColor" : "#FFF",
        "scalesProperties.lineColor" : "#D4D4D4",
        "scalesProperties.priceLabelsColor" : "#787B86"
      },
      "studies_overrides" : {
        "volume.volume.color.0" : "#6fba44",
        "volume.volume.color.1" : "#f25866",
        "volume.volume.transparency" : 70,
        "volume.show ma" : false,
        "bollinger bands.median.color" : "#33FF88",
        "bollinger bands.upper.linewidth" : 7
      },
      "loading_screen": { 
        "backgroundColor": "#FFFFFF", 
        "foregroundColor": "#000000"
      }
    });
  ''';

    _webViewController.evaluateJavascript(source: js).whenComplete(() {
      print("Complete");
    }).onError((error, stackTrace) {
      print("print $e");
    });
  }
}

this is working without this,

      "datafeed": {
        "data": ${jsonData},
        "datafeed": new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
      },

but i need to add my data list to chart @caglarylmz Plz Help me

To use your own data in chart, you have to provide a backend endpoint which should provide data in format which is required by Tradingview. See Here: https://www.tradingview.com/charting-library-docs/latest/tutorials/implement_datafeed_tutorial/Datafeed-Implementation/

lenin41211 commented 3 months ago

trading view flutter implementation ?

elianortega commented 2 weeks ago

@thicow could you please go into more detail about this? I'm trying to implement something similar

Hi @alexanderytaylor ! I implemented exactly it. Using flutter_inappwebview I created a widget with InAppWebView using initialUrlRequest: URLRequest(url: Uri.parse("http://localhost:8080/assets/index.html")),

I download tv-chart-library into assets folder and configure pubspec.yalm:

assets:

  • assets/index.html
  • assets/charting_library/
  • assets/datafeeds/
  • assets/charting_library/bundles/
  • assets/datafeeds/udf/dist/bundle.js
  • assets/datafeeds/udf/dist/polyfills.js

and it works fine! Inside my index.html I configured the datasource to render the chart.

hey @thicow where did you get all this files from?