The MongoDB Charts Embedding SDK Beta has Launched 🚀

Scott Sidwell
February 12, 2020 | Updated: February 19, 2020
#Charts

MongoDB Charts on Atlas now supports embedding using a JavaScript SDK (in beta), allowing you to programmatically create and interact with your charts in your own application.

Embedded Charts have just got an upgrade in the latest release of Charts on Atlas. The new Charts Embedding SDK allows you to render and control MongoDB Charts directly in your application via JavaScript, without needing to touch any HTML. It’s never been easier to enrich your applications with live visualizations. This has been a long-awaited feature that makes it stunningly easy to enrich your web applications with live visualizations from your data.

This beta release allows you to render unauthenticated charts with the SDK. Support for rendering authenticated charts with the SDK will be coming a bit later on. If you need a more secure embedding solution in the meantime, you can continue to use the Verified Signature option for IFrame embedded charts.

What Can You Do With the Embedding SDK?

The best way to show you is to demo it! The chart below was embedded using the Embedding SDK. Note how we are able to refresh the chart on demand and dynamically change what filters are applied to the chart using the drop-down.

Embedded MongoDB Chart Filtering — Explore this example yourself

Why Use the SDK Over the Existing IFrame Approach?

Previously, as a developer, you could only embed charts into your application by copying and pasting an IFrame snippet which you then inserted in your web application. While this worked for a number of users, others asked for a richer experience. The IFrame approach, while simple to integrate, delivers charts that can’t be programmatically controlled. For example, if you wanted to change a filter or theme after the chart was rendered on a page, you had to refresh the page to see a change in the chart. With the new SDK, not only can you now interact with a chart using JavaScript, but you will also have a better developer experience.

How Can I Get Started?

The easiest way to get started with the SDK is to include a script tag in the header of your page.

<html>
  <head>
     <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script>  
  </head>
  <body>
    <div id="chart" />
    <script>
      // use the SDK here via ChartsEmbedSDK
    </script>
  </body>
</html>

For larger projects, you can install the SDK using NPM.

npm install @mongodb-js/charts-embed-dom@beta --save

Once you’ve installed the package or added it to your page, you will need to configure it with the appropriate values for the chart you’re wishing to embed.

// when using npm:
// import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const sdk = new ChartsEmbedSDK({
  baseUrl: BASE_URL
});

const chart = sdk.createChart({ chartId: CHART_ID }); 
chart.render(document.getElementById('app'));

To get the ‘BASE_URL’ and ‘CHART_ID’, you’ll need to open up https://charts.mongodb.com and navigate to the ‘Embed Chart’ dialog for your chart. Here you can enable unauthenticated sharing, as well as click the ‘Javascript SDK’ tab to see the ‘Chart ID' and 'Base URL’.

Embed Charts

With these in hand, you can return to your code editor and fill in the missing pieces

// when using npm:
// import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const sdk = new ChartsEmbedSDK({
  baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh'
});

const chart = sdk.createChart({ chartId: '48043c78-f1d9-42ab-a2e1-f2d3c088f864' }); 
chart.render(document.getElementById('app'));

From here, you can call methods on the chart object like chart.setFilter({ ‘address.country’: 'Australia' }) to apply custom filters to your chart (assuming you’ve whitelisted the address.country field in the Embed Dialog) and chart.setRefreshInterval(1000) to set how often a chart should refresh dynamically in your application.

Give It a Try

We’d love to find out how you’re using the Charts Embedding SDK. If you have any questions, feel free to use the in-product chat, or if you have suggestions on how to improve anything in Charts, use the MongoDB Feedback Engine.

If you haven’t tried Charts yet, you can get started by signing up for MongoDB Atlas for free.

← Previous

Filter Your Dashboards with MongoDB Charts

MongoDB Charts on Atlas now supports dashboard-level filters, allowing you to quickly change the context of a single dashboard to better focus your analysis.

February 12, 2020

Next →

Modernize data between siloed data warehouses with Infosys Data Mesh and MongoDB

The Data Challenge in Digital Transformation Enterprises that embark on a Digital transformation often face significant challenges with accessing data in a timely manner—an issue that can quickly impede customer satisfaction. To deliver the best digital experience for customers, companies must create the right engagement strategy. This requires all relevant data available in the enterprise be readily accessible. For example, when a customer contacts an insurance company, it is important that the company has a comprehensive understanding of the customer’s background as well as any prior interactions, so they can orchestrate the best possible experience. Data is available in both BI (Business Intelligence) systems, like Enterprise Data Warehouses, and OI (Operational Intelligence) systems, like policy and claim systems. There is a need to bring these BI and OI systems together to avoid any disruption to the digital functions that may delay synchronization. Data removed from an operational system loses context. Re-establishing this domain context and providing persona-based access to the data requires domain-oriented, decentralized data ownership, as well as architecture. Ultimately, organizations seek to use data as a key to fueling the products and services they provide their customers. This data should minimize the cost of customer research—but the data needs to be trusted and high quality. Companies need access to these siloed sources of data in a seamless self-service approach across various product life cycles. The Challenge of Centralized Data Historically, businesses have handled large amounts of data from various sources by ingesting it all into a centralized database (data warehouse, data lake, or data lake on cloud). They would then feed insight drivers, like reporting tools and dashboards as well as online transaction processing applications, from that central repository. The challenge with this approach is the broken link between analytical systems and transactional systems that impedes the digital experience. Centralized systems, like data warehouses, introduce latency and fail to meet the real time response and performance levels needed to build next-generation digital experiences. What is Infosys Data Mesh? Data Mesh helps organizations bridge the chasm between analytics and application development teams within large enterprises. Data Mesh is an architecture pattern that takes a new approach to domain-driven distributed architecture and the decentralization of data. Its basic philosophy is to encapsulate the data, its relationships, context, and access functionality into a data product with guaranteed quality, trust, and ease of use for business consumption. Data Mesh is best suited for low-latency access to data assets used in digital transformations that are intended to improve experience through rich insights. With its richer domain flavor — distributed ownership, manageability, and low latency access — Data Mesh is best positioned as a bridge between transactional (consuming applications) and analytical systems. This diagram depicts the high-level solution view of Data Mesh: Data Mesh Key Design Principles Domain-first approach. Data as a product. Data Mesh products share the following attributes which maximize usability and minimize friction: Self-described: metadata is precise and accurate Discoverable and addressable: products are uniquely identifiable and easy to find Secure and well-governed: only those who are granted access have it Trustworthy: proper data quality conrtols are applie, SLA/SLOs are maintainted Open standard and interoperable: data formats — XBRL, JSON Build new products easily. Any cross-functional team can build a new, enterprise-level product in an existing domain and/or fro existing products Simplified access for multiple technology stacks. Polygot data and ports, cloud and non-cloud. Common infrastructure and services for all data pipelines and catalogs. Platform Requirements for a Data Mesh To build a data mesh, companies need a database platform that can create domain-driven data products that meet various enterprise needs. This includes: Flexible data structures — to accomodate new behaviors An API-driven construct — to access current data products and build new domain-data ones Support for high-performance query on large-scale data structures A shared, scalable infrastructure Why MongoDB is the Optimal Platform for Infosys Data Mesh MongoDB is the best platform for realizing the Infosys Data Mesh architecture and powering analytics-driven enterprises because it provides: A flexible document model and a poly-cloud infrastructure availability so teams can easily modify and enrich flat or hierarchical data models MongoDB Realm Webhooks to create service APIs which connect data across products and enable consumption needs based on business context A scalable, shared infrastructure and support for high-performance querying of large scale data Service APIs for constructing Infosys Data Mesh Two use cases: table, th, td { border: 1px solid black; border-collapse: collapse; } Case 1: Case 2: A wealth management firm offers a variety of products to its customers — things like checking and savings accounts, trading, credit and debit cards, insurance, and investment vehicles. Challenges: Each product is serviced by a different system and technology infrastructure Internal consumers of this data have different needs: product managers analyze product performance, wealth managers and financial advisors rely on customer-centric analytics, and financial control teams track the firm’s revenue performance Solution: Using the Infosys Data Mesh model, the firm’s data owners create domain-data products categorized by customer and product, and then curate and publish them through a technology-agnostic, API-driven service layer. Consumers can then use this service layer to build the data products they need to carry out their business functions. The Risk and Finance unit of a large global bank has multiple regional data lakes catering to each region’s management information system and analytical needs. This poses multiple challenges for creating global data products: Challeges: Technology varies across regions ETL can becomes less advantageous depending on circumstance Regulations govern cross-regional data transfer policies Solution: To address these challenges, the bank creates an architecture of regional data hubs for region-specific products and, as with Case 1, makes those products available to authorized consumers through a technology-agnostic, API-driven service layer. Next, it implements an enterprise data catalog with an easy-to-use search interface on top of the API layer. The catalog’s query engine executes cross-hub queries, creating a self-service model for users to seamlessly discover and consume data products and to align newer ones with their evolving business needs. Enterprise security platform integration ensures that all regulatory and compliance requirements are fully met. How Businesses Overall Can Benefit Data and Insights become pervasive and consumable across applications and personas Speed-to-insights (including real time) enable newer digital experiences and better engagement leading to superior business results Self-service through trusted data products is enabled Infosysy DNA Assets on MongoDB Accelerates the Creation of Industry-Specific Domain Data Products table, th, td { border: 1px solid black; border-collapse: collapse; } Infosys Genome Infosys Data Prep Infosys Marketplace Creates the foundation for Data Mesh by unifying semantics across industries Guides consumers through the product creation process with a scalable data preparation framework Enables discovery and consumption of domain-data products via an enterprise data catalog Download our Modernization Guide for information about which applications are best suited for modernization and tools to get started.

January 14, 2021