{"id":24099,"date":"2023-09-17T20:42:06","date_gmt":"2023-09-17T20:42:06","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24099"},"modified":"2026-01-13T11:35:46","modified_gmt":"2026-01-13T11:35:46","slug":"create-datagrid-synchronized-dashboard","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/create-datagrid-synchronized-dashboard\/","title":{"rendered":"How to create a DataGrid synchronized dashboard"},"content":{"rendered":"<p>In this tutorial, I will create a dashboard that enables dragging points on a column chart to update a data grid and edit the data grid to update the column chart using the Highcharts library. If you want to know why you have to create such a dashboard, feel free to check the previous blog about <a href=\"https:\/\/www.highcharts.com\/blog\/post\/10-reasons-datagrid-synchronized-dashboard\/\" target=\"_blank\" rel=\"noopener\">Why you need a DataGrid synchronized dashboard<\/a>.<\/p>\n<p>If you are new to the Highcharts Dashboards, you can still follow along; however, feel free to check this blog to learn how to build <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-dashboard\/\" target=\"_blank\" rel=\"noopener\">Highcharts Dashboards step by step<\/a>; it is kind of a Highcharts Dashboards 101 \ud83d\ude42 .<\/p>\n<p>A data-synchronized dashboard is not only engaging but also empowers users to explore data relationships and patterns interactively (see dashboard demo below):<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A DataGrid synchronized dashboard displays 5 different food with their portion of vitamin A\" src=\"https:\/\/www.highcharts.com\/samples\/dashboards\/demo\/datagrid-sync\" width=\"100%\" height=\"700px\"><\/iframe><\/p>\n<p>Let&#8217;s get started to build this awesome Highcharts dashboard in 5 steps:<\/p>\n<h2>1. Include Highcharts library<\/h2>\n<p>Start by including the required Highcharts library, Highcharts Dashboards library, and the magic draggable-points.js module that allows me to enable draggable points on the chart:<\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/dashboards.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/datagrid.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/accessibility.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/modules\/dashboards-plugin.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<h2>2. Create a Highcharts dashboard<\/h2>\n<p>To set up a Highcharts Dashboards, I use the <code>Dashboards.board<\/code> method, where I define the <code>dataPool<\/code>, <code>gui<\/code>, and <code>components<\/code>.<\/p>\n<h2>3. Fetch data<\/h2>\n<p>In this demo, I fetch data as CSV with ease thanks to the <code>dataPool<\/code> option:<\/p>\n<pre>const csvData = document.getElementById('csv').innerText;\r\n\u2026\r\nDashboards.board('container', {\r\n      dataPool: {\r\n        connectors: [{\r\n          id: 'Vitamin',\r\n          type: 'CSV',\r\n          options: {\r\n            csv: csvData\r\n          }\r\n        }]\r\n      },<\/pre>\n<h2>4. Dashboard layout<\/h2>\n<p>I need three charts on the same row, so here is how I use the <code>gui<\/code> object to structure the three charts:<\/p>\n<pre>gui: {\r\n  layouts: [{\r\n    id: 'layout-1',\r\n    rows: [{\r\n      cells: [{\r\n        id: 'dashboard-col-0'\r\n      }, {\r\n        id: 'dashboard-col-1'\r\n      }, {\r\n        id: 'dashboard-col-2'\r\n      }]\r\n    }]\r\n  }]\r\n},<\/pre>\n<h2>5. Synchronize and update the data<\/h2>\n<p>The secret ingredients to synchronize and update the data between two column charts and the table are:<\/p>\n<ol>\n<li>The <code>draggableY<\/code> property allows dragging points on both columns chart.\n<pre>plotOptions: {\r\n  series: {\r\n    dragDrop: {\r\n      draggableY: true,\r\n      dragPrecisionY: 1\r\n    }\r\n  }\r\n}<\/pre>\n<\/li>\n<li>The <code>allowConnectorUpdate<\/code> property allows the link and update between the first chart and the table.<\/li>\n<li>The editable and syn properties allow the table to be edited and synchronized with both tables.\n<pre>editable: true,\r\n  sync: {\r\n    highlight: true\r\n  }\r\n<\/pre>\n<\/li>\n<\/ol>\n<p>That is it, simple, right \ud83d\ude09<\/p>\n<p>Now you have a good idea of how to empower users to explore and manipulate the data in real-time, fostering a deeper understanding of the dataset&#8217;s patterns and relationships. This interactive approach to data visualization adds a new dimension to your charts and dashboards, making them both informative and engaging.<\/p>\n<p>\u00a0<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/line-chart-vs-bar-chart-choosing-the-right-one-for-your-objectives-and-data\/\">Line chart vs bar chart: choosing the right one for your objectives and data<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/pareto-chart-what-is-it-and-what-does-it-suggest\/\">Pareto chart: what is it and what does it suggest<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/polygon-chart-using-highcharts\/\">Polygon chart using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/heat-map-examples-using-highcharts\/\">Heat map examples using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/choropleth-map-examples-using-highcharts\/\">Choropleth map examples using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/lightning-map-create-your-own-using-highcharts\/\">Lightning map: create your own using Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a dashboard data grids with Highcharts dashboard.<\/p>\n","protected":false},"author":32,"featured_media":24106,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1010,1048],"coauthors":[699],"class_list":["post-24099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-dashboards","tag-highcharts-grid"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24099"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24099\/revisions"}],"predecessor-version":[{"id":26054,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24099\/revisions\/26054"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24106"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24099"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}