{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/integrated-charts-time-series/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers how to chart time series data using Integrated Charts."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Integrated Charts supports the charting of time series data using line and area charts when a time axis is chosen instead\nof a category or numeric axis."}]},{"type":"element","tagName":"h2","properties":{"id":"time-vs-category-axis","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#time-vs-category-axis","ariaLabel":"time vs category axis permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Time vs Category Axis"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/charts-axes/#time-axis"},"children":[{"type":"text","value":"Time Axis"}]},{"type":"text","value":" is used to plot continuous date / time values, whereas a\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/charts-axes/#category-axis"},"children":[{"type":"text","value":"Category Axis"}]},{"type":"text","value":" is used to plot discrete values or categories."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below highlights the differences between time and category axes. Notice that the time axis contains all\ndays for the range of values provided, whereas the category axis only shows axis labels for the discrete values\nprovide."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Time vs Category Axis","name":"time-vs-category","type":"generated","options":"{ \"exampleHeight\": 740, \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\"], \"extras\": [\"momentjs\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"time-axis-configuration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#time-axis-configuration","ariaLabel":"time axis configuration permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Time Axis Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Columns that contain date object values will be automatically plotted using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/charts-axes/#time-axis"},"children":[{"type":"text","value":"Time Axis"}]},{"type":"text","value":"\nunless it has been explicitly changed through the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartDataType"}]},{"type":"text","value":" column definition property."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Numeric timestamps in a unix format are also allowed, but the column should be explicitly configured to use a time axis\nvia "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartDataType='time'"}]},{"type":"text","value":" on the column definition."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows how different time series values can be configured to enable a time axis:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // date objects are treated as time by default\n        { field: 'someDate' },\n        { field: 'someTimestamp', chartDataType: 'time' },\n    ],\n    rowData: [\n        {\n            someDate: new Date(2019, 0, 1), // date object\n            someTimestamp: 1167609600000, // numeric timestamp (unix format)\n        },\n        // ... more rows\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that no configuration is necessary for date objects but numeric timestamps and calendar date string require\nthat "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartDataType='time'"}]},{"type":"text","value":" is set on the column definitions."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates how a column containing numeric timestamps can be configured to use a time axis using\nthe "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"chartDataType='time'"}]},{"type":"text","value":" property on the 'timestamp' column definition:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Time Axis Configuration","name":"time-axis-config","type":"generated","options":"{ \"exampleHeight\": 740, \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\"], \"extras\": [\"momentjs\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"time-axis-combination-chart","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#time-axis-combination-chart","ariaLabel":"time axis combination chart permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Time Axis Combination Chart"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A time axis can also be used in combination charts as shown in the following example."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more details on how to configure a combination chart, see the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/integrated-charts-api-range-chart/#combination-charts"},"children":[{"type":"text","value":"Range Chart API example"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Time Axis Combination Chart","name":"time-combination-chart","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"charts\", \"rowgrouping\"], \"exampleHeight\": 790, \"extras\": [\"momentjs\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/integrated-charts-api-save-restore-charts/"},"children":[{"type":"text","value":"Save / Restore Charts"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Time Series","version":null,"enterprise":true,"description":null},"headings":[{"id":"time-vs-category-axis","depth":2,"value":"Time vs Category Axis"},{"id":"time-axis-configuration","depth":2,"value":"Time Axis Configuration"},{"id":"time-axis-combination-chart","depth":2,"value":"Time Axis Combination Chart"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/integrated-charts-time-series","pageName":"integrated-charts-time-series"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}