Область диаграммы - Привязка к удаленным данным / Графики / Сниппеты 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: 1072

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

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

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

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

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

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

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

Рейтинг: 4.0 / 5 - 3 голосов

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

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

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

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

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

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

Добавлено: 2016-06-04 в 08:52

Метка: 1581147534

⇄ ⇅

<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>
 $(document).ready(function () {
 var uri = "//api.worldweatheronline.com/free/v1/weather.ashx?q=Volgograd&format=json&num_of_days=5&key=zbgkc4rxu5agfhf4rugfwcuk&lang=ru";
 jQuery.get(uri, function (r) {
 if (r.data.error) {
 alert(r.data.error[0].msg);
 }
 else {
 $("#chart").shieldChart({
 theme: "bootstrap",
 primaryHeader: {
 text: "Удаленный доступ к данным"
 },
 exportOptions: {
 image: false,
 print: false
 },
 axisY: {
 title: {
 text: "Температура по ℃"
 }
 },
 axisX: {
 categoricalValues: ["Завтра", "через 2 дня", "через 3 дня", "через 4 дня", "через 5 дней"],
 title: {
 text: "Прогноз на 5 дней: Волгоград, Россия"
 }
 }, 
 dataSeries: [{
 seriesType: "area",
 collectionAlias: "Температурный максимум (℃)",
 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: "area",
 collectionAlias: "Температурный минимум (℃)",
 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"); // end jQuery.get() 
 });
 </script>

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