We launched Sisense Compose SDK to provide developers with unmatched power and flexibility to embed analytics into their apps, exactly the way they want to. A signature benefit is that it provides engineers with an incredibly flexible way to fetch and manipulate data from Sisense, using it seamlessly within web applications, all using the latest frameworks and languages such as React and TypeScript. With Compose SDK, you can now easily flow data into the charting components you want to use, so you have the freedom to build the pixel-perfect visualization experiences your users and customers demand.
In this article, I’ll share how Compose SDK gives you the flexibility to not only use your already extensive set of <a href="https://sisense.dev/guides/sdk/modules/sdk-ui/functions/function.Chart.html">charting components</a>, but to connect Sisense data to popular third-party charting libraries, such as <a href="https://plotly.com/javascript/">Plotly</a>, <a href="https://mui.com/x/react-charts/">MUI Charts</a>, or <a href="https://www.chartjs.org/">Chart.js</a> for any visualization experience you need now or in the future.
I’ll walk you through code examples of using Compose SDK components to load data from a data model in Sisense, transform, and structure it in any way required by third-party charts, and then render it. The examples will use Plotly and MUI charting components, but the flow and techniques can be applied to other charting libraries.
The code examples below should work with an existing or new React project with TypeScript. If you don’t have an existing app, follow the <a href="https://sisense.dev/guides/sdk/quickstart.html">Quickstart guide</a> to set up one.
Full code for the examples can be accessed at this GitHub repo: <a href="https://github.com/imtuanpham/csdk-sandbox">GitHub &#8211; imtuanpham/csdk-sandbox: A sandbox application for testing Sisense Compose SDK</a>
Fetching data with Compose SDK
Before diving into the integration, it&#8217;s essential to understand how Compose SDK fetches data. The SDK provides a React hook called useExecuteQuery that allows querying data from a specific data model in a Sisense instance. The hook also handles data aggregation and data filtering if needed.
For example, in the first code snippet provided, we use the useExecuteQuery hook to fetch data from the Sample ECommerce data model:
<code>const { data, isLoading, isError } = useExecuteQuery({</code>
<code>dataSource: DM.DataSource,</code>
<code>dimensions: [DM.Commerce.AgeRange],</code>
<code>measures: [</code>
<code>measures.sum(DM.Commerce.Cost, 'Total Cost'),</code>
<code>measures.sum(DM.Commerce.Revenue, 'Total Revenue'),</code>
<code>],</code>
<code>});</code>
<code>if (isLoading) {</code>
<code>return &lt;div&gt;Loading...&lt;/div&gt;;</code>
<code>}</code>
<code>if (isError) {</code>
<code>return &lt;div&gt;Error&lt;/div&gt;;</code>
<code>}</code>
Here, dataSource specifies the data model we&#8217;re pulling from, which in this case is Sample ECommerce. Parameters dimensions and measures define what data we want to retrieve following the dimensional modeling of your data source. In this case, we&#8217;re fetching the AgeRange dimension and summing up the Cost and Revenue measures.
Notice the isLoading and isError flags? The hook provides these to make it easier to handle various data states. You can display loading spinners, error messages, or fallback UI without any extra effort.
Visualizing data with a Plotly bar chart
Plotly.js is a high-level, declarative charting library that comes with an extensive range of chart types. It is built on top of D3.js and WebGL, which allows it to produce interactive, web-friendly visualizations with high performance. Plotly.js supports popular front-end frameworks including React, Angular, and Vue.
Once we have the data, the next step is to transform it into a format that third-party charting libraries can understand. In our example, we&#8217;re using a Plotly bar chart but the flow and logic can be applied to other libraries.
The data transformation is pretty straightforward:
<code>const x1: number[] = [];</code>
<code>const y1: number[] = [];</code>
<code>const y2: number[] = [];</code>
<code>data?.rows.forEach((row) =&gt; {</code>
<code>x1.push(row[0].data);</code>
<code>y1.push(row[1].data);</code>
<code>y2.push(row[2].data);</code>
<code>});</code>
Here, three arrays (x1, y1, and y2) are initialized to hold values of Age Range, Total Cost, and Total Revenue. The data?.rows.forEach loop iterates through each row of the fetched data, populating these arrays.
Subsequently, two &#8220;traces&#8221; (or series) are created for the bar chart:
<code>const trace1: Plotly.Data = {</code>
<code>x: x1,</code>
<code>y: y1,</code>
<code>type: 'bar',</code>
<code>name: 'Total Cost',</code>
<code>};</code>
<code>const trace2: Plotly.Data = {</code>
<code>x: x1,</code>
<code>y: y2,</code>
<code>type: 'bar',</code>
<code>name: 'Total Revenue',</code>
<code>};</code>
<code>const plotData = [trace1, trace2];</code>
Each trace represents a set of bars on the chart. trace1 represents the &#8220;Total Cost&#8221; bars, and trace2 represents the &#8220;Total Revenue&#8221; bars.
The transformed data can now be used to create various types of charts. While the specifics may vary depending on the library, the general approach remains the same.
<code>const layout = {</code>
<code>title: 'Total Cost and Revenue by Age Ranges',</code>
<code>xaxis: { title: 'Age Range' },</code>
<code>yaxis: { title: 'Cost and Revenue ($)' },</code>
<code>width: 900,</code>
<code>height: 500,</code>
<code>};</code>
<code>return &lt;Plot data={plotData} layout={layout} /&gt;;</code>
The layout object defines representation properties of the chart, such as its title, axis labels, and size. The Plot component then takes in the plotData (which contains our two traces) and the layout to render the bar chart.
<div id="attachment_744362" style="width: 1034px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-744362" decoding="async" loading="lazy" class="wp-image-744362 size-large" src="https://cdn.sisense.com/wp-content/uploads/blog-img1-1024x554.png" alt="Plotly bar chart showing Total Cost and Total Revenue by Age Range" width="1024" height="554" srcset="https://cdn.sisense.com/wp-content/uploads/blog-img1-1024x554.png 1024w, https://cdn.sisense.com/wp-content/uploads/blog-img1-300x162.png 300w, https://cdn.sisense.com/wp-content/uploads/blog-img1.png 1772w" sizes="(max-width: 1024px) 100vw, 1024px" />Plotly bar chart showing Total Cost and Total Revenue by Age Range</div>
Visualizing data with a MUI bar chart
The same flow from the previous example can also apply to the MUI charting library. However, the data transformation for MUI Bar Chart is slightly different:
<code>const dataset =</code>
<code>data?.rows.map((row) =&gt; ({</code>
<code>ageRange: row[0].data,</code>
<code>totalCost: row[1].data,</code>
<code>totalRevenue: row[2].data,</code>
<code>})) || [];</code>
Here, we&#8217;re mapping through each of the rows, which is an array, and creating a new object that has ageRange, totalCost, and totalRevenue properties.
For the layout of the chart, you&#8217;d define your x-axis, y-axis, and data series, much like you would in any charting library.
<code>&lt;BarChart</code>
<code>dataset={dataset}</code>
<code>xAxis={[{ scaleType: 'band', dataKey: 'ageRange', label: 'Age Range' }]}</code>
<code>series={[</code>
<code>{ dataKey: 'totalCost', label: 'Total Cost', valueFormatter },</code>
<code>{ dataKey: 'totalRevenue', label: 'Total Revenue', valueFormatter },</code>
<code>]}</code>
<code>yAxis={[</code>
<code>{</code>
<code>label: 'Cost and Revenue ($)',</code>
<code>},</code>
<code>]}</code>
<code>width={800}</code>
<code>height={500}</code>
<code>margin={{ left: 100 }}</code>
<code>sx={{</code>
<code>[`.${axisClasses.left} .${axisClasses.label}`]: {</code>
<code>transform: 'rotate(-90deg) translate(0px, -50px)',</code>
<code>},</code>
<code>}}</code>
<code>/&gt;</code>
In the above code, the xAxis prop defines the x-axis of the chart, and the series prop defines the data series that will be displayed.
<div id="attachment_744363" style="width: 1034px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-744363" decoding="async" loading="lazy" class="size-large wp-image-744363" src="https://cdn.sisense.com/wp-content/uploads/blog_img2-1024x559.png" alt="MUI Bar chart showing Total Cost and Total Revenue by Age Range" width="1024" height="559" srcset="https://cdn.sisense.com/wp-content/uploads/blog_img2-1024x559.png 1024w, https://cdn.sisense.com/wp-content/uploads/blog_img2-300x164.png 300w, https://cdn.sisense.com/wp-content/uploads/blog_img2.png 1642w" sizes="(max-width: 1024px) 100vw, 1024px" />MUI Bar chart showing Total Cost and Total Revenue by Age Range</div>
Combining multiple chart types into a hybrid chart
MUI&#8217;s charting library allows for combining multiple chart types. In the third code example, we&#8217;ve combined a bar chart and a line chart in a single visualization. In addition to a bar chart showing Cost and Revenue on the left y-axis, we show a line chart of sales Quantity on the right y-axis.
<div id="attachment_744364" style="width: 1034px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-744364" decoding="async" loading="lazy" class="size-large wp-image-744364" src="https://cdn.sisense.com/wp-content/uploads/blog_img3-1024x540.png" alt="Hybrid chart showing Total Cost, Total Revenue, and Total Quantity by Age Range." width="1024" height="540" srcset="https://cdn.sisense.com/wp-content/uploads/blog_img3-1024x540.png 1024w, https://cdn.sisense.com/wp-content/uploads/blog_img3-300x158.png 300w, https://cdn.sisense.com/wp-content/uploads/blog_img3.png 1702w" sizes="(max-width: 1024px) 100vw, 1024px" />Hybrid chart showing Total Cost, Total Revenue, and Total Quantity by Age Range.</div>
In general, this is achieved using the ChartContainer component, which acts as a wrapper for multiple chart components:
<code>&lt;ChartContainer ...&gt;</code>
<code>&lt;BarPlot /&gt;</code>
<code>&lt;LinePlot /&gt;</code>
<code>...</code>
<code>&lt;/ChartContainer&gt;</code>
Inside the ChartContainer, we&#8217;ve added both BarPlot and LinePlot components, allowing us to visualize both bar and line charts simultaneously.
To fetch the Total Quantity for the line chart, the data fetching hooking is extended to include the measure for Quantity:
<code>const { data, isLoading, isError } = useExecuteQuery({</code>
<code>dataSource: DM.DataSource,</code>
<code>dimensions: [DM.Commerce.AgeRange],</code>
<code>measures: [</code>
<code>measures.sum(DM.Commerce.Cost),</code>
<code>measures.sum(DM.Commerce.Revenue),</code>
<code>measures.sum(DM.Commerce.Quantity),</code>
<code>],</code>
<code>});</code>
The data transformation requires some adjustment to build separate arrays for each of the series:
<code>const seriesAgeRange = data?.rows.map((row) =&gt; row[0].data) || [];</code>
<code>const seriesTotalCost = data?.rows.map((row) =&gt; row[1].data) || [];</code>
<code>const seriesTotalRevenue = data?.rows.map((row) =&gt; row[2].data) || [];</code>
<code>const seriesTotalQuantity = data?.rows.map((row) =&gt; row[3].data) || [];</code>
As you may recall, this transformation is very similar to the logic for the Plotly bar chart in the first example. Here, the map() method on the rows array is used, instead of forEach(), to introduce you to different techniques to achieve the same structure for the transformed data.
The series array is then created to specify the types of charts and associate them with the corresponding y-axes:
<code>const series = [</code>
<code>{</code>
<code>type: 'bar',</code>
<code>yAxisKey: 'costAndRevenue',</code>
<code>data: seriesTotalCost,</code>
<code>},</code>
<code>{</code>
<code>type: 'bar',</code>
<code>yAxisKey: 'costAndRevenue',</code>
<code>data: seriesTotalRevenue,</code>
<code>},</code>
<code>{</code>
<code>type: 'line',</code>
<code>yAxisKey: 'quantity',</code>
<code>color: 'red',</code>
<code>data: seriesTotalQuantity,</code>
<code>},</code>
<code>] as AllSeriesType[];</code>
Putting all together, the ChartContainer from MUI is used to render the chart:
<code>&lt;ChartContainer</code>
<code>series={series}</code>
<code>width={860}</code>
<code>height={500}</code>
<code>margin={{ left: 100, right: 100 }}</code>
<code>xAxis={[</code>
<code>{</code>
<code>id: 'age',</code>
<code>data: seriesAgeRange,</code>
<code>scaleType: 'band',</code>
<code>valueFormatter: (value) =&gt; value.toString(),</code>
<code>},</code>
<code>]}</code>
<code>sx={{</code>
<code>[`.${axisClasses.left} .${axisClasses.label}`]: {</code>
<code>transform: 'rotate(-90deg) translate(0px, -50px)',</code>
<code>},</code>
<code>[`.${axisClasses.right} .${axisClasses.label}`]: {</code>
<code>transform: 'rotate(-90deg) translate(0px, 35px)',</code>
<code>},</code>
<code>}}</code>
<code>yAxis={[</code>
<code>{</code>
<code>id: 'costAndRevenue',</code>
<code>scaleType: 'linear',</code>
<code>label: 'Cost and Revenue ($)',</code>
<code>},</code>
<code>{</code>
<code>id: 'quantity',</code>
<code>scaleType: 'linear',</code>
<code>label: 'Total Quantity',</code>
<code>},</code>
<code>]}</code>
<code>&gt;</code>
<code>&lt;BarPlot /&gt;</code>
<code>&lt;LinePlot /&gt;</code>
<code>&lt;ChartsXAxis label="Age Range" position="bottom" axisId="age" /&gt;</code>
<code>&lt;ChartsYAxis label="Cost and Revenue ($)" position="left" axisId="costAndRevenue" /&gt;</code>
<code>&lt;ChartsYAxis label="Total Quantity" position="right" axisId="quantity" /&gt;</code>
<code>&lt;/ChartContainer&gt;</code>
Here, ChartContainer is configured with various props like series, width, height, xAxis, and yAxis to customize the chart. Inside ChartContainer, BarPlot and LinePlot components render the bar and line charts, respectively. ChartsXAxis and ChartsYAxis components are used to customize the axes.
Sign up to learn more
In this post, you learned how Compose SDK gives you total control in fetching and manipulating data from Sisense, so you have the flexibility to visualize it using third-party libraries like MUI Charts, Plotly, or Chart.js. The approach remains the same: fetch, transform, and visualize. Simply, Compose SDK enables you to deliver the exact visualization you need, in your app, no limits. Better yet, we’ve designed Compose SDK so you can retrieve data in a way that’s tailored precisely to your needs.
To go deeper, <a href="/webinars/how-to-build-data-products-with-insights/">register</a> to join me, and the Sisense product team on Wednesday, October 11 at 11 AM EST, for a live webinar. We’ll share the inside track on Compose SDK and answer any of your questions. Sign up for “<a href="/webinars/how-to-build-data-products-with-insights/">How to build next-gen data products with insights</a>”, and if you attend, you’ll have a chance to win one of twenty $30 gift cards in a random drawing. Hope to see you there!

Take control of your data visualizations: Connecting to third-party libraries with Compose SDK

LinkedIn

Twitter

GitHub

curve-image-unique-image-unique

curve

3-dark-2-image-unique-image-unique

3 DARK 2

Get the latest in analytics right in your inbox.

Article