IDX Market Overview Dashboard Part 1: Data Integration and API Connections

​

IDX Market Overview

In this recipe, we will build a comprehensive end-to-end IDX market overview dashboard. The IDX market, also commonly referred to as IHSG, is currently among the most promising stock exchanges globally. For a further data or analysis of Indonesian Stock Market (IDX Market) you can go to Sectors App.

Did you know this about the Indonesia Stock Exchange (IDX)? According to the World Federation of Exchanges (WFE) data as of November 2024, the IDX Composite Index (IHSG) ranks as the 19th largest globally—outperforming the Singapore Exchange. However, its market size is still only half that of larger players like the Korean and Tehran Stock Exchanges. Explore detailed insights into Indonesia’s stock market conditions here.

But here’s the exciting part: Indonesia’s financial market is experiencing rapid growth—an impressive 41% increase over the past two years. To put this into perspective, let’s look at the top four countries by population and their GDP ranks:

1. India: Population 1.44 billion, GDP $3.9 trillion (5th largest)
2. China: Population 1.43 billion, GDP $18.5 trillion (2nd largest)
3. United States: Population 341.8 million, GDP $28.8 trillion (1st largest)
4. Indonesia: Population 280 million, GDP $1.48 trillion (16th largest economy)

Despite being the 4th most populous nation, Indonesia’s economy is ranked 16th in size, and its stock market ranks 19th globally (compared to Singapore at 23rd, Thailand at 26th, and Malaysia at 28th). This highlights Indonesia’s immense potential for growth. It’s early days for the country’s economy and financial markets, but the trajectory is clear—Indonesia is poised for a bright future.

Let’s embark on this exciting journey and explore more about IDX market overview!

​

Data Fetching and Data Connector in Looker Studio

​

Data Fetching using Google Sheets

In this recipe, we’ll use Google Sheets to fetch data from the Sectors API. Note that this is not the only way to access data from the Sectors API you can also use tools like Postman or any programming language to call the API. However, to keep things as low-code as possible, we’ll be using Google Sheets in this example. Before getting started, you’ll need two tools: the API Connector extension and a Sectors API key. For instructions on how to use the API Connector extension in Google Sheets, refer to this tutorial in the previous recipe.

If you already familiar with the API Connector Extension, now you just need to change the all we need to do is change the Request URL and add the headers with Authorization and value of your <API Key>.

This time we will fetch these data:

After finish configuring the API connector and fetch the data, then you will have the google sheets file that supposedly look like this

​

Data Fetching (API in Json Format) Directly into Looker Studio

After previously using Google Sheets as an intermediary to fetch data from the API before importing it into Looker Studio, we will now directly call the API in Looker Studio using the Windsor.ai connector. However, we can’t use an API with need to specify the authorization key in the url header, because it only have the box for url which make us can’t specify the header (our api-key).

Disclaimer: Supertype is not affiliated with Windsor.ai and takes no responsibility for any outcomes resulting from the use of this extension.

​

Steps to Use Windsor.ai Connector

1. Open Looker Studio and create a blank report.

2. The “Add data to report” menu should automatically appear. In the search box, type json. Under the Partner Connectors section, select the Windsor.ai connector (highlighted in the red square).
   

3. After selecting the connector, authorize Windsor.ai by clicking the authorize button. Be sure to read the terms and conditions as well as the permissions being granted. Again, Supertype is not responsible for any consequences arising from the use of this extension.
   

4. Once authorized, provide the URL of the JSON data source you want to use in the Enter the URL of a JSON data source field. For this article you can use this url https://raw.githubusercontent.com/geraldbryan/worlwide_mcap/refs/heads/main/worldwide_mcap.json. Then, click the Add button.
   

5. After adding the data source, you can use it in your report to create visualizations.
   

Important Note About Data Privacy:

For the Windsor.ai JSON connector, by default, the data you connect may be accessible to others in the Windsor.ai community. To ensure your data is private:

1. Go to the Resources menu -> Manage added data sources -> click Edit for the dataset connected via Windsor.ai.
   

2. In the settings, locate the Community visualization access option, set it to off, and click save.
   

This ensures that your data is not accessible to others by default.

​

Manage Data Source in Looker Studio

​

Data Source Type in Looker Studio

In Looker Studio there are two type of data source, which is the data type in Embedded scope and the other one is Reuseable Scope. The table below will explain the difference between those two type

Embedded	Reuseable
Created in a report	Can be created from homepage
Can only be accessed from a single report	Can be accessed by all reports
Shared / copied along with the report	Changes will be applied on all reports that used it as the data source
Can be edited by anyone who can edit the report	More control over sharing
Can be converted to reusable	Can not be converted to embedded

To change the data source from embedded to reusable, open the report that uses the desired data source. Navigate to the Resource menu -> Manage added data sources, and click Make Reusable on the dataset you want to reuse.

Once you’ve done that, the dataset can be imported directly into other dashboards without needing to configure the connection for every report. Simply go to the +Add Data menu -> switch to My data sources, and select the data you want to use.

​

Data Caching (Data Freshness) in Looker Studio

One advantage of using Looker Studio to create dashboards or data visualizations is the ability to set data auto-updates, commonly referred to as data freshness in Looker. The options for data freshness vary depending on the connector being used. For more detailed information, refer to this documentation.

Setting up data auto-update (data freshness) is similar to changing the data source type. Go to the Resource menu -> Manage added data sources. From there, select the data source you want to auto-update, click the Data Freshness option, and modify the schedule accordingly.

Alternatively, you can manually refresh all the data used in a report by clicking the three dots and selecting Refresh data.

​

The Fundamental of Data Visualization

Before we dive into the hands-on work in Looker Studio, let’s first explore the foundational concepts of data visualization and data storytelling. In this section, I’ll cover these essential topics, laying the groundwork for Aurellia’s detailed guide on building the dashboard in Part 2.

​

What is Data Visualization

In the big data era, the sheer volume and variety of data is actually a powerful ingredient for businesses to seek valuable insights. However, managing and interpreting the data could be incredibly complicated and time-consuming. This is where data visualization comes into play.

So, what exactly is data visualization?

Data visualization is the graphical representation of information and data. It converts complex datasets into visual elements like charts, graphs, maps and infographics, making it easier to interpret and understand intricate information quickly. We will be able to identify trends, outliers, patterns and correlations in the data. But before we delve deeper into the method, let’s first learn about the history of data visualization to how it has evolved to meet changing needs.

​

Key Principles of Data Visualization

Effective data visualization involves a set of core principles that ensures that visualizations communicate insights clearly and effectively to the intended audience.

​

Avoiding Data Visualization Common Pitfalls

When creating visualizations, it’s important to avoid common pitfalls to ensure your data is accurately represented and easily interpreted.

​

Misleading Visuals

1. Scale Issues: Manipulating the scale of axes can distort the data. For instance, truncating the y-axis in a bar chart can exaggerate differences between bars.

• Always use a consistent scale or start the axis at zero to avoid misleading viewers.

2. Inappropriate Chart Types: Using a pie chart for data with too many categories can be confusing. Pie charts work best with a small number of categories.

• For more categories, consider a bar chart instead.

3. Cherry-Picking Data: Selecting only a subset of data to support a specific narrative can be misleading.

• Ensure your visualization represents the full dataset to provide an accurate picture.

​

Overcomplicating with Too Much Data

1. Cluttered Visuals: Including too many data series or categories in a single chart can make it hard to interpret. Keep your visualizations focused and use additional charts if necessary to break down complex data.
2. Excessive Details: Adding too many details (e.g., excessive grid lines or labels) can overwhelm the viewer. Use clean, simple designs and only include essential information to ensure clarity.
3. Complexity Over Clarity: Sometimes, a simple chart (like a basic bar or line chart) can be more effective than a complex visualization (like a 3D chart or interactive dashboard). Prioritize clarity over complexity to ensure your audience can easily understand the data.

​

Data Storytelling

Traditional education often treats creative storytelling and technical analysis as separate skills, but today’s job market values professionals who excel in both. However, data visualization is a prime example of where these two areas intersect, making it a highly sought-after skill in our data-driven world. Data storytelling involves merging solid data with compelling narratives to present insights in a way that resonates with audiences. This approach relies on three essential components: data, narrative, and visuals.

1. Data: The raw numbers and facts that provide the foundation of the story.
2. Narrative: The context and interpretation that give meaning to the data.
3. Visuals: The charts, graphs, and other visual aids that illustrate the data and narrative.

By integrating these elements, data storytelling transforms complex data sets into understandable, memorable, and actionable insights. The goal is to make the data not just accessible, but also engaging and persuasive, turning dry statistics into a compelling story that drives home key points.

These are the steps to make a good data story telling

​

Coming Soon: Crafting Your Dashboard in Part 2

With a solid understanding of how to connect and optimize your data, you’re now ready to move on to Part 2, where we’ll bring this data to life. In the next section, Aurellia will guide you through building dynamic visualizations, adding interactivity with filters and controls, and creating a dashboard that tells a compelling data story.