Визуализация данных API Яндекс.Метрика посредством Highcharts - IT-C@FE
×
Masterpro Nivo Slider (06 фев 2023)

Это форк Vinaora Nivo Slider, пришлось переименовать, в силу требования JED. Даже старую версию качать можно было только с варезных сайтов, нашпигованную троянами. Зачем оно такое, согласитесь.

× Время от времени - и не так чтобы редко - на форуме звучат вопросы по нативному PHP... решили собирать их в этой ветке.

Идея Визуализация данных API Яндекс.Метрика посредством Highcharts

Подробнее
3 года 11 мес. назад - 3 года 11 мес. назад #1 от Aleksej
К материалу Визуализация данных API Яндекс.Метрика посредством Highcharts .

index.php
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>TOP 10 Visitors to Masterpro.ws (without Russia, Ukraine and Belarus) by Countries</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- Flag sprites service provided by Martijn Lafeber,
  https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" href="https://github.com/downloads/lafeber/world-flags-sprite/flags16.css" />

<div id="container"></div>

<?php
function curl_file_get_contents($url) {
    $authToken = '*********************************';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/x-yametrika+json', 'Authorization: OAuth' . $authToken]);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    $obj = curl_exec($ch);
    curl_close($ch);
    return $obj;
}
$url = 'https://api-metrika.yandex.ru/stat/v1/data';
$params = array('ids' => '*********', 'metrics' => 'ym:s:visits', 'dimensions' => 'ym:s:regionCountry', 'date1' => '8daysAgo', 'date2' => 'yesterday', 'lang' => 'en');
$obj = curl_file_get_contents($url . '?' . http_build_query($params));
$obj = json_decode($obj, true);
$arr = array();
for ($i = 0;$i < 13;$i++) {
    $a = $obj['data'][$i]['dimensions'][0]['name'];
    $b = $obj['data'][$i]['metrics']['0'] . ',';
    $c = $obj['data'][$i]['dimensions'][0]['iso_name'];
    if ($a != 'Russia' && $a != 'Ukraine' && $a != 'Belarus') {
        $arr[] = $b;
        $arr1[] = '\'' . $a . ' <span class="f16"><span id="flag" class="flag ' . mb_strtolower($c) . '">\' + \'</span></span>\',';
    }
}
?>

<script>
Highcharts.chart('container', {
  colors: ['#6699FF'],
  chart: {
    type: 'column',
    inverted: true,
    polar: true
  },
  title: {
    text: 'TOP 10 Visitors (without Russia, Ukraine and Belarus) by Countries'
  },
  subtitle: {
        text: 'Masterpro.ws'
  },
  tooltip: {
    outside: true
  },
  pane: {
    size: '85%',
    endAngle: 270
  },
  xAxis: {
    tickInterval: 1,
    labels: {
      align: 'right',
      useHTML: true,
      allowOverlap: true,
      step: 1,
      y: 4,
      style: {
        fontSize: '12px'
      }
    },
    lineWidth: 0,
    categories: [
    <?php foreach ($arr1 as $i) {
    echo $i;
}; ?>]
  },
  yAxis: {
    lineWidth: 0,
    tickInterval: 25,
    reversedStacks: false,
    endOnTick: true,
    showLastLabel: true
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      borderWidth: 0,
      pointPadding: 0,
      groupPadding: 0.15
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    showInLegend: false,
    name: 'Number of visits',
    data: [   
    <?php foreach ($arr as $i) {
    echo $i;
}; ?>]
  }]
});
</script>

</body>
</html>

style.css
#container {
  min-width: 310px;
  max-width: 800px;
  height: 600px;
  margin: 0 auto;
} ?>
Последнее редактирование: 3 года 11 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Подробнее
5 мес. 2 дн. назад #2 от Вебмастер
Флаги перестали отображаться.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Подробнее
5 мес. 2 дн. назад #3 от serge

Флаги перестали отображаться.
Скачайте стили css со спрайтом, девелопер перестал поддерживать этот проект:
github.com/lafeber/world-flags-sprite/issues/63

Можно так:
npm i world-flags-sprite
 

А я смогу! - А поглядим! - А я упрямый!

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум