- JQuery
- Bootstrap
- Backbone
- Underscore
- Mustache
- Highstock
- Tinycolor
- DSER Services / components
<!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>
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' });
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.
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 new <div> container for the component inside your <body> tag.
<div id="stockprices-container"></div>
There are 2 ways to include the plugin into your page:
• 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.
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>
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>
• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.
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>
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>
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.