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

График - Привязка к удалённым данным

График - Привязка к удалённым данным

Интерактивный, адаптивный график отображения удалённых данных, используется график температуры окружающей среды в Вашем городе и вёрстка Bootstrap.

* В демо примере используется бесплатный api ключ на 60 дней, получение актуального: https://www.worldweatheronline.com/developer/

1
2
3
4
5

Версия: v1.0.1

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

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

Bootstrap: 3, 4, 5

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

Язык: Русский

Вес файла: 524.0 Kb

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

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/AD2yyB

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

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

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

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

Добавлено: 2016-09-24 в 18:28

Метка: 1581109269

⇄ ⇅

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

<script>
 $(function () {
 var uri = "//api.worldweatheronline.com/free/v1/weather.ashx?q=Volgograd&format=json&num_of_days=5&key=9fdxuu6gp29zkfwrramg924h";
 $.get(uri, function (r) {
 if (r.data.error) {
 alert(r.data.error[0].msg);
 } else {
 $("#chart").shieldChart({
 theme: "light",
 primaryHeader: {
 text: 'Температура в Волгограде'
 },
 exportOptions: {
 image: false,
 print: false
 },
 axisY: {
 title: {
 text: "Температура в C"
 }
 },
 axisX: {
 axisType: 'category',
 categoricalValues: ['Завтра', 'Через 2 дня', 'Через 3 дня', 'Через 4 дня', 'Через 5 дней'],
 title: {
 text: "Прогноз температуры на 5 дней в Волгограде"
 }
 },
 dataSeries: [{
 seriesType: 'line',
 collectionAlias: "Максимальная температура (C)",
 data: [
 parseInt(r.data.weather[0].tempMaxC, 10),
 parseInt(r.data.weather[1].tempMaxC, 10),
 parseInt(r.data.weather[2].tempMaxC, 10),
 parseInt(r.data.weather[3].tempMaxC, 10),
 parseInt(r.data.weather[4].tempMaxC, 10)
 ]
 }, {
 seriesType: 'line',
 collectionAlias: "Минимальная температура (C)",
 data: [
 parseInt(r.data.weather[0].tempMinC, 10),
 parseInt(r.data.weather[1].tempMinC, 10),
 parseInt(r.data.weather[2].tempMinC, 10),
 parseInt(r.data.weather[3].tempMinC, 10),
 parseInt(r.data.weather[4].tempMinC, 10)
 ]
 }]
 });
 }
 }, "jsonp"); 
 });
 </script>

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