{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":35595,"path":"now-intelligence/local-data-instance-multi-viz.md","title":"Local data instances for multiple data visualizations","bundle":null,"doc_type":null,"release":"australia","body":"\n# Local data instances for multiple data visualizations\n\nA special Data Visualization API data resource is available to fetch data for multiple data visualizations simultaneously. This data resource reduces the number of API calls and thus can speed up data fetching.\n\n## When to use\n\nYou can use the “Data Visualization API for multiple data visualizations” data resource in the following scenarios:\n\n-   Multiple data visualizations of the same type have the same data source. For example, you have five visualizations where the visualization type is Single Score and the data source is the Incident \\[incident\\] table with the filter `active=true`. If you have several groups of indicators with the same type and data source, you can create an instance of the same multiple visualization data resource for each group.\n-   A data visualization has multiple data resources that reference the same data source. For example, you have a Line visualization with a data resource from the \"Number of open incidents\" indicator and another data resource from the \"Average age of open incidents\" indicator. Both of these indicators use the Incident.Open data source. For efficiency, you can convert this visualization to use only one data resource.\n\n## When not to use\n\n-   There is only one data visualization on the UI Builder page.\n-   The data visualizations on the page are likely to take a long time to load data. In that case, it's better to keep the data loading split between separate data resources.\n\n## Set up a multiple visualization data resource\n\nIf your use case meets the criteria for a multiple visualization data resource, you can follow this procedure.\n\n### Before you begin\n\nReview the use case for a single data resource for multiple visualizations in [Local data instances for multiple data visualizations](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/now-intelligence/local-data-instance-multi-viz.md).\n\nRole required: ui\\_builder\\_admin, admin\n\n### About this task\n\n**Important:** This data resource merges multiple calls into a single one. The single call is executed as a single transaction on a single thread. Therefore, use this data resource with extra care, especially when handling a large amount of data, as in some cases this might lead to transaction timeouts. Depending on the quantity of the data, the setup of the page, and the targeted user experience, you might have better results by using separate data resources.\n\n### Procedure\n\n1.  Navigate to the technical dashboard or UIB page with the data visualizations.\n\n2.  Verify that the data visualizations on the page meet the criteria in **When to use**.\n\n    For example, you have several Dial visualizations on the Incident table data source, and the amount of data fetched is not too large.\n\n3.  In the Data and scripts drawer, under Data resources, select **+ Add data resource**.\n\n    \\[Omitted image \"add-data-resource.png\"\\] Alt text: Add data resource link when there are no data resources yet.\n\n4.  In the Select a data resource window, search for `Data visualization`.\n\n    You get a selection of the data resources you can use.\n\n    \\[Omitted image \"dv-multiviz-data-resource.png\"\\] Alt text: Selection of Data Visualization API data resources, including the one for multiple data visualizations.\n\n5.  Select \"Data Visualization API for multiple data visualizations.\"\n\n6.  Set the type as **Data configurations**.\n\n7.  In the request field, fill in the JSON.\n\n    See the Example at the end of this procedure.\n\n8.  In each data visualization that you want to use this data resource, perform the following actions:\n\n    1.  Select the data visualization.\n\n    2.  Open the Configuration panel.\n\n    3.  Turn on **Define data manually**.\n\n    4.  Use data binding to bind a script to the Data field.\n\n\n### Data resource for three Single score visualizations with the same data source\n\nIn this example, we start with a UIB page that contains three Data Visualization components. These components all are of the Single Score visualization type, and all use the same data source.\n\nYou follow the general procedure through Step 6. Now you have a Data Visualization API for multiple data visualizations on your Dashboards page.\n\nNext you write the JSON for the request, as follows:\n\n```json\n[\n    {\n        \"details\": {\n            \"visualizationId\": \"vis_1\",\n            \"followFilter\": true\n        },\n        \"configurations\": {\n            \"dataConfigurations\": [\n                {\n                    \"sourceType\": \"table\",\n                    \"dataCategory\": \"simple\",\n                    \"order\": 0,\n                    \"tableOrViewName\": \"incident\",\n                    \"aggregateFunction\": \"COUNT\"\n                }\n            ]\n        }\n    },\n    {\n        \"details\": {\n            \"visualizationId\": \"vis_2\",\n            \"followFilter\": true\n        },\n        \"configurations\": {\n            \"dataConfigurations\": [\n                {\n                    \"sourceType\": \"table\",\n                    \"dataCategory\": \"simple\",\n                    \"order\": 0,\n                    \"tableOrViewName\": \"incident\",\n                    \"aggregateFunction\": \"AVG\",\n                    \"aggregateField\": \"business_duration\"\n                }\n            ]\n        }\n    },\n    {\n        \"details\": {\n            \"visualizationId\": \"vis_3\",\n            \"followFilter\": true\n        },\n        \"configurations\": {\n            \"dataConfigurations\": [\n                {\n                    \"sourceType\": \"table\",\n                    \"dataCategory\": \"simple\",\n                    \"order\": 0,\n                    \"tableOrViewName\": \"incident\",\n                    \"aggregateFunction\": \"AVG\",\n                    \"aggregateField\": \"priority\"\n                }\n            ]\n        }\n    }\n]\n```\n\nThe request is an array of objects, one for each data visualization. Each visualization has a **details** property with an arbitrary value for the **visualizationId** and a boolean **followFilter** setting whether the visualization follows filter components on the page. In this case, all three visualizations follow filters.\n\nEach visualization also has a **configurations** property, containing only a **dataConfigurations** array. Because all the visualizations are of the same type, Single Score, and this visualization type shows only a simple value, all three **dataCategory** properties are \"simple.\" Similarly, all the visualizations use the same data source. Because the data source is the Incident \\[incident\\] table, all three visualizations have a **sourceType** of \"table\" and a **tableOrViewName** of \"incident.\" The only place where the visualizations can vary is in the aggregates they use. Here you see the first one uses a COUNT aggregation, the second takes an AVG aggregate on the business\\_duration field, and the third takes an AVG of the priority field.\n\nThe final configuration of the data resource looks like this:\n\n\\[Omitted image \"db-data-res-mult-viz-config.png\"\\] Alt text: Complete configuration of dashboard data broker.\n\nLastly, for each data visualization, you bind the following script to the data field. You use the arbitrary **visualizationId** value you gave each visualization as the `vizId` value in the script for that visualization.\n\n```javascript\nfunction evaluateProperty({api, helpers}) {\n  const data = api.data.data_visualization_api_for_multiple_data_visualizations_1.output;\n​\n  if (!data) {\n    return [];\n  }\n​\n  const vizId = 'vis_1';\n​\n  const dataForViz = data.result.find(d => d.details.visualizationId === vizId);\n​\n    return dataForViz.dataResponses;\n}\n```\n\n### Request JSON for an indicator\n\nThe request for a visualization on an indicator differs from the previous example, which was for a table. Here is the JSON for a time series visualization, which shows a trend over time, for the Number of open incidents indicator, grouped by the Priority breakdown:\n\n```json\n[\n    {\n        \"details\": {\n            \"visualizationId\": \"vis1\",\n            \"followFilter\": true\n        },\n        \"configurations\": {\n            \"dataConfigurations\": [\n                {\n                    \"sortBy\": \"choice\",\n                    \"sortOrder\": \"asc\",\n                    \"sourceType\": \"indicator\",\n                    \"dataCategory\": \"trend\",\n                    \"order\": 0,\n                    \"splitView\": false,\n                    \"numberOfGroups\": 2,\n                    \"uuid\": {\n                        \"indicator\": \"fb007202d7130100b96d45a3ce6103b4\",\n                        \"breakdowns\": []\n                    },\n                    \"trendBy\": \"anything\",\n                    \"trendInterval\": \"date\",\n                    \"groupBy\": [\n                        \"0df47e02d7130100b96d45a3ce610399\"\n                    ],\n                    \"removeMissingIntervalData\": false\n                }\n            ]\n        }\n    }\n]\n```\n\nThe first and obvious differences are that the **sourceType** is \"indicator\" and the **dataCategory** is \"trend.\" You also see that instead of a **tableOrViewName** property, you have a **uuid** object with the uuid of the Number of open incidents indicator and an empty array that could hold the uuid's of breakdowns for filtering that indicator. Because this visualization supports group-by values, you have a **groupBy** array that in this case contains only the uuid of the Priority breakdown. Having a group-by implies sorting, and here you see that the **sortBy** is \"choice,\" reflecting the data type of the Priority breakdown, and the **sortOrder** is ascending.\n\n"}}