{"id":20893411,"url":"https://github.com/arction/lcjs-example-0803-scrollingheatmap","last_synced_at":"2025-03-12T19:14:36.890Z","repository":{"id":98723668,"uuid":"292817965","full_name":"Arction/lcjs-example-0803-scrollingHeatmap","owner":"Arction","description":"A demo application showcasing using LightningChart JS to display scrolling Heatmap. ","archived":false,"fork":false,"pushed_at":"2025-02-05T11:38:45.000Z","size":16697,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-05T12:32:10.462Z","etag":null,"topics":["demo","example","heatmap","intensity-grid","intensity-series-types","javascript","lcjs","lightningchart-js"],"latest_commit_sha":null,"homepage":"https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0803-scrollingHeatmap.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Arction.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-04T10:21:11.000Z","updated_at":"2025-02-05T11:36:33.000Z","dependencies_parsed_at":"2025-02-05T12:39:02.456Z","dependency_job_id":null,"html_url":"https://github.com/Arction/lcjs-example-0803-scrollingHeatmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0803-scrollingHeatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0803-scrollingHeatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0803-scrollingHeatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0803-scrollingHeatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arction","download_url":"https://codeload.github.com/Arction/lcjs-example-0803-scrollingHeatmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243277498,"owners_count":20265352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","example","heatmap","intensity-grid","intensity-series-types","javascript","lcjs","lightningchart-js"],"created_at":"2024-11-18T10:15:44.572Z","updated_at":"2025-03-12T19:14:36.884Z","avatar_url":"https://github.com/Arction.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Scrolling Heatmap Chart\n\n![JavaScript Scrolling Heatmap Chart](scrollingHeatmap-darkGold.png)\n\nThis demo application belongs to the set of examples for LightningChart JS, data visualization library for JavaScript.\r\n\r\nLightningChart JS is entirely GPU accelerated and performance optimized charting library for presenting massive amounts of data. It offers an easy way of creating sophisticated and interactive charts and adding them to your website or web application.\r\n\r\nThe demo can be used as an example or a seed project. Local execution requires the following steps:\r\n\r\n-   Make sure that relevant version of [Node.js](https://nodejs.org/en/download/) is installed\r\n-   Open the project folder in a terminal:\r\n\r\n          npm install              # fetches dependencies\r\n          npm start                # builds an application and starts the development server\r\n\r\n-   The application is available at _http://localhost:8080_ in your browser, webpack-dev-server provides hot reload functionality.\r\n\n\n## Description\n\nThis example showcases simple usage of `HeatmapScrollingGridSeries`, a simple, yet incredibly powerful series type.\r\n\r\n`HeatmapScrollingGridSeries` visualizes three dimensional data (X, Y, color) of large quantities.\r\nIt can easily handle data sets in million data points range even on low-end devices.\r\nWith large amounts of RAM even **billions** of data points can be visualized!\r\n\r\nHeatmaps can be created in XY Charts:\r\n\r\n```javascript\r\n// Add heatmap scrolling Grid Series to a XY Chart\r\nchartXY.addHeatmapScrollingGridSeries({\r\n    resolution: 100,\r\n})\r\n```\r\n\r\nThe example displays live speed of incoming data as _data points per second_, feel free to try higher data rates by altering `dataSampleSize` in the example code to see how much data `HeatmapScrollingGridSeries` can handle on your machine!\r\n\r\nFor reference, on a Lenovo Yoga (average office laptop with no GPU to speak of), there was no visible effort even with `dataSampleSize: 5000` which means **150 000 incoming data points every single second**.\r\n\r\nWhat's equally impressive is that thanks to automatic data cleaning, this application can _run indefinitely!_ Read more about automatic data cleaning with `HeatmapScrollingGridSeries` below.\r\n\r\n# Heatmap Scrolling Grid Series options\r\n\r\nWhen `HeatmapScrollingGridSeries` is created, there is only one property that has to be specified always:\r\n\r\n`resolution`: amount of data values along non-scrolling dimension.\r\n\r\nWith just this configuration, a fully functional scrolling heatmap grid series capable of handling tens of millions data points is created.\r\n\r\nThe following optional properties can be used for tweaking heatmap behavior for exact application purposes:\r\n\r\n`start`: Axis coordinate where heatmap grid begins.\r\n\r\n`step`: The Axis offset between two heatmap cells.\r\n\r\n`scrollDimension`: By default the series is configured to have fixed `rows` (Y) resolution and scroll indefinitely along `columns` (X). This can be flipped by specifying `scrollDimension: rows`.\r\n\r\n# Heatmap Scrolling Grid Series data input\r\n\r\n`HeatmapScrollingGridSeries` receives data as _append_ operation to push on top of previously pushed data.\r\n\r\nData is added using `addIntensityValues` method:\r\n\r\n```js\r\n// Example syntax, append 2 samples to scrolling heatmap grid with resolution: 10\r\nheatmap.addIntensityValues([\r\n    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\r\n    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\r\n])\r\n```\r\n\r\n# Heatmap Scrolling Grid Series data cleaning\r\n\r\nAutomatic data cleaning is essential in streaming applications that run for long times or _even indefinitely_;\r\n\r\nIn LightningChart JS, this is configured with the `setDataCleaning` method;\r\n\r\n```js\r\n// Example, configure automatic data cleaning.\r\nheatmapGridSeries.setDataCleaning({\r\n    // Out of view data can be lazily removed as long as total scrolling columns count remains over 1000.\r\n    minDataPointCount: 1000,\r\n})\r\n```\r\n\r\nSimple? _- Yes._\r\n\r\nPowerful? _- Naturally._\r\n\n\n## API Links\n\n* [Scrolling Heatmap Grid Series]\n* [Paletted Fill Style]\n* [Color lookup table]\n* [Color factory HSV]\n* [Empty line style]\n* [Axis automatic scroll options]\n* [Chart XY]\n* [Axis XY]\n* [Legend Box]\n\n\n## Support\n\nIf you notice an error in the example code, please open an issue on [GitHub][0] repository of the entire example.\r\n\r\nOfficial [API documentation][1] can be found on [LightningChart][2] website.\r\n\r\nIf the docs and other materials do not solve your problem as well as implementation help is needed, ask on [StackOverflow][3] (tagged lightningchart).\r\n\r\nIf you think you found a bug in the LightningChart JavaScript library, please contact sales@lightningchart.com.\r\n\r\nDirect developer email support can be purchased through a [Support Plan][4] or by contacting sales@lightningchart.com.\r\n\r\n[0]: https://github.com/Arction/\r\n[1]: https://lightningchart.com/lightningchart-js-api-documentation/\r\n[2]: https://lightningchart.com\r\n[3]: https://stackoverflow.com/questions/tagged/lightningchart\r\n[4]: https://lightningchart.com/support-services/\r\n\n© LightningChart Ltd 2009-2022. All rights reserved.\r\n\n\n[Scrolling Heatmap Grid Series]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/HeatmapScrollingGridSeriesIntensityValues.html\n[Paletted Fill Style]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/PalettedFill.html\n[Color lookup table]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/LUT.html\n[Color factory HSV]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/functions/ColorHSV.html\n[Empty line style]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/variables/emptyLine.html\n[Axis automatic scroll options]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/variables/AxisScrollStrategies.html\n[Chart XY]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/ChartXY.html\n[Axis XY]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/Axis.html\n[Legend Box]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/Chart.html#addLegendBox\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farction%2Flcjs-example-0803-scrollingheatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farction%2Flcjs-example-0803-scrollingheatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farction%2Flcjs-example-0803-scrollingheatmap/lists"}