Форматирование содержимого всплывающей подсказки гистограммы Google, созданной с помощью Keen

Мы используем Keen на сайте для отслеживания данных о просмотрах. Это работает хорошо, но у меня возникла проблема с тем, как некоторые данные представлены на графиках (с использованием версии 3.0.5 JS SDK). На панели инструментов пользователя у нас есть график, показывающий данные за последние 4 месяца (таймфрейм: this_4_months). У меня есть вопрос, хотя -

Когда пользователь наводит курсор на один из столбцов, вы видите подробную информацию во всплывающей подсказке, например. «1 апреля 2015 г., 00:00» — есть ли способ отформатировать эту всплывающую подсказку во что-то более удобное для пользователя? например "Апрель 2015"

Keen.ready(function() {

        var query = new Keen.Query('count', {
            'eventCollection' : 'profile_views',
            'timeframe' : 'this_4_months',
            'interval' : 'monthly',
            'groupBy' : 'view.membership_type',
            'filters' : [
                {
                    'property_name' : 'view.user_id',
                    'operator' : 'eq',
                    'property_value' : String(user_id)
                }
            ]
        });

        client.draw(query, document.getElementById(element_id), {
            chartType: 'columnchart',
            width : graph_width,
            height : 250,
            colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
            colorMapping : {
                'pro' : '#abdd99',
                'basic' : '#8dc7d9'
            },
            labelMapping: {
                "basic": "BASIC",
                "pro": "PRO"
            },
            title : '',
            chartOptions: {
                width : '100%',
                height : '100%',
                isStacked: true,
                fontName : 'Helvetica',
                fontSize : '11px',  
                chartArea : {
                    left : '10px',
                    top : '0',
                    width : '90%',
                    height : '90%'
                },
                axisTitlesPosition : 'in',
                vAxis : {
                    viewWindowMode : 'pretty',
                    gridlines : { color : '#eeeeee' },
                    baselineColor : '#eeeeee',
                    textPosition : 'in'
                },
                hAxis : {
                    viewWindowMode : 'pretty',
                    gridlines : {
                        color : '#eeeeee'
                    },
                    baselineColor : '#eeeeee',
                    textPosition : 'none'
                },
                legend : {
                    position : 'in'
                },
                titlePosition : 'none'
            }
        });

    });

Вот скриншот того, как появляется всплывающая подсказка:

keen


google-visualization keen-io
person Phil    schedule 14.05.2015    source источник
comment
Это действительно возможно, но небольшой пример кода, показывающий, как вы инициализируете диаграмму с использованием точных данных, был бы полезен, я имею в виду, что он даст более точный ответ.   -  person davidkonrad    schedule 14.05.2015
comment
Привет, Дэвид, нет проблем, я обновил свой пост с образцом кода. Спасибо   -  person Phil    schedule 15.05.2015
comment
Хорошо, где? :) просто пример JSON, который вы используете. Думаю, у вас более сложный результат, чем в примерах в keen.io/docs/getting-started-guide.   -  person davidkonrad    schedule 15.05.2015
comment
Извините .. по какой-то причине у меня возникли проблемы с редактированием моего собственного вопроса, поэтому я добавил его в «ответ» ниже. Надеюсь это поможет!   -  person Phil    schedule 15.05.2015
comment
Отредактировал ваш ответ в вопросе и исправил подсветку синтаксиса. Теперь вы можете удалить ответ ниже. Мы никогда не должны злоупотреблять кнопкой ответа, чтобы прокомментировать или улучшить вопрос (без обид).   -  person davidkonrad    schedule 17.05.2015
comment
Извините, но я не могу это решить. Я думал, что это вопрос чистой визуализации Google, и что было бы легко добавить столбец всплывающей подсказки с проанализированными строками даты. Но инкин использует обертку, которая делает такое решение недоступным.   -  person davidkonrad    schedule 17.05.2015
comment
Вот как это должно быть сделано -› developers.google.com/chart/interactive /docs/ прочитали интересные документы, github.com/keen/keen-js/blob/master/docs/ безуспешно   -  person davidkonrad    schedule 17.05.2015
comment
привет @davidkonrad, во-первых, приносим извинения за неправильное использование кнопки ответа, и спасибо за вашу помощь. Я свяжусь со службой поддержки Keen и посмотрю, могут ли они что-нибудь посоветовать.   -  person Phil    schedule 18.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вместо

var chart = keenIoClient.draw(query, document.getElementById("chart2"), options );

Соберите все свои данные в массив вручную, чтобы вы могли добавить туда больше столбцов. Вот пример с датами и просмотрами страниц:

        keenIoClient.run(query, function(err, response){
          if (err) {
            // there was an error!
          }
          else {
              var arrayData = [];
              arrayData.push(['Day','Views']);
              response.result.forEach(function (element, index, array) {
                var date = new Date(element.timeframe.start);
                arrayData.push([date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear() , element.value]);
              });
              var data = google.visualization.arrayToDataTable(arrayData);                
              var chart = new google.visualization.ColumnChart( document.getElementById('chart2'));
              chart.draw(data, options);
          }
        });

Переменная «options» остается прежней.

P.S. по пути можно настроить формат для ваших дат.

П.П.С. в моем случае запрос был:

        var query = new Keen.Query("count", {
            eventCollection: "views",
            interval: "daily",
            timeframe: "this_7_days",
        });
person Yevgeniy Afanasyev    schedule 06.11.2015