Creating a table via API

Follow this guide to build a table in Editor based on an API Connector connection.

You will use a static JSON file located at https://storage.yandexcloud.net/datalens-public-demo-assets/data/mtcars.json as your data source, but the process is similar for full-blown APIs.

Getting startedGetting started

To get started with DataLens, follow this deployment guide.

Create a workbookCreate a workbook

1. Go to the DataLens home page.

2. In the top-right corner, click Create → Create workbook.

3. Enter Tutorials for the workbook name.

4. Click Create.

Create an API Connector connectionCreate an API Connector connection

1. Navigate to the workbook created in the previous step and click Create → Connection.

2. Under Files and services, select API Connector.

3. Configure the connection as follows:

   • Host name: storage.yandexcloud.net.
   • Port: 443.
   • URL path: datalens-public-demo-assets/data/.

   Leave the other parameters unchanged.

4. Click Create connection. Enter a connection name and click Create.

5. Go to the Tutorials workbook and find the new connection on the Connections tab.

6. Copy the connection ID by clicking → Copy ID next to it. The ID will be copied to the clipboard.

Create a chart in EditorCreate a chart in Editor

1. In the workbook, click Create → Chart in Editor in the top-right corner. On the page that opens, select the Table visualization type.

2. Link the chart with the connection by navigating to the Meta tab and adding the connection ID to links:

   {
       "links": {
   	     "mtcars": "<connection_ID>"
       }
   }
   

   Where:

   • <connection_ID>: Connection ID copied in the previous step.
   • mtcars: Any alias name you assign to the connection and use to request chart data from the source.

   Note

   You need the Meta tab to describe service information about the list of related entities. This information is used to figure out what connections and datasets the chart is related to, as well as for the related objects dialog, when copying a workbook and when publishing to Public.

3. Get data from the data source. To do this, go to the Source tab and specify:

   module.exports = {
       mtcars: {
   
    	   // Naming the connection we take data from
    	   // Using here the name we gave to the connection on the Meta tab
           apiConnectionId: Editor.getId("mtcars"),
   
    	   // Specifying the path to the API method/page in the source
           path: "/mtcars.json",
   
    	   // Request method
           method: "GET",
       }
   };
   

4. Clear the contents of the Config tab: it contains a template that is not relevant to our example.

5. On the Prepare tab, create a table:

   // Getting the downloaded data
   const cars = Editor.getLoadedData().mtcars.data.body.cars;
   
   // Creating a table header and describing column types
   const head = [
      {
         id: 'title',
         name: 'Name',
         type: 'string',
      },
      {
      	id: 'mpg',
      	name: 'MPG',
      	type: 'number',
      }
   ];
   
   // Populating the table
   const rows = cars.map((car) => {
      return {
         cells: [
            {value: car.model},
            {value: car.mpg},
         ],
      };
   });
   
   module.exports = {head, rows};
   

6. At the top of the chart, click Execute. The preview area will display a simple table displaying the data received from the JSON API.

   

7. To save a chart, click Save in the top-right corner and enter a name for the chart.