JSFiddle - React, Tailwind, and code Playground

by maciejrybaniec

HTML

<script src="https://cdn.jsdelivr.net/npm/keen-analysis@latest/dist/keen-analysis.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@keen.io/dataviz@latest/dist/dataviz.min.js"></script>
  <div id="container" style="width: 600px; height: 500px"></div>

JavaScript

const client = new KeenAnalysis({
    projectId: '5e429d77c9e77c0001a35cf1',
    readKey: '86900A71F1825A2C3F07C639B00B37A57CDCCBB446BBA7D207CF107D466AA0EC9212C08DA6E377995FFBC6E56AD0AB073D74C8B1BB366BD8D9BE802133561CAC55F6E96A845D6939A5DB7D08D2A49C668EAC7AFE4AAEA4BE7BD1572A655DCA8A',
  });

  const dataviz = new KeenDataviz({
    type: 'line',
    container: '#container',
    widget: {
      title: {
        content: 'Book purchases',
      },
      subtitle: {
        content: 'Monthly results',
      },
    },
    settings: {
      margins: {
        top: 20,
        left: 45,
        right: 15,
        bottom: 30
      },
      curve: 'spline',
    },
  });

  client
    .query({
      analysis_type: 'count',
      event_collection: 'book_purchase',
      timeframe: {
        start: '2019-08-01T00:00:00.000-00:00',
        end: '2020-02-01T00:00:00.000-00:00',
      },
      group_by: ['author'],
      interval: 'monthly',
    }).then((res) => {
      dataviz.render(res);
    });