Menu Docs
Página inicial do Docs
/
Atlas Charts
/
Incorporação
/
Incorporando SDK
/
Tutorials

Incorporar um Gráfico Não Autenticado

Nesta página

  • Pré-requisitos
  • Procedimentos
  • Habilitar incorporação não autenticada para um gráfico
  • Crie um aplicativo da Web para exibir seu gráfico
  • Personalizar o aplicativo Node.js

Você pode incorporar um gráfico em um aplicação da web e não exigir autenticação para visualizar os dados do gráfico. Para restringir o acesso ao seu gráfico incorporado, consulte ostutoriais de gráfico incorporado autenticado .

Pré-requisitos

  • Você deve ser um autor de painel para habilitar a incorporação não autenticada em um gráfico.

  • Criar novo dashboard

  • Criar um gráfico

Procedimentos

Habilitar incorporação não autenticada para um gráfico

Ative a incorporação não autenticada para gerar uma ID de gráfico e uma URL Base de Gráficos. Você precisará do ID do seu Charts e do URL da base do Charts para exibir seu Charts em uma página da web.

1

Selecione um painel.

Na página do painel, selecione o painel que contém o gráfico que você deseja tornar incorporável.

2

Selecione um gráfico.

No painel, clique em no canto superior direito do gráfico para acessar suas informações de incorporação. Selecione Embed chart no menu suspenso.

Observação

Se um gráfico estiver em um dashboard que tenha a incorporação habilitada, a opção Embed Chart será habilitada automaticamente. Portanto, não é permitido selecionar a opção Embed chart para gráficos dentro de dashboards que tenham a incorporação habilitada.

3

Habilite o compartilhamento externo no conjunto de dados.

Se você já habilitou o compartilhamento externo no conjunto de dados que este gráfico utiliza, pule esta etapa. Se ainda não habilitou a incorporação no conjunto de dados, você pode fazer isso agora. Clique no link Configure external sharing .

4

Selecione a aba na janela de diálogo.Unauthenticated

Incorporar gráfico não autenticado
clique para ampliar
5

Alterne Enable unauthenticated access para On.

6

(Opcional) Especifique campos filtráveis para seu gráfico.

Especifique os campos nos quais os visualizadores de gráficos podem filtrar dados. Por padrão, nenhum campo é especificado, o que significa que o gráfico não pode ser filtrado até que você permita explicitamente pelo menos um campo.

Alternativamente, você pode especificar todos os campos em seu gráfico selecionando Allow all fields in the data source used in this chart.

Para saber mais sobre campos filtráveis, consulte Especificar campos filtráveis.

7

Selecione o Javascript SDK painel.

8

Copie Charts Base URL e Chart ID.

Você precisará dos valores Charts Base URL e Chart ID no código da sua aplicação da web.

Crie um aplicativo da Web para exibir seu gráfico

Se você já tiver um aplicativo no qual exibir seu gráfico, estará pronto para adicionar um gráfico incorporado não autenticado. Caso contrário, siga as etapas restantes para criar um novo aplicativo.

O MongoDB oferece um aplicativo de exemplo pré-criado no Github repositório do Github que mostra como usar o SDK de incorporação para exibir um gráfico incorporado não autenticado.

Clone o Github repositório do para obter todos os aplicativos de exemplo . As instruções para executar o exemplo não autenticado estão no Readme no unauthenticated diretório . Você pode executar o aplicativo como está ou personalizá-lo para usar um gráfico próprio.

Personalizar o aplicativo Node.js

Todas as linhas que você precisa editar são marcadas com um comentário contendo ~REPLACE~.

1

Abra o arquivo index.js em um editor de texto.

O arquivo index.js está localizado no diretório src .

2

Insira sua URL da base do Charts

Substitua a URL Base de Charts existente pela URL Base do gráfico que você deseja exibir. A URL da sua base de Charts fica visível na janela modal de opções de incorporação. Consulte Incorporação de SDK para obter instruções detalhadas sobre como habilitar a incorporação de um gráfico.

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp" // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
});

Você também pode incluir o SDK de incorporação com JavaScript in-line em uma página HTML, como mostrado no seguinte trecho de código:

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
3

Insira sua ID do gráfico

Substitua a ID do gráfico existente pela ID do gráfico que você deseja exibir. Sua ID de gráfico é visível na janela modal de opções de incorporação. Consulte Incorporação de SDK para obter instruções detalhadas sobre como habilitar a incorporação de um gráfico.

const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
  height: "700px"
  // Additional options go here
});

Quando terminar de personalizar o aplicativo, ele estará pronto para ser executado.

Voltar

Incorpore um gráfico autenticado usando um provedor de JSON web token personalizado

Próximo

Gerenciar