How to draw beautiful charts with Logspot

In this tutorial, we will be guiding you step-by-step on how to create beautiful charts from application events tracked by Logspot.

Pre-requisites

You will need to have a Logspot account and some data to display on your charts.

Create your new account if you haven't registered yet and copy public key from the Project settings.

Add example tracking code to your application. You can check our other article to see how to track events in Next.js or any website or you can view Logspot docs.

In this example, we will be using User Subscribed event, but you can type any name you like.

import Logspot from "@logspot/web";

Logspot.init({ publicKey: "YOUR_PUBLIC_KEY" });

Logspot.track({
  event: "User Subscribed"
});

Try the tracking and generated some data for charts.

Gradient chart

Once we have some data in Logspot, we can start drawing charts.

We will use the recharts library for charts. First, let's create a composed chart with a simple line chart:

import { Area, ComposedChart, Line } from "recharts";

const DATA = [
  {day: '2021-12-19T00:00:00.000Z', count: 17},
  {day: '2021-12-20T00:00:00.000Z', count: 27},
  {day: '2021-12-21T00:00:00.000Z', count: 32},
  {day: '2021-12-22T00:00:00.000Z', count: 42},
  {day: '2021-12-23T00:00:00.000Z', count: 50},
  {day: '2021-12-24T00:00:00.000Z', count: 51},
  {day: '2021-12-25T00:00:00.000Z', count: 52},
  {day: '2021-12-27T00:00:00.000Z', count: 58},
  {day: '2021-12-28T00:00:00.000Z', count: 123},
  {day: '2021-12-29T00:00:00.000Z', count: 167},
]

const Chart = () => {
  return (
    <ComposedChart width={500} height={300} data={DATA}>
     <Line
        type="monotone"
        unit="M"
        strokeLinecap="round"
        strokeWidth={1}
        dataKey="count"
        stroke="#F64900"
        dot={false}
        legendType="none"
      />
    </ComposedChart>
  );
};

Let's now draw a nice gradient under the line.

const Chart = () => {
  return (
    <ComposedChart width={500} height={300} data={DATA}>
      <defs>
        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
          <stop offset="5%" stopColor="#F64900" stopOpacity={0.7} />
          <stop offset="95%" stopColor="#F64900" stopOpacity={0.1} />
        </linearGradient>
      </defs>

      <Line
        type="monotone"
        unit="M"
        strokeLinecap="round"
        strokeWidth={1}
        dataKey="count"
        stroke="#F64900"
        isAnimationActive={false}
        dot={false}
        legendType="none"
      />
      <Area
        type="monotone"
        dataKey="count"
        stroke={false}
        strokeWidth={2}
        isAnimationActive={false}
        fillOpacity={1}
        fill="url(#colorUv)"
      />
    </ComposedChart>
  );
};

Fetching analytics data from Logspot

Logspot Analytics API is available currently only for server-side applications (you need to use your secret key). You shouldn't expose your secret key on the client side.

We will use it here Next.js, because it has a nice feature of server-side rendering where we fetch the analytics data securely.

import React, { useEffect, useState } from "react";

export default function Home({ data, count }) {
  return (
    <div style={{ margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px'}}>
      <label style={{fontWeight: 'bold'}}>Total subscribers</label>
      <label style={{fontWeight: 'bold'}}>{count}</label>
      <Chart
        data={data}
      />
    </div>
  );
}

Update your Chart component, so that it can consume data from props:

const Chart = ({data}) => {
  return (
    <ComposedChart width={500} height={300} data={data}>
      ...
    </ComposedChart>
  );
};

Now we only miss the data fetching, so let's add getServerSideProps function to our page.

Logspot Analytics API delivers you:

• total event count: count-events
• event count per day: count-events-per-day
• cummulative sum running-total of events: count-events-running-total-per-day
• total unique users: count-unique-users
• total unique users per day: count-unique-users-per-day

In our example, we will use count-events-running-total-per-day. You can read more about configuration of the Logspot Analytics API here.

import axios from "axios";

export async function getServerSideProps(context) {
  const params = {
    event_name: "User Subscribed"
  };

  const {
    data: { data },
  } = await axios.post(
    "<https://api.logspot.io/analytics/count-events-running-total-per-day>",
    params,
    {
      headers: {
        "x-logspot-sk": "YOUR_SECRET_KEY",
      },
    }
  );

  const {
    data: { data: count },
  } = await axios.post("<https://api.logspot.io/analytics/count-events>", params, {
    headers: {
      "x-logspot-sk": "YOUR_SECRET_KEY",
    },
  });

  return {
    props: { data, count },
  };
}

You can view the source code of this example on Github.