{"id":20893432,"url":"https://github.com/arction/lcjs-example-0500-dashboardwithlegendbox","last_synced_at":"2025-03-12T19:14:33.554Z","repository":{"id":98723640,"uuid":"200631778","full_name":"Arction/lcjs-example-0500-dashboardWithLegendBox","owner":"Arction","description":"A demo application showcasing LightningChart JS Dashboard with Legend box","archived":false,"fork":false,"pushed_at":"2025-02-05T11:37:38.000Z","size":12938,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-05T12:31:51.859Z","etag":null,"topics":["dashboard","javascript","lcjs","legendbox","lightningchart-js","performance","visualization","webgl","xy-chart"],"latest_commit_sha":null,"homepage":"https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0500-dashboardWithLegendBox.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":"2019-08-05T10:12:06.000Z","updated_at":"2025-02-05T11:35:58.000Z","dependencies_parsed_at":"2025-02-05T12:28:37.989Z","dependency_job_id":"0c0c0db8-101b-468f-bef6-384258b422cd","html_url":"https://github.com/Arction/lcjs-example-0500-dashboardWithLegendBox","commit_stats":null,"previous_names":[],"tags_count":4,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0500-dashboardWithLegendBox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0500-dashboardWithLegendBox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0500-dashboardWithLegendBox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0500-dashboardWithLegendBox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arction","download_url":"https://codeload.github.com/Arction/lcjs-example-0500-dashboardWithLegendBox/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":["dashboard","javascript","lcjs","legendbox","lightningchart-js","performance","visualization","webgl","xy-chart"],"created_at":"2024-11-18T10:15:47.663Z","updated_at":"2025-03-12T19:14:33.544Z","avatar_url":"https://github.com/Arction.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Dashboard With LegendBox\n\n![JavaScript Dashboard With LegendBox](dashboardWithLegendbox-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 shows a simple dashboard with multiple chart types and LegendBox Panel.\r\n\r\nThe dashboard allows rendering of multiple scenes in a single view port highly efficiently with minimal memory resources. During the creation of a dashboard instance, the amount of rows and columns will have to be specified. This can not be changed afterwards.\r\n\r\n**(!) Using `Dashboard` is no longer recommended for new applications. Find latest recommendations here: https://lightningchart.com/js-charts/docs/basic-topics/grouping-charts/**\r\n\r\n```javascript\r\n// Create a dashboard with three rows and two columns.\r\nconst dashboard = lightningChart().Dashboard({\r\n    numberOfRows: 3,\r\n    numberOfColumns: 2,\r\n})\r\n```\r\n\r\nCharts and Panels can then be added to the dashboard like follows:\r\n\r\n```javascript\r\n// Create a ChartXY that occupies the top row of the dashboard.\r\nconst chartXY = dashboard.createChartXY({\r\n    // Row index (starting from bottom).\r\n    columnIndex: 2,\r\n    // Column index (starting from left).\r\n    rowIndex: 0,\r\n    // Row span (height, basically).\r\n    columnSpan: 1,\r\n    // Column span (width, basically).\r\n    rowSpan: 2,\r\n})\r\n```\r\n\r\n[//]: # 'IMPORTANT: The assets will not show before README.md is built - relative path is different!'\r\n\r\n![](./assets/dashboardPositioning.png)\r\n\r\nDashboards have separate methods for adding a different kind of Charts or Panels. Dashboard represents a grid with rows \u0026 columns. During the creation of the element, the row \u0026 column indices and the horizontal \u0026 vertical spans should be specified to position it in the correct place and fill the desired amount of cells.\r\n\r\n```javascript\r\n// Create a spider chart and attach to dashboard.\r\n// Row 0, Column 0, Rows to fill 2, Columns to fill 1.\r\nconst spiderChart = dashboard.createSpider(0, 0, 2, 1)\r\n\r\n// Create a Legend Box Panel and attach to dashboard.\r\n// Row 0, Column 1, Rows to fill 2, Columns to fill 1.\r\nconst legendBox = dashboard.createLegendBoxPanel({\r\n    columnIndex: 0,\r\n    rowIndex: 1,\r\n    columnSpan: 2,\r\n    rowSpan: 1,\r\n})\r\n```\r\n\r\nThe dashboard rows and columns can have varying heights and widths respectively - you can resize them by clicking and dragging on the grid line separating the columns and rows from each other, or by using methods to set them programmatically:\r\n\r\n```javascript\r\n// Set height of the first row of a dashboard.\r\n// By default each row and column has a size of 1.\r\n// The size is always relative to the combined size of each row / column.\r\ndashboard.setRowHeight(0, 2)\r\n// Set width of the first and the second column of a dashboard.\r\n// First column width will be 2/5 of the entire view's width.\r\ndashboard.setColumnWidth(0, 2)\r\n// Second column width will be 3/5 of the entire view's width.\r\ndashboard.setColumnWidth(1, 3)\r\n```\r\n\n\n## API Links\n\n* [Dashboard]\n* [Legend box panel]\n* [XY cartesian chart]\n* [Spline series]\n* [Scroll strategies]\n* [Spider chart]\n* [RGBA color factory]\n* [UI position origins]\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[Dashboard]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/Dashboard.html\n[Legend box panel]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/UILegendBoxPanel.html\n[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/ChartXY.html\n[Spline series]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/SplineSeries.html\n[Scroll strategies]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/variables/AxisScrollStrategies.html\n[Spider chart]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/classes/SpiderChart.html\n[RGBA color factory]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/functions/ColorRGBA.html\n[UI position origins]: https://lightningchart.com/js-charts/api-documentation/v7.0.1/variables/UIOrigins.html\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farction%2Flcjs-example-0500-dashboardwithlegendbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farction%2Flcjs-example-0500-dashboardwithlegendbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farction%2Flcjs-example-0500-dashboardwithlegendbox/lists"}