{"id":24482,"date":"2023-12-07T12:58:55","date_gmt":"2023-12-07T12:58:55","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24482"},"modified":"2026-01-23T09:52:04","modified_gmt":"2026-01-23T09:52:04","slug":"dashboard-with-draggable-data-points","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/dashboard-with-draggable-data-points\/","title":{"rendered":"Dashboard with draggable data points"},"content":{"rendered":"<p>In this tutorial, I will explore how to leverage Highcharts Dashboards to create a dashboard using the MathModifier module and the draggable option (see demo below):<\/p>\n<p>Link to the <a href=\"https:\/\/www.highcharts.com\/demo\/dashboards\/grid-mathmodifier\" target=\"_blank\" rel=\"noopener\">demo<\/a><\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"The dashboard demonstrates some capabilities of the MathModifier based on data that visualize Euro foreign exchange reference rate to US dollar (USD). The data covers one week of rates in August 2023. More information can be found at the Euro Data Store of the European Central Bank.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/dashboards\/demo\/grid-mathmodifier\" width=\"100%\" height=\"700px\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">You might ask yourself, why do I need to create such a dashboard?<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>Well, including the draggable points option in the dashboard lets you or your users modify data points on the chart interactively. This option allows you to dynamically adjust individual data points by dragging them, providing real-time updates to both the chart and the DataGrid. This user-friendly customization enhances the overall interactivity of the dashboard, allowing for intuitive exploratory data analysis directly within the dashboard interface.<\/p>\n<p>Now, I clarified the benefit of such a dashboard, let\u2019s see how to create one \ud83d\ude42.<\/p>\n<h2>Library<\/h2>\n<p>Be ensure that you have included the necessary Highcharts Dashboards library and modules:<\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/dashboards.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/modules\/math-modifier.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/datagrid.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/draggable-points.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/modules\/dashboards-plugin.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Notice that I am using <code>draggable-points.js<\/code> for draggable option, and <code>math-modifier.js<\/code> to performs mathematical calculations with ease, in this case the following calculation:<\/p>\n<pre>dataModifier: {\n  type: 'Math',\n  columnFormulas: [{\n    column: 'USD',\n    formula: 'B1*C1' \/\/ Multiply EUR (B1) with the rate (C1)\n  }]\n}<\/pre>\n<h2>Data<\/h2>\n<p>The code below fetches data in JSON format, then calculates and adds a &#8216;USD&#8217; column to represent the exchange rate in US Dollars (using the <code>MathModifie<\/code> module). By the way, the date is given in milliseconds since the <a href=\"https:\/\/tc39.es\/ecma262\/multipage\/numbers-and-dates.html#sec-time-values-and-time-range\" target=\"_blank\" rel=\"noopener\">epoch<\/a>.<\/p>\n<pre>const data = [\n  ['Day', 'EUR', 'Rate'],\n  [1691971200000, 11, 1.0930],\n  ...\n];\n...\ndataPool: {\n    connectors: [{\n          id: 'EUR-USD',\n          type: 'JSON',\n          options: {\n            data,\n            dataModifier: {\n              type: 'Math',\n              columnFormulas: [{\n                column: 'USD',\n                formula: 'B1*C1' \/\/ Multiply EUR (B1) with the rate (C1)\n              }]\n            }<\/pre>\n<h2>Dashboards GUI<\/h2>\n<p>For this demo, the layout is pretty simple. All I need is two cells in one row, one for the chart and the other to host the DataGrid.<\/p>\n<pre>layouts: [{\n  id: 'layout-1',\n  rows: [{\n    cells: [{\n      responsive: {\n        \u2026},\n      id: 'dashboard-col-1'\n    }, {\n      responsive: {\n        \u2026},\n      id: 'dashboard-col-2'\n    }]\n  }]\n}]<\/pre>\n<h2>Dashboards Component<\/h2>\n<p>I have two components: one for the chart and the other for the DataGrid. The central part of this section is that both of the components have the <code>sync,highlight<\/code> to <code>true<\/code>. This allows the data changes to be synchronized between the chart and the data grid, and both of them are linked to the same data connector.<\/p>\n<pre>connector: {\n  id: 'EUR-USD'\n}\nsync: {\n  highlight: true\n},<\/pre>\n<p>The rest of the code is standard to create a chart and operate a DataGrid.<\/p>\n<p>Here is a cool idea to add to the demo. Try to set the option editable under the <code>dataGridOptions<\/code> to <code>true<\/code>, then change the numbers on the DataGrid, right \ud83d\ude09?<\/p>\n<p>Now, you know how to create a dashboard with draggable points and a math modifier. The result is a user-friendly interface where you and your users can easily explore and analyze data sets.<\/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\/post\/stock-chart-examples-using-highcharts-stock\/\">Stock chart examples using Highcharts Stock<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/stock-charting-with-highcharts\/\">Stock charting with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/financial-charts-with-highcharts\/\">Financial charts with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/climate-data-visualization-using-highcharts\/\">Climate data visualization using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/real-time-data-visualization-using-highcharts\/\">Real-time data visualization using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/big-data-visualization-using-highcharts\/\">Big data visualization using Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a dashboard using the MathModifier module and the draggable option.<\/p>\n","protected":false},"author":32,"featured_media":24497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1010],"coauthors":[699],"class_list":["post-24482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-dashboards"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24482","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=24482"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24482\/revisions"}],"predecessor-version":[{"id":29457,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24482\/revisions\/29457"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24497"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24482"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}