710000 519000 328292

Anforderungen
Vollständiges Beispiel
API Dokumentation

Anforderungen

Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:

  • JQuery
  • Bootstrap
  • Backbone
  • Underscore
  • Mustache
  • Highstock
  • Tinycolor
  • DSER Services / components

Vollständiges Beispiel

<!doctype html>
<html class="no-js" lang="">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Sample</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css">
   <link rel="stylesheet" href="https://api-public.niiio.me/public/stockprices/css/stockprices.css">
</head>
<body>

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highstock.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highcharts.more.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/StockService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartConfigBuilder.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/jquery.stockprices.js"></script>

<div class="container">
   <div class="row">
      <div class="col-xs-12">
         <div id="stockprices-container"></div>
      </div>
   </div>
   <hr/>
   <div class="checkbox">
      <label>
         <input type="checkbox" id="toggle-peergroup"> PeerGroup-Verlängerung
      </label>
   </div>
   <p>
      <a class="btn btn-default btn-stock" data-stock-wkn="710000">710000</a>
      <a class="btn btn-default btn-stock" data-stock-wkn="519000">519000</a>
      <a class="btn btn-default btn-stock" data-stock-wkn="328292">328292</a>
   </p>
</div>

<script type="text/javascript">
   $(function () {
      var stockPrices = $("#stockprices-container").stockPrices({
         token: '<your-custom-api-token>',
         wkn: '710000',
         peerGroup: $('#toggle-peergroup').prop('checked')
      });

      $('#toggle-peergroup').on('change', function() {
         stockPrices.setPeergroupExtension($(this).prop('checked'));
      });

      $('a.btn-stock').on('click', function() {
         stockPrices.renderStockPricesChart($(this).data('stock-wkn'), null, $('#toggle-peergroup').prop('checked'));
      });
   });
</script>

</body>
</html>

API Dokumentation

Initialisieren

Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert. 

$("#stockprices-container").stockPrices({
    baseUrl: 'https://api-public.niiio.me',
    token: '<your-custom-api-token>',
    title: 'Wertpapierverlauf in EUR',
    color: '#7CB5EC',
    wkn: '710000',
    peerGroup: true,
    peerGroup: 'Ende der Peergroupverlängerung'
});

Erforderliche Konfigurationsoptionen
Key Description
token The security-token to check if your connection is valid.

Erweiterte und optionale Konfigurationsmöglichkeiten
Key Description Default
baseUrl url to DSER API services https://api-public.niiio.me
wkn The wkn of the stock found. null
title The title displayed above the chart Wertpapierverlauf in %
color Color of the line in the chart.
peerGroup enable/disable peer group extension true
peerGroupText label/legend of peer group extension Ende der Peergroupverlängerung

Methoden der Komponente
Name Description
renderStockPricesChart(stockUUID, color) Renders the chart for the given WKN.
hideStockPricesChart() Hides the chart.
setPeergroupExtension(peergroupFlag) toggle peer group extension on/off

Integration

Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.

Fügen Sie die Stylesheets in Ihre Seite ein

Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css">
<link rel="stylesheet" href="https://api-public.niiio.me/public/stockprices/css/stockprices.css">

Erstellen eines Containers

Erstellen Sie einen <div> Container für diese Komponente in dem <body> Bereich. Sie können unser Standard CSS-Style verwenden, indem Sie die Klasse „dser-theme“ für den Container nutzen. 

<div id="stockprices-container"></div>

Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein

Es existieren 2 Wege um die Skriptdateien einzufügen:

Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS

• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron durch RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.

Implementieren der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen: 

<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein: 

<script type="text/javascript">
    require(['dser.stockPrices'], function () {
        $("#stockprices-container").stockPrices({
            token: '<your-custom-api-token>',
            wkn: '710000'
        }); 
    }); 
</script>

Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS

• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.

Einfügen der erforderlichen Javascript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen: 

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highstock.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highcharts.more.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/StockService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartConfigBuilder.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/jquery.stockprices.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein: 

<script type="text/javascript">
   $(function () {
       $("#stockprices-container").stockPrices({
            token: '<your-custom-api-token>',
            wkn: '710000'
        });
   });
</script>
Hier erhalten Sie Ihren API-Schlüssel
DSER GmbH

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen