График - Привязка к локальным данным / Графики / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Графики

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 524.0 Kb

Уникальный ID: 1277

Количество символов:

Посмотрели: 3619 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/12/1277.css

Прикреплён файл №2: /stuff/0-0-0-1277-20

Скачали бесплатно: 104 раз

Прокомментировали: 0 раз

Рейтинг: 3.9 / 5 - 7 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/YEHE07

Информация: Пользователям

Информация: Правообладателям

Теги: Chart, Snippet, диаграммы, html, графики, сниппет, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-09-08 в 10:05

Метка: 1581110112

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<link type="text/css" rel="StyleSheet" href="https://bootstraptema.ru/plugins/2016/shieldui/style.css" />
<script src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/shieldui/script.js"></script>

<br><br><br>

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">

<div id="chart">

<script>
 $(function () {
 var householdPrices = [ 
 {x:'2001',y:0.164},
 {x:'2002',y:0.173},
 {x:'2003',y:0.184},
 {x:'2004',y:0.167},
 {x:'2005',y:0.177},
 {x:'2006',y:0.189},
 {x:'2007',y:0.180},
 {x:'2008',y:0.183},
 {x:'2009',y:0.188},
 {x:'2010',y:0.160},
 {x:'2011',y:0.176},
 {x:'2012',y:0.178}
 ];
 var industryPrices = [ 
 {x:'2001',y:0.103},
 {x:'2002',y:0.105},
 {x:'2003',y:0.112},
 {x:'2004',y:0.111},
 {x:'2005',y:0.102},
 {x:'2006',y:0.099},
 {x:'2007',y:0.110},
 {x:'2008',y:0.113},
 {x:'2009',y:0.117},
 {x:'2010',y:0.119},
 {x:'2011',y:0.123},
 {x:'2012',y:0.117}
 ]; 
 $("#chart").shieldChart({
 theme: "light",
 exportOptions: {
 image: false,
 print: false
 },
 primaryHeader: {
 text: "Цены на электроэнергию"
 },
 chartLegend: {
 align: 'right',
 verticalAlign: 'top',
 renderDirection: 'vertical'
 },
 seriesSettings: {
 line: {
 enablePointSelection: true,
 pointMark: {
 activeSettings: {
 pointSelectedState: {
 drawWidth: 4,
 drawRadius: 4
 }
 }
 }
 }
 },
 axisY: {
 title: {
 text: "Цена (EUR per kWh)"
 }
 },
 dataSeries: [{
 seriesType: 'line',
 collectionAlias: "Бытовая",
 data: householdPrices
 }, {
 seriesType: 'line',
 collectionAlias: "Индустрия",
 data: industryPrices
 }]
 });
 });
 </script>

</div>
</div>
</div>