{"id":4517,"date":"2015-08-20T14:44:22","date_gmt":"2015-08-20T12:44:22","guid":{"rendered":"http:\/\/test.boomerapps.com\/?p=4517"},"modified":"2026-01-08T08:49:20","modified_gmt":"2026-01-08T08:49:20","slug":"176-charts-in-motion","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/176-charts-in-motion\/","title":{"rendered":"Charts in Motion"},"content":{"rendered":"<p>There are many ways to display variations in data. Highcharts lets you do this in a single chart by defining properties like color, point size, and positioning. But what if you wanted to visualize variations by simply pressing a button to watch the data move?<\/p>\n<p class=\"demo-container\"><iframe title=\"Highcharts Maps with time control\" style=\"width: 100%; height: 550px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-motion\" allow=\"fullscreen\"><\/iframe><\/p>\n<h2>Dancing with the Charts<\/h2>\n<p>Implementing this with Highcharts fairly simple, due to the open API and the way updates to the data is managed. Calling the <code><a href=\"http:\/\/api.highcharts.com\/highcharts#Point.update\">update()<\/a><\/code> function on a <code>point<\/code> object with the new data value as the argument updates the point and redraws the chart. Alternatively, simply call the <code><a href=\"http:\/\/api.highcharts.com\/highcharts#Series.setData\">setData()<\/a><\/code> function on a <code>series<\/code> object and provide an array of the new data as the argument. This, in turn, calls <code>point.update()<\/code> on each point in the series, and redraws the chart at the end. Either way, Highcharts updates the chart painlessly, and smoothly animates the change.<\/p>\n<p class=\"demo-container\"><iframe title=\"Highcharts area chart with time control\" style=\"width: 100%; height: 450px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/area-motion\" allow=\"fullscreen\"><\/iframe><\/p>\n<h3>HTML Elements<\/h3>\n<p>In the demos provided, we have used an <code>&lt;input&gt;<\/code> element with <code>type=\u201drange\u201d<\/code> for the interactive progress-bar, a <code>&lt;button&gt;<\/code> element for the play\/pause-button, and an <code>&lt;output&gt;<\/code> element to display the current value.<\/p>\n<pre>&lt;div id=\"play-controls\"&gt;\r\n   &lt;button id=\"play-pause-button\" class=\"fa fa-play\" title=\"play\"&gt;&lt;\/button&gt;\r\n   &lt;input id=\"play-range\" type=\"range\" value=\"0\" min=\"0\" max=\"6\"&gt;&lt;\/input&gt;\r\n   &lt;output id=\"play-output\" for=\"play-range\" name=\"year\"&gt;2005&lt;\/output&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3>Functions<\/h3>\n<p>Three simple functions are used to modify the chart: <code>update()<\/code>, <code>play()<\/code> and <code>pause()<\/code>. The <code>update()<\/code> function updates the chart according to the value of the progress-bar input. It also takes an optional <code>increment<\/code> (integer) argument, which modifies the input value before updating. The <code>play()<\/code> function starts updating the chart by calling <code>update()<\/code> at set intervals with new data. The <code>pause()<\/code> function stops the process of updating the chart.<\/p>\n<pre>\/**\r\n* Update the chart. This happens either on updating (moving) the range input,\r\n* or from a timer when the timeline is playing.\r\n*\/\r\nfunction update(increment) {\r\n   var input = $('#play-range')[0],\r\n       output = $('#play-output')[0];\r\n\r\n   if (increment) {\r\n       input.value = parseInt(input.value) + increment;\r\n   }\r\n   chart.series[1].setData(dataSequence[input.value].data); \/\/ Increment dataset (updates chart)\r\n   output.innerHTML = dataSequence[input.value].name \/\/ Output value\r\n   if (input.value &gt;= input.max) { \/\/ Auto-pause\r\n       pause($('#play-pause-button')[0]);\r\n   }\r\n}\r\n<\/pre>\n<pre>\/**\r\n* Play the timeline.\r\n*\/\r\nfunction play(button) {\r\n   button.title = 'pause';\r\n   button.className = 'fa fa-pause';\r\n   chart.sequenceTimer = setInterval(function () {\r\n       update(1);\r\n   }, 800);\r\n}\r\n<\/pre>\n<pre>\/**\r\n* Pause the timeline, either when the range is ended, or when clicking the pause button.\r\n* Pausing stops the timer and resets the button to play mode.\r\n*\/\r\nfunction pause(button) {\r\n   button.title = 'play';\r\n   button.className = 'fa fa-play';\r\n   clearTimeout(chart.sequenceTimer);\r\n   chart.sequenceTimer = undefined;\r\n}\r\n<\/pre>\n<h3>Binding Inputs<\/h3>\n<p>To connect user input to the functions, a <code>click<\/code> event on the play\/pause button is bound to call <code>play()<\/code> if the chart is not playing, and pause() if it is playing, and an <code>input<\/code> event on the progress-bar is bound to call <code>update()<\/code><\/p>\n<pre>\/**\r\n* Toggle play and pause from the button\r\n*\/\r\n$('#play-pause-button').bind('click', function () {\r\n   if (chart.sequenceTimer === undefined) {\r\n       play(this);\r\n   } else {\r\n       pause(this);\r\n   }\r\n});\r\n<\/pre>\n<pre>\/**\r\n* Update the chart when the input is changed\r\n*\/\r\n$('#play-range').bind('input', function () {\r\n   update();\r\n});\r\n<\/pre>\n<h2>Usage<\/h2>\n<p>A typical usage, as shown in the demos above, would be making a playable timeline (or time-lapse), which displays data changing over time. This is, however, not the only application. Depending on what you want to visualize and how you structure your data, you can display data changing over any axis. Take for example, the demo below:<\/p>\n<p class=\"demo-container\"><iframe title=\"Highcharts map chart of Norway with time control\" style=\"width: 100%; height: 700px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/map-motion-norway\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>Instead of moving over time, this chart&#8217;s data mutates according to speed limits in Norway. Fork a demo and try moving data over age groups, interest rates, product prices, or any other variable you can think of.<\/p>\n<h2>Motion Charts Plugin<\/h2>\n<p>For a simpler setup with smoother progress-bar movement and more advanced features, we have developed a plugin for Highcharts, Highmaps, and Highstock available at <a href=\"\/plugin-registry\/single\/40\/Motion\">https:\/\/www.highcharts.com\/plugin-registry\/single\/40\/Motion<\/a><\/p>\n<p class=\"demo-container\"><iframe title=\"Highcharts pie chart\" style=\"width: 100%; height: 550px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/pie-gradient\" allow=\"fullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visualize variations in data by simply pressing a button to watch the data move.<\/p>\n","protected":false},"author":44,"featured_media":10598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[732],"class_list":["post-4517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/4517","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\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=4517"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/4517\/revisions"}],"predecessor-version":[{"id":29033,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/4517\/revisions\/29033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/10598"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=4517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=4517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=4517"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}