{"id":545,"date":"2024-09-12T11:00:00","date_gmt":"2024-09-12T11:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=545"},"modified":"2024-10-15T23:36:48","modified_gmt":"2024-10-15T23:36:48","slug":"how-to-build-custom-data-visualizations-using-luzmo-flex","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/09\/12\/how-to-build-custom-data-visualizations-using-luzmo-flex\/","title":{"rendered":"How To Build Custom Data Visualizations Using Luzmo Flex"},"content":{"rendered":"<p>              <title>How To Build Custom Data Visualizations Using Luzmo Flex<\/title><\/p>\n<article>\n<header>\n<h1>How To Build Custom Data Visualizations Using Luzmo Flex<\/h1>\n<address>Paul Scanlon<\/address>\n<p>                  2024-09-12T11:00:00+00:00<br \/>\n                  2024-10-15T23:05:45+00:00<br \/>\n                <\/header>\n<p>This article is sponsored by <b>Luzmo<\/b><\/p>\n<p>In this article, I\u2019ll introduce you to <a href=\"https:\/\/www.luzmo.com\/flex\">Luzmo Flex<\/a>, a new feature from the Luzmo team who have been working hard making developer tooling to flatten the on-ramp for analytics reporting and data visualization.<\/p>\n<p>With Luzmo Flex, you can hook up a dataset and create beautifully crafted, fully customizable interactive charts that meet your reporting needs. They easily integrate and interact with other components of your web app, allowing you to move away from a traditional \u201cdashboard\u201d interface and build more bespoke data products.<\/p>\n<p>While many charting libraries offer similar features, I often found it challenging to get the data into the right shape that the library needed. In this article, I\u2019ll show you how you can build beautiful data visualizations using the Google Analytics API, and you won\u2019t have to spend any time \u201cmassaging\u201d the data!<\/p>\n<h2 id=\"what-is-luzmo-flex\">What Is Luzmo Flex?<\/h2>\n<p>Well, it\u2019s two things, really. First of all, Luzmo is a low-code platform for embedded analytics. You can create datasets from just about anything, connect them to APIs like Google Analytics or your PostgreSQL database, or even upload static data in a <code>.csv<\/code> file and start creating data visualizations with drag and drop.<\/p>\n<p>Secondly, Luzmo Flex is their new React component that can be configured to create custom data visualizations. Everything from the way you query your data to the way you display it can be achieved through code using the <a href=\"https:\/\/developer.luzmo.com\/guide\/flex--introduction?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">LuzmoVizItemComponent<\/a>.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aWhat%20makes%20Luzmo%20Flex%20unique%20is%20that%20you%20can%20reuse%20the%20core%20functionalities%20of%20Luzmo%e2%80%99s%20low-code%20embedded%20analytics%20platform%20in%20your%20custom-coded%20components.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f09%2fhow-build-custom-data-visualizations-luzmo-flex%2f\"><\/p>\n<p>What makes Luzmo Flex unique is that you can reuse the core functionalities of Luzmo\u2019s low-code embedded analytics platform in your custom-coded components.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>That means, besides creating ready-to-use datasets, you can set up functions like the following out-of-the-box:<\/p>\n<ul>\n<li><strong>Multi-tenant analytics<\/strong>: Showing different data or visualizations to different users of your app.<\/li>\n<li><strong>Localization<\/strong>: Displaying charts in multiple languages, currencies, and timezones without much custom development.<\/li>\n<li><strong>Interactivity<\/strong>: Set up event listeners to create complex interactivity between Luzmo\u2019s viz items and any non-Luzmo components in your app.<\/li>\n<\/ul>\n<h3 id=\"what-can-you-build-with-luzmo-flex\">What Can You Build With Luzmo Flex?<\/h3>\n<p>By combining these off-the-shelf functions with flexibility through code, Luzmo Flex makes a great solution for building bespoke data products that go beyond the limits of a traditional dashboard interface. Below are a few examples of what that could look like.<\/p>\n<h4 id=\"report-builder\">Report Builder<\/h4>\n<p>A custom report builder that lets users search and filter a dataset and render it out using a number of different charts.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/showcases.luzmo.com\/report-builder\/?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of a custom report builder\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/1-luzmo-flex-custom-report-builder.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Luzmo Flex: <a href=\"https:\/\/showcases.luzmo.com\/report-builder\/?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Report builder<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/1-luzmo-flex-custom-report-builder.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"filter-panel\">Filter Panel<\/h4>\n<p>Enable powerful filtering using HTML Select inputs, which will update each chart shown on the page.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/showcases.luzmo.com\/dashboard-filter-panel\/?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Dashboard filter panel\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/2-luzmo-flex-filter-panel.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Luzmo Flex:<a href=\"https:\/\/showcases.luzmo.com\/dashboard-filter-panel\/?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Dashboard filter panel<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/2-luzmo-flex-filter-panel.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"wearables-dashboard\">Wearables Dashboard<\/h4>\n<p>Or how about a sleep tracker hooked up to your phone to track all those important snoozes?<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/showcases.luzmo.com\/wearables-dashboard?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Wearables Dashboard\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/3-wearables-dashboard.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Luzmo Flex: <a href=\"https:\/\/showcases.luzmo.com\/wearables-dashboard?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Wearables Dashboard<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/3-wearables-dashboard.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"when-to-consider-luzmo-flex-vs-chart-libraries\">When to Consider Luzmo Flex vs Chart Libraries<\/h2>\n<p>When building data-intensive applications, using something like <a href=\"https:\/\/recharts.org\/en-US\">Recharts<\/a>, a well-known React charting library, you\u2019ll likely need to reformat the data to fit the required shape. For instance, if I request the top 3 page views from the last seven days for my site, <a href=\"https:\/\/www.paulie.dev\/\">paulie.dev<\/a>, I would have to use the Google Analytics API using the following query.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">import dotenv from 'dotenv';\nimport { BetaAnalyticsDataClient } from '@google-analytics\/data';\ndotenv.config();\n\nconst credentials = JSON.parse(\n  Buffer.from(process.env.GOOGLE&#095;APPLICATION&#095;CREDENTIALS&#095;BASE64, 'base64').toString('utf-8')\n);\n\nconst analyticsDataClient = new BetaAnalyticsDataClient({\n  credentials,\n});\n\nconst [{ rows }] = await analyticsDataClient.runReport({\n  property: `properties\/${process.env.GA4&#095;PROPERTY&#095;ID}`,\n  dateRanges: [\n    {\n      startDate: '7daysAgo',\n      endDate: 'today',\n    },\n  ],\n  dimensions: [\n    {\n      name: 'fullPageUrl',\n    },\n    {\n      name: 'pageTitle',\n    },\n  ],\n  metrics: [\n    {\n      name: 'totalUsers',\n    },\n  ],\n  limit: 3,\n  metricAggregations: ['MAXIMUM'],\n});\n<\/code><\/pre>\n<\/div>\n<p>The response would look something like this:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">[\n  {\n    \"dimensionValues\": [\n      {\n        \"value\": \"www.paulie.dev\/\",\n        \"oneValue\": \"value\"\n      },\n      {\n        \"value\": \"Paul Scanlon | Home\",\n        \"oneValue\": \"value\"\n      }\n    ],\n    \"metricValues\": [\n      {\n        \"value\": \"61\",\n        \"oneValue\": \"value\"\n      }\n    ]\n  },\n  {\n    \"dimensionValues\": [\n      {\n        \"value\": \"www.paulie.dev\/posts\/2023\/11\/a-set-of-sign-in-with-google-buttons-made-with-tailwind\/\",\n        \"oneValue\": \"value\"\n      },\n      {\n        \"value\": \"Paul Scanlon | A set of: \"Sign In With Google\" Buttons Made With Tailwind\",\n        \"oneValue\": \"value\"\n      }\n    ],\n    \"metricValues\": [\n      {\n        \"value\": \"41\",\n        \"oneValue\": \"value\"\n      }\n    ]\n  },\n  {\n    \"dimensionValues\": [\n      {\n        \"value\": \"www.paulie.dev\/posts\/2023\/10\/what-is-a-proxy-redirect\/\",\n        \"oneValue\": \"value\"\n      },\n      {\n        \"value\": \"Paul Scanlon | What Is a Proxy Redirect?\",\n        \"oneValue\": \"value\"\n      }\n    ],\n    \"metricValues\": [\n      {\n        \"value\": \"23\",\n        \"oneValue\": \"value\"\n      }\n    ]\n  }\n]\n<\/code><\/pre>\n<\/div>\n<p>To make that data work with Recharts, I\u2019d need to reformat it so it conforms to the following data shape.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">[\n  {\n    \"name\": \"Paul Scanlon | Home\",\n    \"value\": 61\n  },\n  {\n    \"name\": \"Paul Scanlon | A set of: \"Sign In With Google\" Buttons Made With Tailwind\",\n    \"value\": 41\n  },\n  {\n    \"name\": \"Paul Scanlon | What Is a Proxy Redirect?\",\n    \"value\": 23\n  }\n]\n<\/code><\/pre>\n<\/div>\n<p>To accomplish this, I\u2019d need to use an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\"><code>Array.prototype.map()<\/code><\/a> to iterate over each item, destructure the relevant data and return a key-value pair for the <code>name<\/code> and <code>value<\/code> for each.<\/p>\n<pre><code class=\"language-javascript\">const data = response.rows.map((row) =&gt; {\n  const { dimensionValues, metricValues } = row;\n\n  const pageTitle = dimensionValues[1].value;\n  const totalUsers = parseInt(metricValues[0].value);\n\n  return {\n    name: pageTitle,\n    value: totalUsers,\n  };\n});\n<\/code><\/pre>\n<p>And naturally, if you\u2019re reformatting data this way in your application, you\u2019d also want to write unit tests to ensure the data is always formatted correctly to avoid breaking your application\u2026 and all of this before you even get on to creating your charts!<\/p>\n<p>With Luzmo Flex, all of this goes away, leaving you more time to focus on which data to display and how best to display it.<\/p>\n<h2 id=\"the-first-steps-to-building-bespoke-data-products\">The First Steps to Building Bespoke Data Products<\/h2>\n<p>Typically, when building user interfaces that display data insights, your first job will be to figure out how to query the data source. This can take many forms, from RESTful API requests to direct database queries or sometimes reading from static files. Your next job will be figuring out when and how often these requests need to occur.<\/p>\n<ul>\n<li><strong>For data that rarely changes<\/strong>: Perhaps a query in the build step will work.<\/li>\n<li><strong>For data that changes regularly<\/strong>: A server-side request on page load.<\/li>\n<li><strong>For ever-changing data<\/strong>: A client-side request that polls an API on an interval.<\/li>\n<\/ul>\n<p>Each will likely inform your application\u2019s architecture, and there\u2019s no single solution to this. Your last job, as mentioned, will be wrangling the responses, reformatting the data, and displaying it in the UI.<\/p>\n<p>Below, I\u2019ll show you how to do this using Luzmo Flex by using a simple example product.<\/p>\n<h2 id=\"what-we-re-building-custom-data-visualizations-as-code\">What We\u2019re Building: Custom Data Visualizations As Code<\/h2>\n<p>Here\u2019s a screenshot of a simple data product I\u2019ve built that displays three different charts for different reporting dimensions exposed by the Google Analytics API for page views for my site, <a href=\"https:\/\/www.paulie.dev\/\">paulie.dev<\/a>, from the last seven days.<\/p>\n<p>You can find all the code used in this article on the following link:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/luzmo-official\/luzmo-flex-tutorial\">https:\/\/github.com\/luzmo-official\/luzmo-flex-tutorial<\/a><\/li>\n<\/ul>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/4-custom-data-visualizations-charts.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot of a simple data product that displays three different charts for different reporting dimensions exposed by the Google Analytics API\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/4-custom-data-visualizations-charts.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/4-custom-data-visualizations-charts.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"getting-started-with-luzmo\">Getting Started With Luzmo<\/h2>\n<p>Before we get going, hop over to Luzmo and <a href=\"https:\/\/app.luzmo.com\/signup?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">sign up for a free trial<\/a>. You might also like to have a read of one of the getting started guides listed below. In this article, I\u2019ll be using the Next.js starter.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.luzmo.com\/blog\/data-visualization-nextjs-luzmo?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Getting started with Luzmo Data Visualization and Next.js<\/a>\n<ul>\n<li><a href=\"https:\/\/github.com\/luzmo-official\/luzmo-getting-started-next-js\">https:\/\/github.com\/luzmo-official\/luzmo-getting-started-next-js<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/www.luzmo.com\/blog\/data-visualization-astro-luzmo?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Getting started with Luzmo Data Visualization and Astro<\/a>\n<ul>\n<li><a href=\"https:\/\/github.com\/luzmo-official\/luzmo-getting-started-astro\">https:\/\/github.com\/luzmo-official\/luzmo-getting-started-astro<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"creating-a-google-analytics-dataset\">Creating a Google Analytics Dataset<\/h2>\n<p>To create data visualization, you\u2019ll first need data! To achieve this using Luzmo, head over to the dashboard, select Datasets from the navigation, and select <strong>GA4 Google Analytics<\/strong>. Follow the steps shown in the UI to connect Luzmo with your Google Analytics account.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/5-ga4-google-analytics.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A dashboard with the selected Datasets from the navigation and highlighted GA4 Google Analytics\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/5-ga4-google-analytics.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/5-ga4-google-analytics.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>With the setup complete, you can now select which reporting dimensions to add to your dataset. To follow along with this article, select <strong>Custom selection<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/6-reporting-dimensions-custom-selection.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot with the Custom selection selected\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/6-reporting-dimensions-custom-selection.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/6-reporting-dimensions-custom-selection.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Lastly, select the following using the search input. <strong>Device Category<\/strong>, <strong>Page Title<\/strong>, <strong>Date<\/strong>, and <strong>Total users<\/strong>, then click <strong>Import<\/strong> when you\u2019re ready.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/7-google-analytics-dataset.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot with the selected Device Category, Page Title, Date, and Total users\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/7-google-analytics-dataset.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/7-google-analytics-dataset.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>You now have all the data required to build the Google Analytics dashboard. You can access the dataset ID from the URL address bar in your browser. You\u2019ll need this in a later step.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/8-google-analytics-dashboard.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A screenshot with the highlighted URL address bar in a browser\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/8-google-analytics-dashboard.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/8-google-analytics-dashboard.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>If you\u2019ve followed along from either of the first two getting started guides, you\u2019ll have your <strong>API Key<\/strong>, <strong>API Token<\/strong>, <strong>App server<\/strong>, and <strong>API host<\/strong> environment variables set up and saved in a <code>.env<\/code> file.<\/p>\n<h3 id=\"install-dependencies\">Install Dependencies<\/h3>\n<p>If you\u2019ve cloned one of the starter repositories, run the following to install the required dependencies.<\/p>\n<pre><code class=\"language-bash\">npm install\n<\/code><\/pre>\n<p>Next, install the Luzmo React Embed dependency which exports the <code>LuzmoVizItemComponent<\/code>.<\/p>\n<pre><code class=\"language-bash\">npm install  @luzmo\/react-embed@latest\n<\/code><\/pre>\n<p>Now, find <code>page.tsx<\/code> located in the <strong>src\/app<\/strong> directory, and add your dataset <code>id<\/code> as shown below.<\/p>\n<p>Add the <code>access<\/code> object from the destructured response and pass <code>access.datasets[0].id<\/code> onto the <code>LuzmoClientComponent<\/code> component using a prop named <code>datasetId<\/code>.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-diff\">\/\/ src\/app\/page.tsx\n\n\n+ import dynamic from 'next\/dynamic';\n\nimport Luzmo from '@luzmo\/nodejs-sdk';\n- import LuzmoClientComponent from '.\/components\/luzmo-client-component';\n+ const LuzmoClientComponent = dynamic(() =&gt; import('.\/components\/luzmo-client-component'), {\n  ssr: false,\n});\n\n\nconst client = new Luzmo({\n  api&#095;key: process.env.LUZMO&#095;API&#095;KEY!,\n  api&#095;token: process.env.LUZMO&#095;API&#095;TOKEN!,\n  host: process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;API&#095;HOST!,\n});\n\nexport default async function Home() {\n  const response = await client.create('authorization', {\n    type: 'embed',\n    username: 'user id',\n    name: 'first name last name',\n    email: 'name@email.com',\n    access: {\n      datasets: [\n        {\n-          id: '&lt;dataset&#095;id&gt;',\n+          id: '42b43db3-24b2-45e7-98c5-3fcdef20b1a3',\n          rights: 'use',\n        },\n      ],\n    },\n  });\n\n-  const { id, token } = response;\n+  const { id, token, access } = response;\n\n-  return &lt;LuzmoClientComponent authKey={id} authToken={token} \/&gt;;\n+  return &lt;LuzmoClientComponent authKey={id} authToken={token} datasetId={access.datasets[0].id} \/&gt;;\n}\n<\/code><\/pre>\n<\/div>\n<p>And lastly, find <code>luzmo-client-component.tsx<\/code> located in <strong>src\/app\/components<\/strong>. This is where you\u2019ll be creating your charts.<\/p>\n<h2 id=\"building-a-donut-chart\">Building a Donut Chart<\/h2>\n<p>The first chart you\u2019ll create is a Donut chart that shows the various devices used by visitors to your site.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/9-donut-chart.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A donut chart\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/9-donut-chart.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/9-donut-chart.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Add the following code to <code>luzmo-client-component.tsx<\/code> component.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-diff\">\/\/ src\/app\/component\/luzmo-client-component.tsx\n\n'use client';\n\n+ import { LuzmoVizItemComponent } from '@luzmo\/react-embed';\n\ninterface Props {\n  authKey: string;\n  authToken: string;\n+  datasetId: string;\n}\n\n- export default function LuzmoClientComponent({ authKey, authToken}: Props) {\n+ export default function LuzmoClientComponent({ authKey, authToken, datasetId }: Props) {\n\n+  const date = new Date(new Date().getTime() - 7 &#042; 24 &#042; 60 &#042; 60 &#042; 1000).toISOString(); \/\/ creates a date 7 days ago\n\n  console.log({ authKey, authToken });\n\n  return (\n    &lt;section&gt;\n+    &lt;div className='w-1\/2 h-80'&gt;\n+      &lt;LuzmoVizItemComponent\n+        appServer={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;APP&#095;SERVER}\n+        apiHost={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;API&#095;HOST}\n+        authKey={authKey}\n+        authToken={authToken}\n+        type='donut-chart'\n+        options={{\n+          title: {\n+            en: `Devices from last 7 days`,\n+          },\n+          display: {\n+            title: true,\n+          },\n+          mode: 'donut',\n+          legend: {\n+            position: 'bottom',\n+          },\n+        }}\n+        slots={[\n+          {\n+            name: 'measure',\n+            content: [\n+              {\n+                label: {\n+                  en: 'Total users',\n+                },\n+                column: '&lt;column id&gt;', \/\/ Total users\n+                set: datasetId,\n+                type: 'numeric',\n+                format: '.4f',\n+              },\n+            ],\n+          },\n+          {\n+            name: 'category',\n+            content: [\n+              {\n+                label: {\n+                  en: 'Device category',\n+                },\n+                column: '&lt;column id&gt;', \/\/ Device category\n+                set: datasetId,\n+                type: 'hierarchy',\n+              },\n+            ],\n+          },\n+        ]}\n+        filters={[\n+          {\n+            condition: 'or',\n+            filters: [\n+              {\n+                expression: '? &gt;= ?',\n+                parameters: [\n+                  {\n+                    column&#095;id: '&lt;column id&gt;', \/\/ Date\n+                    dataset&#095;id: datasetId,\n+                  },\n+                  date,\n+                ],\n+              },\n+            ],\n+          },\n+        ]}\n+      \/&gt;\n+    &lt;div\/&gt;\n    &lt;\/section&gt;\n  );\n}\n<\/code><\/pre>\n<\/div>\n<p>There\u2019s quite a lot going on in the above code snippet, and I will explain it all in due course, but first, I\u2019ll need to cover a particularly tricky part of the configuration.<\/p>\n<h3 id=\"column-ids\">Column IDs<\/h3>\n<p>You\u2019ll notice the <strong>filters parameters<\/strong>, <strong>measure<\/strong>, and <strong>category<\/strong> <strong>content<\/strong> all require a <strong>column id<\/strong>.<\/p>\n<p>In the <strong>filters parameters<\/strong>, the key is named <code>column_id<\/code>, and in the <strong>measure<\/strong> and <strong>category<\/strong>, the key is named <code>column<\/code>. Both of these are actually the column IDs from the dataset. And here\u2019s how you can find them.<\/p>\n<p>Back in the Luzmo dashboard, click into your dataset and look for the <strong>\u201cmore dots\u201d<\/strong> next to each column heading. From the menu, select <strong>Copy column id<\/strong>. Add each column ID to the keys in the configuration objects.<\/p>\n<p>In my example, I\u2019m using the <strong>Total users<\/strong> for the <strong>measure<\/strong>, the <strong>Device category<\/strong> for the <strong>category<\/strong>, and the <strong>Date<\/strong> for the <strong>filter<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/10-luzmo-dashboard.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Luzmo dashboard\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/10-luzmo-dashboard.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/10-luzmo-dashboard.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>If you\u2019ve added the column IDs correctly, you should be able to see a rendered chart on your screen!<\/p>\n<p>\u2026 and as promised, here\u2019s a breakdown of the configuration.<\/p>\n<h3 id=\"initial-props-donut-chart\">Initial Props Donut chart<\/h3>\n<p>The first part is fairly straightforward. <code>appServer<\/code>  and <code>authKey<\/code> are the environment variables you saved to your <code>.env<\/code> file, and <code>authKey<\/code> and <code>authToken<\/code> are destructured from the authorization request and passed into this component via props.<\/p>\n<p>The <code>type<\/code> prop determines which type of chart to render. In my example, I\u2019m using <code>donut-chart<\/code>, but you could choose from one of the many options available, <code>area-chart<\/code>, <code>bar-chart<\/code>, <code>bubble-chart<\/code>, <code>box-plot<\/code>, and many more. You can see all the available options in the <a href=\"https:\/\/developer.luzmo.com\/guide\/flex--introduction?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Luzmo documentation<\/a> under <a href=\"https:\/\/developer.luzmo.com\/guide\/flex--chart-docs?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Chart docs<\/a>.<\/p>\n<pre><code class=\"language-javascript\">&lt;LuzmoVizItemComponent\n  appServer={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;APP&#095;SERVER}\n  apiHost={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;API&#095;HOST}\n  authKey={authKey}\n  authToken={authToken}\n  type='donut-chart'\n<\/code><\/pre>\n<p>The one thing I should point out is my use of Tailwind classes: <code>w-1\/2<\/code> (width: 50%) and <code>h-80<\/code> (height: 20rem). The <code>LuzmoVizItemComponent<\/code> ships with height 100%, so you\u2019ll need to wrap the component with an element that has an actual height, or you won\u2019t be able to see the chart on the page as it could be 100% of the height of an element with no height.<\/p>\n<h3 id=\"donut-chart-options\">Donut Chart Options<\/h3>\n<p>The <code>options<\/code> object is where you can customize the appearance of your chart. It accepts many configuration options, among which:<\/p>\n<ul>\n<li>A <code>title<\/code> for the chart that accepts a <a href=\"https:\/\/www.loc.gov\/standards\/iso639-2\/php\/English_list.php\">locale<\/a> with corresponding text to display.<\/li>\n<li>A <code>display title<\/code> value to determine if the title is shown or not.<\/li>\n<li>A <code>mode<\/code> to determine if the chart is to be of type donut or pie chart.<\/li>\n<li>A <code>legend<\/code> option to determine where the legend can be positioned.<\/li>\n<\/ul>\n<p>All the available configuration options can be seen in the <a href=\"https:\/\/developer.luzmo.com\/flex\/charts\/donut-chart?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Donut chart documentation<\/a>.<\/p>\n<pre><code class=\"language-javascript\">options={{\n  title: {\n    en: `Devices from last 7 days`,\n  },\n  display: {\n    title: true,\n  },\n  mode: 'donut',\n  legend: {\n    position: 'bottom',\n  },\n}}\n<\/code><\/pre>\n<h3 id=\"donut-chart-slots\">Donut Chart Slots<\/h3>\n<p>Slots are where you can configure which column from your dataset to use for the <strong>category<\/strong> and <strong>measure<\/strong>.<\/p>\n<p>Slots can contain multiple measures, useful for displaying two columns of data per chart, but if more than two are used, one will become the measure.<\/p>\n<p>Each measure contains a <strong>content<\/strong> array. The content array, among many other configurations, can include the following:<\/p>\n<ul>\n<li>A <code>label<\/code> and locale,<\/li>\n<li>The <code>column<\/code> id from the <code>dataset<\/code>,<\/li>\n<li>The <code>datasetId<\/code>,<\/li>\n<li>The <code>type<\/code> of data you\u2019re displaying,<\/li>\n<li>A <code>format<\/code> for the data.<\/li>\n<\/ul>\n<p>The format used here is Python syntax for <a href=\"https:\/\/medium.com\/@coucoucamille\/float-formatting-in-python-ccb023b86417\">floating-point numbers<\/a>; it\u2019s similar to JavaScript\u2019s <code>.toFixed()<\/code> method, e.g <code>number.toFixed(4)<\/code>.<\/p>\n<p>The <code>hierarchy<\/code> type is \u200b\u200bthe Luzmo standard data type. Any text column is considered as an <a href=\"https:\/\/academy.luzmo.com\/article\/p68253bn?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">hierarchical<\/a> data type.<\/p>\n<p>You can read more in the <a href=\"https:\/\/developer.luzmo.com\/flex\/charts\/donut-chart?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Donut chart documentation<\/a> about available configuration options for <a href=\"https:\/\/developer.luzmo.com\/flex\/charts\/box-plot#slots?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">slots<\/a>.<\/p>\n<pre><code class=\"language-javascript\">slots={[\n  {\n    name: 'measure',\n    content: [\n      {\n        label: {\n          en: 'Total users',\n        },\n        column: '&lt;column id&gt;', \/\/ Total users\n        set: datasetId,\n        type: 'numeric',\n        format: '.4f',\n      },\n    ],\n  },\n  {\n    name: 'category',\n    content: [\n      {\n        label: {\n          en: 'Device category',\n        },\n        column: '&lt;column id&gt;', \/\/ Device category\n        set: datasetId,\n        type: 'hierarchy',\n      },\n    ],\n  },\n]}\n<\/code><\/pre>\n<h3 id=\"donut-chart-filters\">Donut Chart Filters<\/h3>\n<p>The filters object is where you can apply conditions that will determine which data will be shown. In my example, I only want to show data from the last seven days. To accomplish this, I first create the date variable:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">const date = new Date(new Date().getTime() - 7 &#042; 24 &#042; 60 &#042; 60 &#042; 1000).toISOString();\n<\/code><\/pre>\n<\/div>\n<p>This would produce an ISO date string, e.g., <code>2024-08-21T14:25:40.088Z<\/code>, which I can use with the filter. The filter uses Luzmo\u2019s <a href=\"https:\/\/developer.luzmo.com\/guide\/flex--component-api-reference#filterexpression?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Filter Expressions<\/a>, to determine if the date for each row of the data is greater than or equal to the date variable. You can read more about Filter Expressions in Luzmo\u2019s <a href=\"https:\/\/academy.luzmo.com\/article\/rfgtd5fs#filters?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">Academy article<\/a>.<\/p>\n<pre><code class=\"language-javascript\">filters={[\n  {\n    condition: 'or',\n    filters: [\n      {\n        expression: '? &gt;= ?',\n        parameters: [\n          {\n            column&#095;id: '&lt;column id&gt;', \/\/ Date\n            dataset&#095;id: datasetId,\n          },\n          date,\n        ],\n      },\n    ],\n  },\n]}\n<\/code><\/pre>\n<h2 id=\"building-a-line-chart\">Building a Line Chart<\/h2>\n<p>The second chart you\u2019ll be creating is a Line chart that displays the number of page views on each date from the last seven days from folks who visit your site.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/11-line-chart.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A line chart\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/11-line-chart.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/11-line-chart.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"initial-props-line-chart\">Initial Props Line Chart<\/h3>\n<p>As with the Donut chart, the initial props are pretty much the same, but the <code>type<\/code> has been changed to <code>line-chart<\/code>.<\/p>\n<pre><code class=\"language-javascript\">&lt;LuzmoVizItemComponent\n  appServer={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;APP&#095;SERVER}\n  apiHost={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;API&#095;HOST}\n  authKey={authKey}\n  authToken={authToken}\n  type='line-chart'\n<\/code><\/pre>\n<h3 id=\"line-chart-options\">Line Chart Options<\/h3>\n<p>The options for the Line chart are as follows, and the <code>mode<\/code> has been changed to <code>line-chart<\/code>.<\/p>\n<pre><code class=\"language-javascript\">options={{\n  title: {\n    en: `Site visits from last 7 days`,\n  },\n  display: {\n    title: true,\n  },\n  mode: 'grouped',\n}}\n<\/code><\/pre>\n<h3 id=\"line-chart-slots\">Line Chart Slots<\/h3>\n<p>The slots object is almost the same as before with the Donut chart, but for the Line chart, I\u2019m using the <code>date<\/code> column from the dataset instead of the device category, and instead of <strong>category<\/strong>, I\u2019m using the <code>x-axis<\/code> slot type. To ensure I\u2019m formatting the data correctly (by day), I\u2019ve used level 5. You can read <a href=\"https:\/\/www.google.com\/url?q=https:\/\/developer.luzmo.com\/guide\/flex--component-api-reference%23filterparameters&amp;sa=D&amp;source=docs&amp;ust=1726144209264303&amp;usg=AOvVaw1jXuSZXJ4dzRDkNcU_sZtQ\">more about levels in the docs<\/a>.<\/p>\n<pre><code class=\"language-javascript\">slots={[\n  {\n    name: 'measure',\n    content: [\n      {\n        label: {\n          en: 'Total users',\n        },\n        column: '&lt;column id&gt;', \/\/ Total users\n        set: datasetId,\n        type: 'numeric',\n        format: '.4f',\n      },\n    ],\n  },\n  {\n    name: 'x-axis',\n    content: [\n      {\n        label: {\n          en: 'Date',\n        },\n        column: '&lt;column id&gt;', \/\/ Date\n        set: datasetId,\n        type: 'datetime',\n        level: 5,\n      },\n    ],\n  },\n]}\n<\/code><\/pre>\n<h3 id=\"line-chart-filters\">Line Chart Filters<\/h3>\n<p>I\u2019ve used the same filters as I used in the Donut chart.<\/p>\n<h2 id=\"building-a-bar-chart\">Building a Bar Chart<\/h2>\n<p>The last chart you\u2019ll be creating is a Bar chart that displays the number of page views for the top ten most viewed pages on your site.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/12-bar-chart.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A bar chart\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/12-bar-chart.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-build-custom-data-visualizations-luzmo-flex\/12-bar-chart.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"initial-props-bar-chart\">Initial Props Bar Chart<\/h3>\n<p>As with the Donut and Line chart, the initial props are pretty much the same, but the <code>type<\/code> has been changed to <code>bar-chart<\/code>.<\/p>\n<pre><code class=\"language-javascript\">&lt;LuzmoVizItemComponent\n  className='w-full h-80'\n  appServer={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;APP&#095;SERVER}\n  apiHost={process.env.NEXT&#095;PUBLIC&#095;LUZMO&#095;API&#095;HOST}\n  authKey={authKey}\n  authToken={authToken}\n  type='bar-chart'\n<\/code><\/pre>\n<h3 id=\"bar-chart-options\">Bar Chart Options<\/h3>\n<p>The options for the Bar chart are a little more involved. I\u2019ve included some styling options for the <code>border-radii<\/code> of the bars, limited the number of results to 10, and sorted the data by the highest page view count first using the <code>sort<\/code> <code>by<\/code> <code>measure<\/code> and <code>direction<\/code> options.<\/p>\n<pre><code class=\"language-javascript\">options={{\n  title: {\n    en: `Page views from last 7 days`,\n  },\n  display: {\n    title: true,\n  },\n  mode: 'grouped',\n  bars: {\n    roundedCorners: 5,\n  },\n  limit: {\n    number: 10,\n  },\n  sort: {\n    by: 'measure',\n    direction: 'desc',\n  },\n}}\n<\/code><\/pre>\n<h3 id=\"line-chart-slots-1\">Line Chart Slots<\/h3>\n<p>As with the Line chart, I\u2019ve used an axis for one of the columns from the dataset. In this case, it\u2019s the <code>y-axis<\/code> which displays the page title.<\/p>\n<pre><code class=\"language-javascript\">slots={[\n  {\n    name: 'measure',\n    content: [\n      {\n        label: {\n          en: 'Total users',\n        },\n        column: '&lt;column id&gt;', \/\/ Total users\n        set: datasetId,\n        type: 'numeric',\n        format: '.4f',\n      },\n    ],\n  },\n  {\n    name: 'y-axis',\n    content: [\n      {\n        label: {\n          en: 'Page title',\n        },\n        column: '&lt;column id&gt;', \/\/ Page title\n        set: datasetId,\n        type: 'hierarchy',\n      },\n    ],\n  },\n]}\n<\/code><\/pre>\n<h3 id=\"bar-chart-filters\">Bar Chart Filters<\/h3>\n<p>I\u2019ve used the same filters as I used in the Donut and Line chart.<\/p>\n<h2 id=\"what-s-next\">What\u2019s Next<\/h2>\n<p>As you can see, there are plenty of types of charts and customization options. Because this is just an \u201cordinary\u201d React component, <strong>you can very easily make it configurable by an end user<\/strong> by allowing options to be set and unset using HTML input elements, checkbox, select, date, and so on.<\/p>\n<p>But for me, the real power behind this is not having to mutate data!<\/p>\n<p>This is particularly pertinent when displaying multiple charts with different reporting dimensions. Typically, this would require each to have their own utility function or reformatting method. That said, setting column IDs and dataset IDs is a little fiddly, but once you have the component hooked up to the dataset, you can configure and reconfigure as much as you like, all without having to rewrite data formatting functions.<\/p>\n<p>If you\u2019re interested in bringing data to life in your application and want to get it done without the usual headaches, <a href=\"https:\/\/www.luzmo.com\/book-a-demo?utm_medium=referral&amp;utm_source=smashing-magazine&amp;utm_campaign=ALL_blog_luzmo-flex-tutorial\">book a free demo with the Luzmo team<\/a> to learn more!<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk, il)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>How To Build Custom Data Visualizations Using Luzmo Flex How To Build Custom Data Visualizations Using Luzmo Flex Paul Scanlon 2024-09-12T11:00:00+00:00 2024-10-15T23:05:45+00:00 This article is sponsored by Luzmo In this article, I\u2019ll introduce you to Luzmo Flex, a new feature from the Luzmo team who have been working hard making developer tooling to flatten the&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-ux"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":1,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/545\/revisions\/546"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}