PeerGroup-Verlängerung

710000 519000 328292

Requirements

Complete example

API Documentation

Requirements

To use the component, you will need these third-party libraries:

JQuery
Bootstrap
Backbone
Underscore
Mustache
Highstock
Tinycolor
DSER Services / components

Complete example

<!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 Documentation

Initialize

Please provide your custom API token on initialization, otherwise the plugin won’t work. Following example shows all possible configuration options:

$("#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'
});

Required configuration options


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

Extended and optional configuration options


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

Methods of the component


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

You will need additional scripts and stylesheets to use the component:
• The default theme for the app (CSS) is included by default.
• The app-specific scripts files to get the plugin up and running.

Include the stylesheets to your page

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

<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">

Create a container

Create a new <div> container for the component inside your <body> tag.

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

Include the required script files to your page

There are 2 ways to include the plugin into your page:

Option 1: Asynchronous loading of required files with RequireJS

• Advantage: You only need to import a few files, all required script will get loaded asynchronously through RequireJS.
• Disadvantage: If you already have a script file which defines an anonoymous AMD module, then sadly this method won’t work for you.

Inlude the required javascript files

Load the plugin scripts by adding this block at the end of the BODY section.

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

Setup and initialize the component

Add this block right after the included script files:

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

Option 2: Regular loading of script files, without RequireJS

• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.

Inlude the required javascript files

Load the plugin scripts by adding this block at the end of the BODY section.

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

Setup and initialize the component

Add this block right after the included script files:

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

Click here to get your API-Token