Visualizing multiple datasets

Attempting to hookup Keen javascript visualizer to two datasets, hitting errors in everything I've tried.

Tried using multi-analysis to get the response, this works but doesn't plug into the chart.

https://keen.io/docs/api/#multi-analysis

Also tried running separate queries and use client.run on keen analysis client. Each query runs fine separately but when run together produces and error in the chart regarding timeframe.start.

https://keen.io/docs/visualize/common-chart-examples/#area-step-chart-with-multiple-results

Tools:

"keen-analysis": "^3.4.0",
"keen-dataviz": "^3.5.3",
"keen-tracking": "^4.3.1",

Chart setup

const matchBreakdown = new keenDataviz({
  container: "#match-breakdown",
  type: "area-step",
  title: "Match Breakdown (last 2 months)",
  showLoadingSpinner: true
});

Multi-analysis attempt:

client
  .query("multi_analysis", {
    event_collection: "kitchen.matches",
    analyses: {
      "total_matches": {
        analysis_type: "count",
        filters: [
          {"operator":"eq","property_name":"environment","property_value":"production"}
        ]
      },
      "bad_matches": {
        analysis_type: "count",
        filters: [
          {"operator":"eq","property_name":"environment","property_value":"production"},
          {"operator":"eq","property_name":"match_count","property_value":0}
        ]
      }
    },
    timezone: "US/Mountain",
    group_by: ["date"],
    order_by: ["date"],
    timeframe: "this_60_days"
  })
  .then(res => {
    matchBreakdown.render(res);
  })
  .catch(err => {
    // Source data is missing a component at (0,1)!
    matchBreakdown.message(err.message);
  });

Multiple queries attempt:

const allMatches = client
  .query("count", {
    event_collection: "kitchen.matches",
    filters: [{"operator":"eq","property_name":"environment","property_value":"production"}],
    group_by: ["date"],
    order_by: ["date"],
    timezone: "US/Mountain",
    timeframe: "this_2_months"
  });

const badMatches = client
  .query("count", {
    event_collection: "kitchen.matches",
    filters: [
      {"operator":"eq","property_name":"environment","property_value":"production"},
      {"operator":"eq","property_name":"match_count","property_value":0}
    ],
    group_by: ["date"],
    order_by: ["date"],
    timezone: "US/Mountain",
    timeframe: "this_2_months"
  });

client
  .run([allMatches, badMatches])
  .then(res => {
    matchBreakdown.render(res);
  })
  .catch(error => {
    // Cannot read property 'start' of undefined
    matchBreakdown.message(error.message);
  });

Note that this works:

client.run([badMatches]).then(res => {
  matchBreakdown.render(res);
});

// Or this

client.run([allMatches]).then(res => {
  matchBreakdown.render(res);
});

The examples give no further information on how to format response data, it seems like it should just work.

I was checking Your problem and unfornatelly filters are not working for multianalysis, also You cannot use group_by while running few queries .run([allMatches, badMatches])

I prepared example with other solution based on this: https://jsfiddle.net/a2fvmk1h/

Instead of group_by You can use interval to receive similar results. Here is an example for You: https://jsfiddle.net/dariuszlacheta/h0x6mvan/14/ The fact that You are using the same queries count on the same event collection is causing problems with naming results so You have to do one trick. You need to change at least one 'analysis_type' for the results because otherwise data will be overwrite: res[1].query.analysis_type = 'games';

I dont have access to Your data but I guess this is how it will look with Your code:

const allMatches = client
  .query("count", {
    event_collection: "kitchen.matches",
    filters: [
      {
         "operator":"eq",
         "property_name":"environment",
         "property_value":"production"
      }
    ],
    interval: "daily"
    timezone: "US/Mountain",
    timeframe: "this_2_months"
  });

const badMatches = client
  .query("count", {
    event_collection: "kitchen.matches",
    filters: [
      {
         "operator":"eq",
         "property_name":"environment",
         "property_value":"production"
      },
      {
         "operator":"eq",
         "property_name":"match_count",
         "property_value":0
      }
    ],
    interval: "daily"
    timezone: "US/Mountain",
    timeframe: "this_2_months"
  });

client
  .run([allMatches, badMatches])
  .then(res => {
    res[1].query.analysis_type = 'badMatches';
    matchBreakdown.render(res);
  })
  .catch(error => {
    // Cannot read property 'start' of undefined
    matchBreakdown.message(error.message);
  });

I will try solve this issue with overwriting query names when two or more the same queries are used in .run([])