Ответы пользователя по тегу Аналитика
  • Как вывести статистику посещений/просмотров из Яндекс.Метрики в виде графика?

    @n1ger
    html+css
    Сам не силен в этом всем, но делал на сайт вывод из метрики.
    Сначала сделал файл metrika.php в него вогнал такой код
    <?php
    $today=date("Ymd");
    $metrika_url = "http://api-metrika.yandex.ru/stat/traffic/summary.json?id=айди_вашего_счетчика&pretty=1&date1=Дата_начала_выборки_данных_со_счетчика&date2=$today&oauth_token=ваш токен";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $metrika_url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    $metrika = curl_exec ($ch);
    curl_close ($ch);
    
    $metrika_o = json_decode($metrika);
    
    
    header('Content-Type: application/json');
    echo 'jsonCallback2('. $metrika . ')';


    После создаем страничку куда будет выводить эти данные.

    в яваскрипт пишем такое
    <script type="text/javascript">
        var link2PHP = "путь_к_файлу/metrika.php";
        var datas2 = [];
        $.ajax ({
            type: "GET",
            url:link2PHP,
            dataType: "jsonp",
            async: false,
            contentType: "application/json",
            jsonp: "callback",
            jsonpCallback: 'jsonCallback2',
            contentType: "application/json",
            success: function(json) {
                $.each(json.data.reverse(), function (index,value){
    
                    var obj2 = {
    
    
                        'date2': value.date,
                        'visits2': value.visits,
                        'visitors2': value.visitors
    
                    };
    
                    datas2.push(obj2);
                    console.log(obj2)
    
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status);
                console.log(thrownError);
            }
        });


    И после сами настройки для графика

    var chart = AmCharts.makeChart("chartdiv", {
            "pathToImages": "путь к картинкам графика",
            "type": "serial",
            "theme": "light",
            language: "ru",
            "titles": [{
                "text": "Я.Метрика (Статистика посещений и посетителей)",
                "size": 15
            }],
            "legend": {
                "equalWidths": true,
                "useGraphSettings": true,
                "valueAlign": "right",
                "valueWidth": 120
    
            },
            "dataProvider":datas2,
    
            "valueAxes": [ {
                "id": "visitsAxis",
                "axisAlpha": 0,
                "gridAlpha": 0,
                "labelsEnabled": false,
                "position": "left"
            }, {
                "id": "visitorsAxis",
                "axisAlpha": 0,
                "gridAlpha": 0,
                "inside": false,
                "position": "right",
                "title": "Количество"
            }],
            "graphs": [  {
                "bullet": "round",
                "bulletBorderAlpha": 1,
                "balloonText": "Посетителей:[[value]]",
    
                "legendPeriodValueText": "Всего: [[value.sum]]",
                "legendValueText": "[[value]]",
                "title": "Посетителей",
                "fillAlphas": 0.6,
                "valueField": "visitors2",
                "valueAxis": "visitorsAxis"
            },
                {
                "balloonText": "Посещений:[[value]]",
                "bullet": "round",
                "bulletBorderAlpha": 1,
                "useLineColorForBulletBorder": true,
                "bulletColor": "#FFFFFF",
                "bulletSizeField": "townSize",
                "dashLengthField": "dashLength",
    
                "labelPosition": "right",
                "legendPeriodValueText": "Всего: [[value.sum]]",
                "legendValueText": "[[value]]",
                "title": "Посещений",
                "fillAlphas": 0,
                "valueField": "visits2",
                "valueAxis": "visitorsAxis"
            }],
            "chartScrollbar": {gridCount: 7,
    
                scrollbarHeight: 25,
                graphType: "line",
                usePeriod: "WW",
                backgroundColor: "#333",
                graphFillColor: "#666",
                graphFillAlpha: 0.5,
                gridColor: "#555",
                gridAlpha: 1,
                selectedBackgroundColor: "#444",
                selectedGraphFillAlpha: 1
            },
            "chartCursor": {
                "categoryBalloonDateFormat": "DD MMM",
                "cursorAlpha": 0.1,
                "cursorColor":"#000000",
                "fullWidth":true,
                "valueBalloonsEnabled": true,
                "zoomable": true
            },
            "dataDateFormat": "YYYYMMDD",
            "categoryField": "date2",
            "categoryAxis": {
                "dateFormats": [{
                    "period": "DD",
                    "format": "DD"
                }, {
                    "period": "WW",
                    "format": "MMM DD"
                }, {
                    "period": "MM",
                    "format": "MMM"
                }, {
                    "period": "YYYY",
                    "format": "YYYY"
                }],
                "parseDates": true,
                "minorGridEnabled": true,
                "gridCount":50,
                "autoGridCount": false,
                "axisColor": "#000",
                "gridAlpha": 0.2,
                "gridColor": "#000"
    
            },
    
    
    
            amExport: {
                top: -4,
                right: -6
            }
    
    
        });


    Можно конечно всё расписать и объяснить - но я думаю сможете разобраться, что куда и к чему.

    Ну и в теле самого файла создаем <div id=""chartdiv></div>
    Куда собственно график будет выгружаться.
    Ответ написан
    2 комментария