Atlas Charts

Atlas

Atlas Charts

MongoDB Atlas のリアルタイムアプリケーションデータの可視化を簡単に作成、共有、埋め込みできます。

無料トライアルデモをご覧ください

高速でシンプルなリアルタイムの洞察

わずか数クリックで動的なダッシュボードを作成し、AI でチャートを生成します。すべての Atlas プロジェクトはデフォルトで利用可能です。ダッシュボードは自動的に更新され、チームと簡単に共有できます。

詳しく見る

データに基づく意思決定を実現

JSON データを直接操作することで、アナリティクスのワークフローを簡素化できます。ネイティブなドキュメントモデルのサポートにより、洞察の検索にかかる時間を短縮し、意思決定により多くの時間を費やすことができます。従来のビジネスインテリジェンスツールのように、データを平坦化する必要はありません。

詳しく見る

組み込みアナリティクスで最新のエクスペリエンスを構築

iframe を使用してすばやく設定するか、SDK を使用してより優れた制御やカスタマイズを行うことで、あらゆるアプリケーションにチャートやダッシュボードを埋め込むことができます。ユーザーが必要とする場所に強力な洞察を提供します。

詳しく見る

組織全体で洞察を活用

Charts のきめ細かなチーム共有、組織全体のアクセス権、スケジュールされたレポート作成機能を使用して、洞察を簡単に共有できます。

詳しく見る

組み込み分析で Charts をさらに活用

ドキュメントを見る

Atlas Charts には可視化を埋め込むための複数の方法が用意されており、アプリケーションからリアルタイムの洞察を簡単に得ることができます。

ドキュメントを見る

iframe はすばやく簡単に使用でき、サイズ設定、更新間隔、表示テーマのカスタマイズオプションも用意されています。

ドキュメントをご覧ください

iframe はすばやく簡単に使用でき、サイズ設定、更新間隔、表示テーマのカスタマイズオプションも用意されています。

ドキュメントをご覧ください

チャート

ダッシュボード

Code Snippet

チャートのタイトル、説明、軸、チャネル、色、条件付き書式のすべてを SDK を通じてカスタマイズできます。

ドキュメントをご覧ください

JavaScript

Code Snippet

イベントハンドラーを使用して、埋め込みチャートにインタラクティブ機能を追加します。要素をクリックすると、詳細の表示、データのハイライト、他のチャートのフィルタリングを行うことができます。

ドキュメントをご覧ください

JavaScript

Code Snippet

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
 
const sdk = new ChartsEmbedSDK({
 baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // 任意 : 「チャートの埋め込み」ダイアログの Base URL に~置換~
});
 
const chart1 = sdk.createChart({
 chartId: "CHARTID#", // // 任意 : 「チャートの埋め込み」ダイアログの Chart ID に~置換~
 height: "700px",
});
 
const chart2 = sdk.createChart({
 chartId: "CHARTID#", // // 任意 : 「チャートの埋め込み」ダイアログの Chart ID に~置換~
 height: "700px",
});
 
const clickHandler = (payload) => {
 chart1.setHighlight(payload.selectionFilter);
 chart2.setFilter(payload.selectionFilter);
 document.getElementById(
   "filterMessage"
 ).innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`;
};
 
async function renderCharts() {
 await chart1.render(document.getElementById("chart1"));
 await chart2.render(document.getElementById("chart2"));
 
 const options = { includes: [{ roles: ["mark"] }] };
 await chart1.addEventListener("click", clickHandler, options);
}
 
renderCharts().catch((e) => window.alert(e.message));

チャート

ダッシュボード

Code Snippet