Different types of charts module
Trgovanje z delnico
<div class="container-1100" id="default">
<div class="row">
<div class="col-12">
<h2 class="text-center mb-5 tc-green-dark">Trgovanje z delnico</h2>
</div>
</div>
</div>
<section class="sharetrading-block">
<div class="sharetrading-block__col">
<div class="sharetrading-block__col__title">KRKG 54,95 +0,83 % <span class="icon icon--arrow-up-white"></span></div>
<div class="sharetrading-block__col__meta">
<div class="date">15. 7. 2019 11:25</div>
<div class="info">Podatki prikazani s 15-minutnim zamikom.</div>
</div>
<div class="flex-row-break"></div>
<div class="KrkaCharts initChartBars" data-csv-dom="#CSVDATA1"></div>
</div>
<div class="sharetrading-block__col">
<div class="sharetrading-block__col__title">Mattis vivierra egestas.</div>
<h3 class="sharetrading-block__col__title-big">Parturient neque quisque.</h3>
<div class="sharetrading-block__col__desc">Quam et morbi magna amet eget congue non. Magnis tellus nisl enim leo aliquam scelerisque. Adipiscing diam sed sit gravida. Ultrices ipsum, pulvinar nibh ut arcu parturient ullamcorper tempus ultricies.</div>
<div class="sharetrading-block__col__actions">
<a href="#" class="button button--green-inverse"><span>More</span></a>
</div>
</div>
</section>
<pre class="CHART_CSV" id="CSVDATA1">19.11 2021,83,85
19.11 2021,85,110
20.11 2021,86.5,130
21.11 2021,80.3,90
22.11 2021,100,89
23.11 2021,50.9,91
24.11 2021,90,105
25.11 2021,70,122
26.11 2021,95,97</pre>
Prikaži obdobje za:
| Datum | Zaključni tečaj | Sprememva v % | Promet v lotih | Promet v 000 € |
|---|---|---|---|---|
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
| 2.12.2021 | 88,40 | 0,23 | 15.216 | 1.345 |
Sprememba v času lastništva delnic Krka
Stanje danes
Datum nakupa 06.10.2006
Vrednost ob nakupu 78.910,00 €
Vrednost danes 88.000,00 €
Sprememba 11,52 %
Izračun ne upošteva reinvestiranja izplačanih dividend.
Naročite se na podatke o trgovanju
Z vpisom svojih osebnih podatkov v spletni obrazec na tej spletni strani in s strinjanjem s splošnimi pogoji dovoljujete, da Krka, d. d., Novo mesto te podatke zbira, hrani in uporablja za interne potrebe statistike in/ali obdelave podatkov, za pošiljanje vzorcev izdelkov ter za obveščanje o novostih v Krkinem proizvodnem programu in o ostalih zanimivostih, vselej v skladu z zakonodajo.
<section class="tabs-accordion tabs-accordion--break-mobile tabs-accordion--content-narrow graph-tabs">
<section class="tabs">
<div class="tabs__nav">
<div class="prev"><i class="icon icon--arrow-left-green"></i></div>
<div class="tabs__nav__container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="mtab-1" data-toggle="tab" href="#mctab-1" role="tab" aria-controls="mctab-1" aria-selected="true">Graf</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="mtab-2" data-toggle="tab" href="#mctab-2" role="tab" aria-controls="mctab-2" aria-selected="false">Tabela</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="mtab-3" data-toggle="tab" href="#mctab-3" role="tab" aria-controls="mctab-3" aria-selected="false">Kalkulator</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="mtab-4" data-toggle="tab" href="#mctab-4" role="tab" aria-controls="mctab-4" aria-selected="false">Obveščanje</a>
</li>
</ul>
</div>
<div class="next"><i class="icon icon--arrow-right-green"></i></div>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="mctab-1" role="tabpanel" aria-labelledby="mtab-1">
<div class="sharetrading-block__col">
<div class="sharetrading-block__col__title">KRKG 54,95 +0,83 % <span class="icon icon--arrow-up-white"></span></div>
<div class="sharetrading-block__col__meta">
<div class="date">15. 7. 2019 11:25</div>
<div class="info">Podatki prikazani s 15-minutnim zamikom.</div>
</div>
</div>
<div class="chart-container">
<div class="chart-filters chart-filters--daterange">
<div class="mobile-hint">Prikaži obdobje za:</div>
<div class="inputs">
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="sl" datepicker-locale-first-day-of-week="1" data-datepicker-month-type="static" data-datepicker-position="below left" placeholder="Od" />
<i class="icon icon--calendar-white"></i>
</div>
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="en" datepicker-locale-first-day-of-week="7" data-datepicker-month-type="static" data-datepicker-position="below left" data-datepicker-default="now" placeholder="Do" />
<i class="icon icon--calendar-white"></i>
</div>
</div>
</div>
<div class="KrkaCharts initChartBarsFilters" data-csv-dom="#CSVDATA2" data-chart-filters="true"></div>
</div>
</div>
<div class="tab-pane fade" id="mctab-2" role="tabpanel" aria-labelledby="mtab-2">
<div class="sharetrading-block__col">
<div class="sharetrading-block__col__title">KRKG 54,95 +0,83 % <span class="icon icon--arrow-up-white"></span></div>
<div class="sharetrading-block__col__meta">
<div class="date">15. 7. 2019 11:25</div>
<div class="info">Podatki prikazani s 15-minutnim zamikom.</div>
</div>
</div>
<div class="sharetrading-block__filters">
<div class="hint">Prikaži obdobje za:</div>
<div class="inputs">
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="sl" datepicker-locale-first-day-of-week="1" data-datepicker-month-type="static" data-datepicker-position="below left" placeholder="Od" />
<i class="icon icon--calendar-white"></i>
</div>
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="en" datepicker-locale-first-day-of-week="7" data-datepicker-month-type="static" data-datepicker-position="below left" data-datepicker-default="now" placeholder="Do" />
<i class="icon icon--calendar-white"></i>
</div>
</div>
<div class="actions d-none d-lg-block">
<a class="download download--white download--sm" href="#">
<span>Prenesi</span>
<div class="icon icon--xls-white"></div>
</a>
</div>
</div>
<div class="table-wrap">
<table class="table table--green">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Zaključni tečaj</th>
<th scope="col">Sprememva v %</th>
<th scope="col">Promet v lotih</th>
<th scope="col">Promet v 000 €</th>
</tr>
</thead>
<tbody>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<a href="#" class="pagination__prev">
<i class="icon icon--arrow-left-white icon--md"></i>
</a>
<div class="pagination__input">
<input type="text" class="form-control" value="1">
</div>
<a href="#" class="pagination__next">
<i class="icon icon--arrow-right-white icon--md"></i>
</a>
<div class="pagination__text">od 16</div>
</div>
</div>
<div class="tab-pane fade kalkulator" id="mctab-3" role="tabpanel" aria-labelledby="mtab-3">
<h3 class="tc-white">Sprememba v času lastništva delnic Krka</h3>
<div class="calculator-container">
<div class="calculator-container__inputs">
<div><input type="text" class="form-control" placeholder="Investirani znesek (€)"></div>
<div class="seperator"><span>ali</span></div>
<div>
<span>ali</span>
<input type="text" class="form-control" placeholder="Št. kupljenih delnic" />
</div>
<div class="seperator"><span>in</span></div>
<div>
<span>in</span>
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" placeholder="Datum nakupa" data-datepicker-position="below center" />
<i class="icon icon--calendar-white"></i>
</div>
</div>
<div>
<a href="#" class="button button--green-inverse"><span>Prikaži</span></a>
</div>
</div>
<div class="calculator-container__stats">
<h3 class="tc-white">Stanje danes</h3>
<div class="groups">
<div>
<span>Datum nakupa</span>
<strong>06.10.2006</strong>
</div>
<div>
<span>Vrednost ob nakupu</span>
<strong>78.910,00 €</strong>
</div>
<div>
<span>Vrednost danes</span>
<strong>88.000,00 €<i class="icon icon--arrow-up-white"></i></strong>
</div>
<div>
<span>Sprememba</span>
<strong>11,52 %<i class="icon icon--arrow-up-white"></i></strong>
</div>
</div>
</div>
<div class="calculator-container__hint">Izračun ne upošteva reinvestiranja izplačanih dividend.</div>
</div>
</div>
<div class="tab-pane fade reminder-container" id="mctab-4" role="tabpanel" aria-labelledby="mtab-4">
<h3 class="tc-white">Naročite se na podatke o trgovanju</h3>
<div class="row">
<div class="col-12 col-lg-8 m-auto">
<div class="row">
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Ime">
</div>
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Priimek">
</div>
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Elektronski naslov">
</div>
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Pogostost pošiljanja">
</div>
</div>
<div class="row justify-content-end align-items-center">
<div class="col-auto">
<div class="form-check">
<input type="radio" name="group-radio" class="form-check-input" id="radio1" value="">
<label for="radio1" class="form-check-label">Strinjam se s splošnimi pogoji</label>
</div>
</div>
<div class="col-auto">
<a href="#" class="button button--green-inverse"><span>Potrdi prijavo</span></a>
</div>
<div class="col-12 text-left hint tc-white">
Z vpisom svojih osebnih podatkov v spletni obrazec na tej spletni strani in s strinjanjem s splošnimi pogoji dovoljujete, da Krka, d. d., Novo mesto te podatke zbira, hrani in uporablja za interne potrebe statistike in/ali obdelave podatkov, za pošiljanje vzorcev izdelkov ter za obveščanje o novostih v Krkinem proizvodnem programu in o ostalih zanimivostih, vselej v skladu z zakonodajo.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-accordion block-accordion--green">
<div class="block-accordion__content" id="nav-tabContent">
<div class="accordion" id="financial_reports">
<div class="card">
<div class="card-header" id="mheading-1">
<h2 class="mb-0">
<a href="#mheading-1" data-toggle="collapse" data-target="#mcollapse-1" aria-expanded="true" aria-controls="mcollapse-1">
Graf
</a>
</h2>
</div>
<div id="mcollapse-1" class="collapse show" aria-labelledby="mheading-1">
<div class="card-body">
<div class="sharetrading-block__col">
<div class="sharetrading-block__col__title">KRKG 54,95 +0,83 % <span class="icon icon--arrow-up-white"></span></div>
<div class="sharetrading-block__col__meta">
<div class="date">15. 7. 2019 11:25</div>
<div class="info">Podatki prikazani s 15-minutnim zamikom.</div>
</div>
</div>
<div class="chart-container">
<div class="chart-filters chart-filters--daterange">
<div class="mobile-hint">Prikaži obdobje za:</div>
<div class="inputs">
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="sl" datepicker-locale-first-day-of-week="1" data-datepicker-month-type="static" data-datepicker-position="below left" placeholder="Od" />
<i class="icon icon--calendar-white"></i>
</div>
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="en" datepicker-locale-first-day-of-week="7" data-datepicker-month-type="static" data-datepicker-position="below left" data-datepicker-default="now" placeholder="Do" />
<i class="icon icon--calendar-white"></i>
</div>
</div>
</div>
<div class="KrkaCharts initChartBarsFilters" data-csv-dom="#CSVDATA2" data-chart-filters="true"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="mheading-2">
<h2 class="mb-0">
<a class="collapsed" href="#mheading-2" data-toggle="collapse" data-target="#mcollapse-2" aria-expanded="false" aria-controls="mcollapse-2">
Tabela
</a>
</h2>
</div>
<div id="mcollapse-2" class="collapse" aria-labelledby="mheading-2">
<div class="card-body">
<div class="sharetrading-block__col">
<div class="sharetrading-block__col__title">KRKG 54,95 +0,83 % <span class="icon icon--arrow-up-white"></span></div>
<div class="sharetrading-block__col__meta">
<div class="date">15. 7. 2019 11:25</div>
<div class="info">Podatki prikazani s 15-minutnim zamikom.</div>
</div>
</div>
<div class="sharetrading-block__filters">
<div class="hint">Prikaži obdobje za:</div>
<div class="inputs">
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="sl" datepicker-locale-first-day-of-week="1" data-datepicker-month-type="static" data-datepicker-position="below left" placeholder="Od" />
<i class="icon icon--calendar-white"></i>
</div>
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" data-datepicker-locale="en" datepicker-locale-first-day-of-week="7" data-datepicker-month-type="static" data-datepicker-position="below left" data-datepicker-default="now" placeholder="Do" />
<i class="icon icon--calendar-white"></i>
</div>
</div>
<div class="actions d-none d-lg-block">
<a class="download download--white download--sm" href="#">
<span>Prenesi</span>
<div class="icon icon--xls-white"></div>
</a>
</div>
</div>
<div class="table-wrap">
<table class="table table--green">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Zaključni tečaj</th>
<th scope="col">Sprememva v %</th>
<th scope="col">Promet v lotih</th>
<th scope="col">Promet v 000 €</th>
</tr>
</thead>
<tbody>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
<tr>
<td>2.12.2021</td>
<td>88,40 <span class="icon icon--arrow-up-white"></span></td>
<td>0,23 <span class="icon icon--arrow-up-white"></span></td>
<td>15.216</td>
<td>1.345</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<a href="#" class="pagination__prev">
<i class="icon icon--arrow-left-white icon--md"></i>
</a>
<div class="pagination__input">
<input type="text" class="form-control" value="1">
</div>
<a href="#" class="pagination__next">
<i class="icon icon--arrow-right-white icon--md"></i>
</a>
<div class="pagination__text">od 16</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="mheading-3">
<h2 class="mb-0">
<a class="collapsed" href="#mheading-3" data-toggle="collapse" data-target="#mcollapse-3" aria-expanded="false" aria-controls="mcollapse-3">
Kalkulator
</a>
</h2>
</div>
<div id="mcollapse-3" class="collapse" aria-labelledby="mheading-3">
<div class="card-body kalkulator">
<h3 class="tc-white">Sprememba v času lastništva delnic Krka</h3>
<div class="calculator-container">
<div class="calculator-container__inputs">
<div><input type="text" class="form-control" placeholder="Investirani znesek (€)"></div>
<div class="seperator"><span>ali</span></div>
<div>
<span>ali</span>
<input type="text" class="form-control" placeholder="Št. kupljenih delnic" />
</div>
<div class="seperator"><span>in</span></div>
<div>
<span>in</span>
<div class="form-control-icon">
<input type="text" class="form-control initDatePicker" placeholder="Datum nakupa" data-datepicker-position="below center" />
<i class="icon icon--calendar-white"></i>
</div>
</div>
<div>
<a href="#" class="button button--green-inverse"><span>Prikaži</span></a>
</div>
</div>
<div class="calculator-container__stats">
<h3 class="tc-white">Stanje danes</h3>
<div class="groups">
<div>
<span>Datum nakupa</span>
<strong>06.10.2006</strong>
</div>
<div>
<span>Vrednost ob nakupu</span>
<strong>78.910,00 €</strong>
</div>
<div>
<span>Vrednost danes</span>
<strong>88.000,00 €<i class="icon icon--arrow-up-white"></i></strong>
</div>
<div>
<span>Sprememba</span>
<strong>11,52 %<i class="icon icon--arrow-up-white"></i></strong>
</div>
</div>
</div>
<div class="calculator-container__hint">Izračun ne upošteva reinvestiranja izplačanih dividend.</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="mheading-4">
<h2 class="mb-0">
<a class="collapsed" href="#mheading-4" data-toggle="collapse" data-target="#mcollapse-4" aria-expanded="false" aria-controls="mcollapse-4">
Obveščanje
</a>
</h2>
</div>
<div id="mcollapse-4" class="collapse" aria-labelledby="mheading-4">
<div class="card-body reminder-container">
<h3 class="tc-white">Naročite se na podatke o trgovanju</h3>
<div class="row">
<div class="col-12 col-lg-8 m-auto">
<div class="row">
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Ime">
</div>
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Priimek">
</div>
<div class="col-12 col-sm-6">
<input type="text" class="form-control" placeholder="Elektronski naslov">
</div>
<div class="col-12 col-sm-6">
<select class="form-select initDropdown" data-placeholder="Pogostost pošiljanja" data-search-placeholder="Writing search term">
<option></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="row justify-content-end align-items-center mt-5">
<div class="col-auto">
<div class="form-check">
<input type="radio" name="group-radio" class="form-check-input" id="radio1" value="">
<label for="radio1" class="form-check-label">Strinjam se s splošnimi pogoji</label>
</div>
</div>
<div class="col-auto">
<a href="#" class="button button--green-inverse"><span>Potrdi prijavo</span></a>
</div>
<div class="col-12 text-left hint tc-white">
Z vpisom svojih osebnih podatkov v spletni obrazec na tej spletni strani in s strinjanjem s splošnimi pogoji dovoljujete, da Krka, d. d., Novo mesto te podatke zbira, hrani in uporablja za interne potrebe statistike in/ali obdelave podatkov, za pošiljanje vzorcev izdelkov ter za obveščanje o novostih v Krkinem proizvodnem programu in o ostalih zanimivostih, vselej v skladu z zakonodajo.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>