Как визуализировать группу данных по нескольким свойствам с помощью Keen

У меня есть некоторые результаты данных, сгруппированные по двум свойствам,

var avgResponseTime = new Keen.Query("average", {
  eventCollection: "some_collection",
  targetProperty: "response_time",
  groupBy: ["inventory", "search_type"]
});

Как отобразить столбчатую диаграмму для отображения времени ответа по инвентарю для каждого типа поиска? в идеале столбцы одного типа поиска должны быть склеены

пример диаграммы

Я старался

client.draw(avgResponseTime, document.getElementById("some-element"), {
  chartType: "columnchart",
  title: "Average response time by inventory",
  chartOptions: {
  isStacked: true
 }
});

он плохо отображает данные ... метки столбцов отображаются как search_type1, search_type2, search_type1, search_type1 ... (повторяющаяся метка, вероятно, относится к инвентарю 2)

Спасибо.


keen-io
person vegibird    schedule 12.03.2015    source источник
comment
Можете ли вы предоставить отфотошопленную версию диаграммы, которую вы пытаетесь создать? response_time по инвентаризации для каждого типа поиска потребует трех осей, но похоже, что вы ищете гистограммы с накоплением.   -  person terrhorn    schedule 16.03.2015
comment
terrhorn: только что добавил изображение. Спасибо   -  person vegibird    schedule 26.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

Keen.Dataviz() не может нарисовать такую ​​диаграмму из коробки с помощью client.draw(), но вы можете напрямую настроить базовую диаграмму Google, немного обработав результаты с помощью client.run(). В основном вам нужно просмотреть результаты запроса и построить массив, который понимает библиотека диаграмм, чтобы получить то, что вы ищете.

Библиотека диаграмм Google наследуется по умолчанию, что означает, что вы можете создать экземпляр google.visualization.DataTable() напрямую, без необходимости отдельно включать библиотеку диаграмм Google.

Пример (требуется jQuery):

var avgResponseTime = new Keen.Query("average", {
  eventCollection: "some_collection",
  targetProperty: "response_time",
  groupBy: ["inventory", "search_type"]
});

client.run(avgResponseTime, function(error, response) {
  var result = response.result;

  // infer the inventory types
  var inventory_types = [];
  $.each(result, function(index, item) {
    inventory_types.push(item.inventory);
  });
  inventory_types = $.unique(inventory_types);

  // infer the search types
  var search_types = [];
  $.each(result, function(index, item) {
    search_types.push(item.search_type);
  });
  search_types = $.unique(search_types);

  var data = []; // array for our combined data points

  // we need a row for each unique search type
  $.each(search_types, function(index, item) {
    data.push([item]);
  });

  // iterate over each data point and push it into the correct array for our chart
  $.each(result, function(index, item) {
    // verify the search type and put the response time where it belongs
    for (var i = 0; i < search_types.length; i++) {
      if (data[i][0] == item.search_type) {
        data[i].push(item.result);
      }
    }
  });

  // init a datatable so we can customize our chart
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Inventory');

  // add each of our inventory types as a column in the datatable
  $.each(inventory_types, function(index, item) {
    dataTable.addColumn('number', item);
  });

  // add our response time averages
  dataTable.addRows(data);

  // configure the chart
  var options = {
    title: 'Average response time by inventory',
    height: 250,
    width: 'auto',
    hAxis: {
      title: 'Inventory',
    },
    vAxis: {
      title: 'Average Response Time'
    },
    legend: {
      position: 'top'
    }
  };

  // draw
  var chart = new google.visualization.ColumnChart(document.getElementById('some-element'));
  chart.draw(dataTable, options);
});

Этот код предполагает, что ваша коллекция событий содержит события, включающие как минимум следующие свойства:

{
  "search_type": "British Rail",
  "inventory": "Multi-trip",
  "response_time": 600
}
person terrhorn    schedule 07.04.2015