{"id":18322,"date":"2021-07-28T04:32:08","date_gmt":"2021-07-27T23:02:08","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=18322"},"modified":"2026-01-20T14:41:40","modified_gmt":"2026-01-20T09:11:40","slug":"turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/","title":{"rendered":"Boost JS Chart Time Navigation with Interactive Time-Series 2026"},"content":{"rendered":"Time series analysis and visualization play a key role in the corporate and business worlds. A time-series depicts changing or fluctuating variables over time. This makes it is an indispensable tool for projecting profits, forecasting, marketing, and much more.\r\n\r\nWhile many automated tools for time series visualizations exist, there are hardly any tools for interactively panning, zooming, and scaling a series. This is a big omission. When manually observing a time series, managers, developers, or data scientists want to examine a time series over a larger time span to infer long-term trends in data. On the other hand, they also want to zoom in on a portion of the series to see short-term fluctuations in variables on the <a href=\"https:\/\/www.fusioncharts.com\/features\/data-plots\">data charts<\/a>.\r\n\r\nFusionCharts comes with an awesome <a href=\"https:\/\/www.fusioncharts.com\/dev\/fusiontime\/getting-started\/how-fusion-time-works\">FusionTime library<\/a>. The FusionTime library lets you plot and analyze time-series data with its <a href=\"https:\/\/www.fusioncharts.com\/dev\/fusiontime\/fusiontime-component\/time-navigator\">time navigator feature<\/a>. With the Time Navigator, an analyst can focus on a part of the time series, while keeping the whole long-term data trend in view. In this blog, we&#8217;ll build an app for visualizing a time series with the time navigator component. We&#8217;ll plot the <a href=\"https:\/\/archive.ics.uci.edu\/ml\/datasets\/CalIt2+Building+People+Counts\">CalIt2 building people count data set<\/a>, which shows the volume of people coming in or out of the building. The dataset is from the <a href=\"https:\/\/archive.ics.uci.edu\/ml\/index.php\">UCI machine learning repository<\/a>.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Features_Of_FusionCharts_Time_Navigator\" title=\"Features Of FusionCharts Time Navigator\">Features Of FusionCharts Time Navigator<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#The_CalIt2_Dataset\" title=\"The CalIt2 Dataset\">The CalIt2 Dataset<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Steps_For_Creating_The_Time_Series_Plot_With_Time_Navigator\" title=\"Steps For Creating The Time Series Plot With Time Navigator\">Steps For Creating The Time Series Plot With Time Navigator<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Step_1_Project_Setup\" title=\"Step 1: Project Setup\">Step 1: Project Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Step_2_Project_Configuration\" title=\"Step 2: Project Configuration\">Step 2: Project Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Step_3_Import_Libraries_Create_The_Datasource_Render_Chart\" title=\"Step 3: Import Libraries, Create The Datasource, Render Chart\">Step 3: Import Libraries, Create The Datasource, Render Chart<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Running_The_App\" title=\"Running The App\">Running The App<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#Are_There_More_Ways_To_Visualize_Time_Series_Data\" title=\"Are There More Ways To Visualize Time Series Data?\">Are There More Ways To Visualize Time Series Data?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Features_Of_FusionCharts_Time_Navigator\"><\/span>Features Of FusionCharts Time Navigator<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe time series and time navigator components look like this. This shows the outflow of people from the UCI&#8217;s CalIt2 building and has some spectacular time navigator features, which we annotated below:\r\n\r\n<figure id=\"attachment_18326\" aria-describedby=\"caption-attachment-18326\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18326 size-large\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/timeseries-1024x610.png\" alt=\"Features Of FusionCharts Time Navigator\" width=\"640\" height=\"381\" srcset=\"\/blog\/wp-content\/uploads\/2021\/07\/timeseries-1024x610.png 1024w, \/blog\/wp-content\/uploads\/2021\/07\/timeseries-300x179.png 300w, \/blog\/wp-content\/uploads\/2021\/07\/timeseries-768x457.png 768w, \/blog\/wp-content\/uploads\/2021\/07\/timeseries.png 1914w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-18326\" class=\"wp-caption-text\">Features Of FusionCharts Time Navigator<\/figcaption><\/figure>\r\n<ul>\r\n \t<li><strong>Zooming<\/strong>: The FusionCharts time series allows a user to zoom in and display smaller time periods in more detail. The time navigator also shows which parts of the time series have been zoomed.<\/li>\r\n \t<li><strong>Panning<\/strong>: The user can move the scrollbar of the time navigator window and look at specific fixed time periods of the graph.<\/li>\r\n \t<li><strong>Scrolling<\/strong>: The user can move a data point of the time series itself to move the series left or right.<\/li>\r\n \t<li><strong>Datapoint average on hover<\/strong>: When the mouse hovers over a data point, it displays the value of the datapoint. For a zoomed-out plot of larger time spans, the average or the data points is also shown.<\/li>\r\n \t<li><strong>Customization<\/strong>: FusionCharts allows everything to be fully customized, from axis labels to the caption, tick mark labels as well as graph colors.<\/li>\r\n \t<li><strong>Change time periods<\/strong>: The top left corner allows a user to select different time periods for displaying the time series.<\/li>\r\n \t<li><strong>Data format: <\/strong>You can input the data you want to plot as JSON or a simple table. This makes it extremely easy to create a plot from all types of data sources.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"The_CalIt2_Dataset\"><\/span>The CalIt2 Dataset<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe first few lines of the CalIt2 dataset are shown below:\r\n<pre class=\"lang:markup\">7,07\/24\/05,00:00:00,0\r\n9,07\/24\/05,00:00:00,0\r\n7,07\/24\/05,00:30:00,1\r\n9,07\/24\/05,00:30:00,0\r\n7,07\/24\/05,01:00:00,0<\/pre>\r\nThe data is a comma-separated table. The first column is 7 for outflow and 9 for inflow. We&#8217;ll plot only the outflow. The second and third columns are date and time. The last column is the count of people.\r\n<h2><span class=\"ez-toc-section\" id=\"Steps_For_Creating_The_Time_Series_Plot_With_Time_Navigator\"><\/span>Steps For Creating The Time Series Plot With Time Navigator<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nPlotting the time series using the FusionTime library is extremely easy. Here are three easy steps to create a Webpack App that displays the time series plot with the time navigator component.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Project_Setup\"><\/span>Step 1: Project Setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a project directory called <strong>timenavigator<\/strong>. At the console move to the project directory and type the following to install Webpack and FusionCharts:\r\n<pre class=\"lang:markup\">npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts<\/pre>\r\nCreate a <strong>dist<\/strong> and <strong>src<\/strong> sub-directory in the project directory. Also, create an empty file index.js, which would contain the source code for the project. Next, tt the console, type the following:\r\n<pre class=\"lang:markup\">mkdir src \r\ntouch src\/index.js\r\nmkdir dist<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Project_Configuration\"><\/span>Step 2: Project Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo configure the project, create a file called webpack.config.js in the main project directory and then add the following code to it:\r\n<pre class=\"lang:markup\">\/\/ webpack.config.js\r\nconst HtmlWebPackPlugin = require( 'html-webpack-plugin' );\r\nconst path = require( 'path' );\r\nmodule.exports = {\r\n   context: __dirname,\r\n   entry: '.\/src\/index.js',\r\n   output: {\r\n      path: path.resolve( __dirname, 'dist' ),\r\n      filename: 'main.js',\r\n   },\r\n\r\n   plugins: [\r\n      new HtmlWebPackPlugin()\r\n   ],\r\n   devServer: {\r\n       headers: {\r\n           \"Access-Control-Allow-Origin\": \"*\",\r\n           \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, PATCH, OPTIONS\",\r\n           \"Access-Control-Allow-Headers\": \"X-Requested-With, content-type, Authorization\"\r\n         },\r\n       proxy: {\r\n         '\/UCIAPI': {\r\n            target: 'https:\/\/archive.ics.uci.edu',\r\n            pathRewrite: { '^\/UCIAPI': 'https:\/\/archive.ics.uci.edu\/ml\/machine-learning-databases\/event-detection\/CalIt2.data'},\r\n            changeOrigin: true,\r\n         },\r\n       },\r\n\r\n     }\r\n};<\/pre>\r\nThe configuration above includes a proxy to prevent CORS errors when reading data from the UCI machine learning repository.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Import_Libraries_Create_The_Datasource_Render_Chart\"><\/span>Step 3: Import Libraries, Create The Datasource, Render Chart<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nFinally, add code to the index.js file, which does the following:\r\n<ol>\r\n \t<li>Imports the necessary FusionCharts libraries.<\/li>\r\n \t<li>Sets up a schema that contains the meta descriptions of the columns to be plotted.<\/li>\r\n \t<li>Reads data from the UCI machine learning repository.<\/li>\r\n \t<li>Converts the data to a table.<\/li>\r\n \t<li>Sets up a DataStore.<\/li>\r\n \t<li>Creates a FusionCharts instance and renders the plot.<\/li>\r\n<\/ol>\r\nThen, copy the following code into your index.js file:\r\n<pre class=\"lang:markup\">\/\/ src\/index.js\r\n\r\n\/\/Import section\r\nimport FusionCharts from 'fusioncharts\/core';\r\nimport TimeSeries from 'fusioncharts\/viz\/timeseries';\r\nimport DataStore from 'fusioncharts\/datastore';\r\n\r\n\/\/Add the div tag for the chart container\r\nconst myDiv = document.createElement('div');\r\nmyDiv.id = 'container';\r\ndocument.body.appendChild(myDiv);\r\n\r\n\/\/Set up the schema for two table columns\r\nlet schema = [{\r\n    \"name\": \"Date\",\r\n    \"type\": \"date\",\r\n    \"format\": \"%-m\/%-d\/%Y %-I:%-M:%-S\"\r\n}, {\r\n    \"name\": \"Outflow of People\",\r\n    \"type\": \"number\"\r\n}]\r\n\r\n\/\/main function read data and call renderPage\r\nasync function main() {\r\n    \/\/Get the data\r\n    let response = await fetch('\/UCIAPI');\r\n    let text = await response.text();\r\n    if (response.ok){        \r\n        renderPage(text);\r\n    }\r\n    else {\r\n        alert('Error reading data from ML repository');\r\n    }\r\n}\r\n\r\n\/\/Convert the UCI ML data to two column table and draw chart\r\n\/\/renders the html page when passed data as text\r\nfunction renderPage(text){\r\n    \/\/Convert data to table\r\n    var data = textToMatrix(text);\r\n    \/\/Draw teh chart with this data\r\n    drawChart(data);\r\n}\r\n\r\n\/\/convert text to matrix. The data read from UCI ML repository is comma separated\r\nfunction textToMatrix(text){\r\n    var matrix = [];\r\n    var rows = text.split(\"\\n\");\r\n    for(var i=0;i&lt;rows.length;i++){\r\n        var cols = rows[i].split(',');\r\n        \/\/7 is out flow in CalIt2.data\r\n        if (cols.length &gt; 1 &amp;&amp; cols[0] == 7)\r\n            var dataRow = [cols[1].concat(' ', cols[2]), parseInt(cols[3])]\r\n            matrix.push(dataRow);\r\n    }\r\n    return matrix;\r\n}\r\n\r\n\/\/Render the final chart\r\nfunction drawChart(data){\r\n    FusionCharts.addDep(TimeSeries);\r\n\r\n    let fusionDataStore = new DataStore();\r\n    let fusionTable = fusionDataStore.createDataTable(data, schema);\r\n\r\n    window.charInstance = new FusionCharts({\r\n        type: 'timeseries',\r\n        renderAt: 'container',\r\n        width: \"90%\",\r\n        height: 650,\r\n        dataSource: {\r\n            data: fusionTable,\r\n            caption: {\r\n                text: 'Outflow Of People From CalIt2 Building At UCI, Source: UCI ML repository'\r\n            }\r\n        }\r\n    });\r\n\r\n    \/\/Render the chart\r\n    window.charInstance.render();\r\n}\r\n\r\nmain();<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Running_The_App\"><\/span>Running The App<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo run the app, type the following at the console:\r\n<pre class=\"lang:markup\">npx webpack serve --mode=development<\/pre>\r\nYou can view the app in the browser by navigating to localhost:8080\r\n<h3><span class=\"ez-toc-section\" id=\"Are_There_More_Ways_To_Visualize_Time_Series_Data\"><\/span>Are There More Ways To Visualize Time Series Data?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nIf you are looking for quick and easy methods of adding beautiful charts and plots to your app, FusionCharts is the answer for you. FusionCharts includes 100+ charts and 2000+ interactive maps. The FusionTime module lets you create time series from basic to more complex multivariate series having millions of data points. FusionTime includes out-of-the-box interactivity like time navigator, date range selectors, interactive legends, and much more. The best part is that creating a time series in Javascript requires only a few lines of code.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/download\/fusioncharts-suite-xt\">Download your free FusionCharts trial today<\/a> and create impressive and stunning apps with beautiful plots and charts!\r\n\r\n<a href=\"https:\/\/github.com\/fusionchartsexpress\/JavascriptTimeCharts\">Download the complete source code for the time navigator app here.<\/a> Happy coding!\r\n\r\n&nbsp;","protected":false},"excerpt":{"rendered":"<p>Time series analysis and visualization play a key role in the corporate and business worlds. A time-series depicts changing or fluctuating variables over time. This makes it is an indispensable tool for projecting profits, forecasting, marketing, and much more. While many automated tools for time series visualizations exist, there are hardly any tools for interactively [&hellip;]<\/p>\n","protected":false},"author":59,"featured_media":18324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,722,705,18],"tags":[152,721,211,831,832],"coauthors":[769],"class_list":["post-18322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-charting-guidelines","category-fusioncharts","category-fusiontime","category-tutorials","tag-fusioncharts","tag-fusiontime","tag-javascript","tag-time-series-analysis","tag-time-series-plot"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Boost JS Chart Time Navigation with Interactive Time-Series 2026<\/title>\n<meta name=\"description\" content=\"Plot time-series data with a time navigator. Learn to zoom, pan, and scale your 2026 charts with our quick and easy tutorial. Visualize temporal data now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boost JS Chart Time Navigation with Interactive Time-Series 2026\" \/>\n<meta property=\"og:description\" content=\"Plot time-series data with a time navigator. Learn to zoom, pan, and scale your 2026 charts with our quick and easy tutorial. Visualize temporal data now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-27T23:02:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1279\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mehreen Saeed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehreen Saeed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Mehreen Saeed\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\"\n\t            },\n\t            \"headline\": \"Boost JS Chart Time Navigation with Interactive Time-Series 2026\",\n\t            \"datePublished\": \"2021-07-27T23:02:08+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:40+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\"\n\t            },\n\t            \"wordCount\": 882,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg\",\n\t            \"keywords\": [\n\t                \"FusionCharts\",\n\t                \"FusionTime\",\n\t                \"javascript\",\n\t                \"Time series analysis\",\n\t                \"time series plot\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Charting Guidelines\",\n\t                \"FusionCharts\",\n\t                \"FusionTime\",\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\",\n\t            \"name\": \"Boost JS Chart Time Navigation with Interactive Time-Series 2026\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg\",\n\t            \"datePublished\": \"2021-07-27T23:02:08+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:40+00:00\",\n\t            \"description\": \"Plot time-series data with a time navigator. Learn to zoom, pan, and scale your 2026 charts with our quick and easy tutorial. Visualize temporal data now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1279,\n\t            \"caption\": \"Turbocharge Javascript Chart Time Navigation With Interactive Time Series Plots\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Boost JS Chart Time Navigation with Interactive Time-Series 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\",\n\t            \"name\": \"Mehreen Saeed\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"caption\": \"Mehreen Saeed\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Boost JS Chart Time Navigation with Interactive Time-Series 2026","description":"Plot time-series data with a time navigator. Learn to zoom, pan, and scale your 2026 charts with our quick and easy tutorial. Visualize temporal data now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/","og_locale":"en_US","og_type":"article","og_title":"Boost JS Chart Time Navigation with Interactive Time-Series 2026","og_description":"Plot time-series data with a time navigator. Learn to zoom, pan, and scale your 2026 charts with our quick and easy tutorial. Visualize temporal data now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-07-27T23:02:08+00:00","article_modified_time":"2026-01-20T09:11:40+00:00","og_image":[{"width":1920,"height":1279,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg","type":"image\/jpeg"}],"author":"Mehreen Saeed","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehreen Saeed","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/"},"author":{"name":"Mehreen Saeed","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7"},"headline":"Boost JS Chart Time Navigation with Interactive Time-Series 2026","datePublished":"2021-07-27T23:02:08+00:00","dateModified":"2026-01-20T09:11:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/"},"wordCount":882,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg","keywords":["FusionCharts","FusionTime","javascript","Time series analysis","time series plot"],"articleSection":["Charting Guidelines","FusionCharts","FusionTime","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/","url":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/","name":"Boost JS Chart Time Navigation with Interactive Time-Series 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg","datePublished":"2021-07-27T23:02:08+00:00","dateModified":"2026-01-20T09:11:40+00:00","description":"Plot time-series data with a time navigator. Learn to zoom, pan, and scale your 2026 charts with our quick and easy tutorial. Visualize temporal data now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/07\/timenavigator.jpg","width":1920,"height":1279,"caption":"Turbocharge Javascript Chart Time Navigation With Interactive Time Series Plots"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/turbocharge-javascript-chart-time-navigation-with-interactive-time-series-plots\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Boost JS Chart Time Navigation with Interactive Time-Series 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7","name":"Mehreen Saeed","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","caption":"Mehreen Saeed"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18322"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18322\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/18324"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18322"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}