diff --git a/Examples/src/components/Examples/Charts2D/BasicChartTypes/BubbleChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts2D/BasicChartTypes/BubbleChart/exampleInfo.tsx index 732ca19bd..3306d0fa4 100644 --- a/Examples/src/components/Examples/Charts2D/BasicChartTypes/BubbleChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts2D/BasicChartTypes/BubbleChart/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "Demonstrates how to create a **JavaScript Bubble Chart** This is a JavaScript Chart type which draws point-markers (Ellipse, Square, Triangle, Circle) at X,Y locations", - title: "JavaScript Bubble Chart", - pageTitle: "JavaScript Bubble Chart | Online JavaScript Chart Examples", + "This Bubble Chart JavaScript example enables you to draw point-markers (Ellipse, Square, Triangle, Circle) at X,Y locations.", + title: "Bubble Chart JavaScript", + pageTitle: "Bubble Chart JavaScript | Try SciChart Demo", metaDescription: - "Create a high performance JavaScript Bubble Chart with Sci-Chart. Demo shows how to draw point-markers at X,Y locations. Get your free demo now.", + "Create a high-performance Bubble Chart in JavaScript with SciChart. This demo shows how to draw point-markers at X,Y locations. Try the free demo now.", markdownContent: "## Bubble Chart with JavaScript\n\n### Overview\nThis example demonstrates how to create a high-performance **Bubble Chart** using JavaScript and SciChart.js. It combines a smooth spline line series with a dynamic bubble series where each bubble’s size is determined by a third data value. The implementation leverages asynchronous chart initialization and WebAssembly for optimal rendering performance.\n\n### Technical Implementation\nThe chart is initialized asynchronously using [SciChartSurface.create](https://www.scichart.com/documentation/js/v5/2d-charts/surface/new-scichart-surface/#scichartsurfacecreate), which loads the WebAssembly context for efficient GPU-accelerated rendering. Data for the chart is managed using an `XyDataSeries` for the spline line and an `XyzDataSeries` for the bubble series, a design choice that allows the bubble sizes to be scaled automatically based on the Z-values. Smooth visual transitions are applied using [SweepAnimation](https://www.scichart.com/documentation/js/v5/2d-charts/animations-api/series-startup-animations/), and each bubble is rendered with an `EllipsePointMarker` for a consistent appearance. Additionally, a custom palette provider is implemented following the [PaletteProvider API](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/palette-provider-api/palette-provider-api-overview/) guidelines to conditionally style bubbles based on their data values. Interactive capabilities are enhanced through modifiers such as `ZoomPanModifier`, `MouseWheelZoomModifier`, and `ZoomExtentsModifier`, details of which can be found in the [Interactive Zooming and Panning](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-03-adding-zooming-panning-behavior/) documentation.\n\n### Features and Capabilities\nKey features of this implementation include real-time data visualization, dynamic bubble sizing, and smooth startup animations. The chart offers advanced interactivity with zooming and panning tools, providing users the ability to explore detailed datasets easily. The custom palette provider further enhances the chart by enabling per-point color customization based on specific data conditions, adding an extra layer of data insight.\n\n### Integration and Best Practices\nThis example adheres to best practices for modular chart initialization in plain JavaScript by isolating the rendering logic in a dedicated function. Its asynchronous setup ensures that the heavy lifting, such as WebAssembly loading, does not block the main thread, promoting a responsive user interface. Developers looking to optimize performance and maintainability in their web applications can benefit from the techniques demonstrated here, as detailed in the [Performance Tips for JavaScript Charts](https://www.scichart.com/documentation/js/v5/2d-charts/performance-tips/performance-tips-and-tricks/) documentation.\n", }, @@ -50,7 +50,7 @@ const metaData: IExampleMetadata = }, ], path: "bubble-chart", - metaKeywords: "bubble, chart, javascript, webgl, canvas", + metaKeywords: "bubble chart javascript, bubble chart javascript example, animated bubble chart javascript", onWebsite: true, filepath: "Charts2D/BasicChartTypes/BubbleChart", thumbnailImage: "javascript-bubble-chart.jpg", diff --git a/Examples/src/components/Examples/Charts2D/BasicChartTypes/ColumnChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts2D/BasicChartTypes/ColumnChart/exampleInfo.tsx index 88cfe3769..0f5654cba 100644 --- a/Examples/src/components/Examples/Charts2D/BasicChartTypes/ColumnChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts2D/BasicChartTypes/ColumnChart/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "Creates a **JavaScript Column Chart** using SciChart.js, with the following features: DataLabels, Rounded corners, Gradient-palette fill, startup animations.", + "This example demonstrates how to create an interactive JavaScript Column Chart using SciChart.js. The chart illustrates key features, such as data labels, rounded corners, gradient palette fills, and startup animations, alongside a high-performance, real-time data visualization.", title: "JavaScript Column Chart", - pageTitle: "JavaScript Column Chart", + pageTitle: "JavaScript Column Chart | Try Now | SciChart", metaDescription: - "JavaScript Column Chart demo by SciChart supports gradient fill and paletteproviders for more custom coloring options. Get your free demo now.", + "The JavaScript Column Chart example by SciChart supports gradient and palette fills, as well as custom coloring options. Try the free demo and code samples.", markdownContent: "## Column Chart Example (JavaScript)\n\n### Overview\nThis example demonstrates how to create an interactive **Column Chart** using SciChart.js in a JavaScript environment. The chart illustrates key features such as data labels, rounded corners, gradient palette fills, and startup animations, providing a high-performance real-time data visualization solution.\n\n### Technical Implementation\nThe chart is initialized by creating a `SciChartSurface` via the asynchronous call to `SciChartSurface.create()`, a method detailed in the [Tutorial 01 - Including SciChart.js in an HTML Page using CDN](https://www.scichart.com/documentation/js/v5/get-started/tutorials-cdn/tutorial-01-using-cdn/). The implementation sets up numeric axes using the `NumericAxis` class and populates the chart with a `FastColumnRenderableSeries`, which uses an `XyDataSeries` to manage the data points. Advanced customizations include setting rounded corners, a gradient fill created with `PaletteFactory`, and a `WaveAnimation` to animate the chart on startup. For more details on these aspects, refer to the [The Column Series Type](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/fast-column-renderable-series/column-series-type/) and [The Animations API](https://www.scichart.com/documentation/js/v5/2d-charts/animations-api/animations-api-overview/) documentation.\n\n### Features and Capabilities\nKey technical features of this example include interactive modifiers such as `ZoomPanModifier`, `ZoomExtentsModifier`, and `MouseWheelZoomModifier` which enhance user interaction by providing seamless zooming and panning capabilities. The series is further enhanced with data labels that are styled and positioned above each column for improved readability. The use of gradient fills via `PaletteFactory` not only enhances visual appeal but also demonstrates advanced customization options, aligning with best practices for high-performance WebGL rendering. Details on gradient customization can be found in the [The PaletteFactory Helper Class](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/palette-provider-api/palette-factory/) documentation.\n\n### Integration and Best Practices\nIn a JavaScript integration, the chart is created and managed by directly invoking the `drawExample` function. Resource management is handled by returning a destructor function that calls `sciChartSurface.delete()`, ensuring that resources are properly freed when the chart is no longer needed. This approach aligns with recommended practices for WebAssembly integration and efficient memory management as explained in the [Getting Started with SciChart JS](https://www.scichart.com/getting-started/scichart-javascript/) guide. Additionally, the direct method of instantiating and disposing of the chart ensures optimal performance in high-frequency data scenarios.\n", }, @@ -50,7 +50,7 @@ const metaData: IExampleMetadata = }, ], path: "column-chart", - metaKeywords: "column, chart, javascript, webgl, canvas", + metaKeywords: "javascript column chart, column chart in javascript", onWebsite: true, filepath: "Charts2D/BasicChartTypes/ColumnChart", thumbnailImage: "javascript-column-chart.jpg", diff --git a/Examples/src/components/Examples/Charts2D/BasicChartTypes/DonutChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts2D/BasicChartTypes/DonutChart/exampleInfo.tsx index 56b5eba14..283115ed7 100644 --- a/Examples/src/components/Examples/Charts2D/BasicChartTypes/DonutChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts2D/BasicChartTypes/DonutChart/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "This demo demonstrates how create a **JavaScript Donut Chart** with our powerful JavaScript library, SciChart.js.", + "This JavaScript Donut Chart example illustrates the creation of an animated donut chart using SciChart.js. It demonstrates how to visualize market share data using dynamic, gradient-filled segments and configurable legends. The chart is constructed asynchronously to ensure smooth rendering and maximal performance in web applications.", title: "JavaScript Donut Chart", - pageTitle: "JavaScript Donut Chart", + pageTitle: "JavaScript Donut Chart | Try the Demo | SciChart", metaDescription: - "Create JavaScript Donut Chart with 5-star rated SciChart.js chart library. Supports legends, text labels, animated updates and more. Get free trial now.", + "Build a sleek JavaScript Donut Chart with SciChart. Includes custom color palettes, interactive selection, legends, and smooth dynamic data rendering.", markdownContent: "## Donut Chart - JavaScript\n\n### Overview\nThis example illustrates the creation of an animated **donut chart** using SciChart.js with JavaScript. It demonstrates how to visualize market share data using dynamic, gradient-filled segments and configurable legends. The chart is constructed asynchronously to ensure smooth rendering and maximal performance in web applications.\n\n### Technical Implementation\nThe chart is built by creating a new instance of `SciChartPieSurface` configured as with `pieType` = `EPieType.Donut`, setting `holeRadius` and `holeRadiusSizingMode` and animated transitions. Each segment is generated from a dataset by transforming data objects into `PieSegment` instances with custom linear gradients. The asynchronous initialization in the function `drawExample` ensures the chart is set up efficiently. For detailed guidance on initializing SciChart.js charts asynchronously, please refer to the [Getting Started with SciChart JS](https://www.scichart.com/getting-started/scichart-javascript/) documentation.\n\n### Features and Capabilities\nKey features of this implementation include animated updates, advanced gradient color configuration for each pie segment, dynamic legend orientation and placement, and relative radius adjustments for enhanced visual differentiation of data segments. These capabilities are essential for building interactive visualizations, as detailed in the [JavaScript Donut Chart Documentation](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/donut-chart-type/).\n\n### Integration and Best Practices\nThis example follows best practices by using efficient asynchronous initialization and properly managing resources through a returned destructor function, enabling safe cleanup of the chart instance when no longer needed. Such optimizations are in line with recommendations from the [Memory Best Practices](https://www.scichart.com/documentation/js/v5/2d-charts/performance-tips/memory-best-practices/) guide. Additionally, the use of gradient configurations and dynamic legends simplifies further customization and integration of SciChart.js into standard JavaScript projects. For more technical insights on animated configurations and gradient customization, developers can also explore practical examples in the [JavaScript Donut Chart Documentation](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/donut-chart-type/).", }, @@ -50,7 +50,8 @@ const metaData: IExampleMetadata = }, ], path: "donut-chart", - metaKeywords: "donut, chart, javascript, canvas", + metaKeywords: + "javascript donut chart, animated donut chart javascript, create a donut chart javascript, donut chart javascript example", onWebsite: true, filepath: "Charts2D/BasicChartTypes/DonutChart", thumbnailImage: "javascript-donut-chart.jpg", diff --git a/Examples/src/components/Examples/Charts2D/BasicChartTypes/HeatmapChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts2D/BasicChartTypes/HeatmapChart/exampleInfo.tsx index 90e05f4a6..83cdd5fa4 100644 --- a/Examples/src/components/Examples/Charts2D/BasicChartTypes/HeatmapChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts2D/BasicChartTypes/HeatmapChart/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "If you want to learn about heatmaps. this demo shows you how to create a **JavaScript Heatmap Chart** using SciChart.js, our 5-star rated JavaScript Chart Component.", + "This JavaScript Heatmap Chart demo shows you how to use SciChart.js. The implementation focuses on real-time data streaming, and dynamic visual updates. It leverages WebGL-powered rendering for optimal performance.", title: "JavaScript Heatmap Chart", - pageTitle: "JavaScript Heatmap Chart", + pageTitle: "JavaScript Heatmap Chart | View the Demo | SciChart", metaDescription: - "Easily create a high performance JavaScript Heatmap Chart with SciChart. Get your free trial of our 5-star rated JavaScript Chart Component today.", + "Build a high-performance JavaScript Heatmap Chart with real-time color mapping. Render massive matrix datasets smoothly using SciChart's Visual Xccelerator™.", markdownContent: "## Heatmap Chart Example - JavaScript\n\n### Overview\nThis example demonstrates a high-performance **Heatmap Chart** implemented using JavaScript with SciChart.js. The implementation focuses on real-time data streaming and dynamic visual updates, leveraging WebGL-powered rendering for optimal performance.\n\n### Technical Implementation\nThe chart is built by creating a `SciChartSurface` instance via the SciChart.js API, and hidden numeric axes are added to simplify the presentation. The example generates a two-dimensional array of data which is fed to a `UniformHeatmapDataSeries`. A `UniformHeatmapRenderableSeries` is then configured with a detailed gradient via `HeatmapColorMap` to accurately represent the data. Real-time updates are managed using JavaScript’s `setTimeout` to continuously update the series, as explained in the [Adding Realtime Updates](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-04-adding-realtime-updates/) documentation.\n\n### Features and Capabilities\nKey features include real-time chart updates with dynamic data streaming, advanced color mapping techniques, and integrated performance monitoring. The color mapping is finely tuned using gradient stops which you can learn more about in the [Uniform Heatmap Chart documentation](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/uniform-heatmap-renderable-series/uniform-heatmap-chart-type/) and [Uniform-Heatmap-Colormaps](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/uniform-heatmap-renderable-series/color-maps-and-legends/) resources. In addition, interactive modifiers such as `ZoomPanModifier` and `MouseWheelZoomModifier` enhance the user experience.\n\n### Integration and Best Practices\nBuilt on JavaScript, this example adheres to best practices by directly interacting with the SciChart.js API without relying on additional frameworks. Developers can monitor performance by subscribing to render events, a technique detailed in the [Performance Tips & Tricks](https://www.scichart.com/documentation/js/v5/2d-charts/performance-tips/performance-tips-and-tricks/) guide. Furthermore, interactive features are implemented using modifiers like the [MouseWheelZoomModifier](https://www.scichart.com/documentation/js/v5/2d-charts/chart-modifier-api/zooming-and-panning/mouse-wheel-zoom-modifier/) to ensure a smooth user experience. This approach provides a clear and maintainable structure for integrating SciChart.js within any JavaScript project.", }, @@ -50,7 +50,7 @@ const metaData: IExampleMetadata = }, ], path: "heatmap-chart", - metaKeywords: "heatmap, chart, javascript, webgl, canvas", + metaKeywords: "javascript heatmap chart", onWebsite: true, filepath: "Charts2D/BasicChartTypes/HeatmapChart", thumbnailImage: "javascript-heatmap-chart.jpg", diff --git a/Examples/src/components/Examples/Charts2D/BasicChartTypes/OhlcChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts2D/BasicChartTypes/OhlcChart/exampleInfo.tsx index 77b0357a0..a1e3399db 100644 --- a/Examples/src/components/Examples/Charts2D/BasicChartTypes/OhlcChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts2D/BasicChartTypes/OhlcChart/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "For this example, we demonstrate how to create a **JavaScript OHLC Chart** or Stock Chart using SciChart.js. This is our powerful JavaScript Chart Component.", + "This JavaScript OHLC Chart or Stock Chart example uses SciChart.js to visually represent market data, making it ideal for stock trading applications and financial data analysis. View the code, documentation and technical implementation advice below to create this example.", title: "JavaScript OHLC Chart", - pageTitle: "JavaScript OHLC Chart", + pageTitle: "JavaScript OHLC Chart | Try the Demo | SciChart", metaDescription: - "Easily create JavaScript OHLC Chart or Stock Chart using feature-rich SciChart.js chart library. Supports custom colors. Get your free trial now. ", + "Explore a financial JavaScript OHLC Chart demo with SciChart. Features real-time tick updates, technical indicators, zoom controls, and custom styling.", markdownContent: "## Ohlc Chart - JavaScript\n\n### Overview\nThis example demonstrates how to create an **Ohlc Chart** (Open-High-Low-Close Chart) using JavaScript with SciChart.js. It is designed to visually represent financial market data, making it ideal for stock trading applications and financial data analysis.\n\n### Technical Implementation\nThe chart is initialized by calling the asynchronous function that creates a `SciChartSurface` using [SciChartSurface.create](https://www.scichart.com/documentation/js/v5/2d-charts/surface/new-scichart-surface/#scichartsurfacecreate). A `CategoryAxis` is added and configured with a [SmartDateLabelProvider](https://www.scichart.com/documentation/js/v5/2d-charts/axis-api/axis-types/date-time-numeric-axis/#configuring-default-behaviour-with-the-smartdatelabelprovider) to effectively handle non-contiguous stock market dates, and a `NumericAxis` is used to display financial values with precise formatting. Financial data is managed via an `OhlcDataSeries` that feeds into a `FastOhlcRenderableSeries`, which renders the OHLC data points efficiently. A [SweepAnimation](https://www.scichart.com/documentation/js/v5/typedoc/classes/sweepanimation.html) enhances the visual presentation by animating the appearance of the series.\n\n### Features and Capabilities\nThis implementation includes several advanced features such as interactive chart modifiers. The chart supports intuitive user interactions through `ZoomExtentsModifier`, `ZoomPanModifier`, and `MouseWheelZoomModifier`, allowing for seamless zooming and panning operations. Additionally, performance optimizations are achieved with WebGL rendering, ensuring smooth animations and responsiveness even with large datasets. For detailed performance insights, refer to the [Getting Started with SciChart JS](https://www.scichart.com/getting-started/scichart-javascript/) documentation.\n\n### Integration and Best Practices\nThe example employs JavaScript integration, highlighting best practices for resource management. A cleanup function is provided by calling `sciChartSurface.delete()` to properly dispose of the chart resources when they are no longer needed, aligning with the guidelines in the [Memory Best Practices](https://www.scichart.com/documentation/js/v5/2d-charts/performance-tips/memory-best-practices/) documentation. This approach ensures that applications remain performant and free of memory leaks. The example serves as a robust reference for developers looking to integrate high-performance financial charts without additional framework dependencies.\n\nOverall, this Ohlc Chart example using JavaScript with SciChart.js encapsulates best practices for chart initialization, axis configuration, animation, interactivity, and resource management, providing an excellent starting point for building scalable financial data visualization applications.", }, @@ -50,7 +50,7 @@ const metaData: IExampleMetadata = }, ], path: "ohlc-chart", - metaKeywords: "ohlc, stock, trading, chart, javascript, webgl, canvas", + metaKeywords: "javascript ohlc chart", onWebsite: true, filepath: "Charts2D/BasicChartTypes/OhlcChart", thumbnailImage: "javascript-ohlc-chart.jpg", diff --git a/Examples/src/components/Examples/Charts2D/PolarCharts/PolarRadarChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts2D/PolarCharts/PolarRadarChart/exampleInfo.tsx index 6f6b97f86..447dff02f 100644 --- a/Examples/src/components/Examples/Charts2D/PolarCharts/PolarRadarChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts2D/PolarCharts/PolarRadarChart/exampleInfo.tsx @@ -15,11 +15,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "Creates a **JavaScript Polar Radar Chart**, also known as a **Spider Chart** using SciChart.js, which expresses the complexity, memory usage, stability, adaptability, scalability, and cache efficiency of two popular sorting algorithms", + "This example shows how to build a JavaScript Radar Chart with SciChart.js, comparing attributes like complexity and scalability of Quick Sort and Bubble Sort using polar series representations. Experience the complexity, memory usage, stability, adaptability, scalability, and cache efficiency of two popular sorting algorithms.", title: "JavaScript Polar Radar Chart", - pageTitle: "JavaScript Polar Radar Chart | Spider Radar Chart", + pageTitle: "JavaScript Radar Chart | View the Demo | SciChart", metaDescription: - "View the JavaScript Polar Radar Chart example. Also known as the Spider Radar Chart, view the scalability and stability that SciChart has to offer. Try demo.", + "Build a responsive JavaScript Radar Chart with SciChart. Visualize polar series, multi-axis data, custom styling, and dynamic real-time data updates.", markdownContent: "## JavaScript Polar Radar Chart\n\n### Overview\nThis example shows how to build a **Polar Radar Chart** in vanilla JavaScript with SciChart.js, comparing attributes like complexity and scalability of Quick Sort and Bubble Sort using polar series representations.\n\n### Technical Implementation\nThe chart uses async creation of SciChartPolarSurface, setting up PolarNumericAxis and PolarCategoryAxis with custom gridlines and labels. It employs PolarMountainRenderableSeries and PolarLineRenderableSeries backed by XyDataSeries, incorporating optimizations like native text and precise label formatting for efficient rendering, as explained in the [Polar Radar Chart guide](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/polar-radar-chart/).\n\n### Features and Capabilities\nIt enables real-time data updates through series manipulation and offers custom features including fade animations, ellipse point markers, and modifiers like PolarMouseWheelZoomModifier for interactive zooming and panning.\n\n### Integration and Best Practices\nIn JavaScript, implement async initialization with a destructor for resource cleanup to prevent memory leaks. Adhere to modular configuration for scalable code, leveraging direct API calls for fine-tuned performance.", }, @@ -52,7 +52,7 @@ const metaData: IExampleMetadata = }, ], path: "polar-radar-chart", - metaKeywords: "polar, radar, spider, chart, javascript, webgl, canvas", + metaKeywords: "javascript radar chart, radar chart javascript", onWebsite: true, filepath: "Charts2D/PolarCharts/PolarRadarChart", thumbnailImage: "javascript-polar-radar-chart.jpg", diff --git a/Examples/src/components/Examples/Charts3D/Basic3DChartTypes/Bubble3DChart/exampleInfo.tsx b/Examples/src/components/Examples/Charts3D/Basic3DChartTypes/Bubble3DChart/exampleInfo.tsx index 0cce95d83..a018037ce 100644 --- a/Examples/src/components/Examples/Charts3D/Basic3DChartTypes/Bubble3DChart/exampleInfo.tsx +++ b/Examples/src/components/Examples/Charts3D/Basic3DChartTypes/Bubble3DChart/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "Our team demonstrates how to create a **JavaScript 3D Bubble Chart** using SciChart.js, capable of creating detailed 3D JavaScript Charts.", + "This example demonstrates how to create an interactive JavaScript 3D Bubble Chart using SciChart.js. The chart leverages the power of WebAssembly for high-performance rendering and offers advanced features such as custom tooltip rendering, interactive 3D modifiers, and efficient data series management.", title: "JavaScript 3D Bubble Chart", - pageTitle: "JavaScript 3D Bubble Chart | 3D JavaScript Charts | View Now", + pageTitle: "JavaScript 3D Bubble Chart | Try Demo | SciChart", metaDescription: - "Create detailed JavaScript 3D Bubble Chart using SciChart's 5-star rated JavaScript chart library. Supports large datasets. Get your free demo now.", + "Create a detailed JavaScript 3D Bubble Chart using SciChart's 5-star rated JavaScript chart library. Supports large datasets. Try the free demo now.", markdownContent: "## Bubble 3D Chart in JavaScript\n\n### Overview\nThis example demonstrates the creation of an interactive 3D bubble chart using SciChart.js in a JavaScript environment. The chart leverages the power of WebAssembly for high-performance rendering and offers advanced features such as custom tooltip rendering, interactive 3D modifiers, and efficient data series management.\n\n### Technical Implementation\nThe chart is initialized by creating a new SciChart3DSurface with a WebAssembly context, as described in the [3D Tutorial](https://www.scichart.com/documentation/js/v5/3d-charts/scichart-3d-basics/scichart-3d-basics-overview/). Asynchronous initialization is handled using Promise.all to ensure that both the chart setup and data fetching complete before rendering. Interactive modifiers such as MouseWheelZoomModifier3D, OrbitModifier3D, and ResetCamera3DModifier are added to enable smooth 3D navigation; learn more in the [Orbit Modifier 3D documentation](https://www.scichart.com/documentation/js/v5/3d-charts/chart-modifier-3d-api/zooming-and-panning/orbit-modifier-3d/). Custom camera control is achieved via the CameraController, allowing for precise positioning of the 3D view.\n\n### Features and Capabilities\nThe example features a sophisticated custom tooltip implementation using TooltipModifier3D. Data points in the scatter renderable series are enriched with metadata (such as country, life expectancy, GDP per capita, and year), and tooltips are rendered using custom data and SVG templates as outlined in the [Tooltip Modifier 3D documentation](https://www.scichart.com/documentation/js/v5/3d-charts/chart-modifier-3d-api/tooltip-modifier-3d/). Additionally, each of the 3D axes is configured using NumericAxis3D with specified visible ranges and label precision. Detailed information on axis configuration can be found in the [NumericAxis3D API documentation](https://www.scichart.com/documentation/js/v5/typedoc/classes/numericaxis3d.html).\n\n### Integration and Best Practices\nResource cleanup is managed via a destructor function that calls the delete method on the SciChartSurface, in accordance with best practices described in the [Memory Best Practices documentation](https://www.scichart.com/documentation/js/v5/2d-charts/performance-tips/memory-best-practices/). The asynchronous pattern using Promise.all is further supported by guidelines discussed in the [MDN Promise.all documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all). By integrating these advanced features in a JavaScript framework, the example illustrates how to build high-performance, customizable 3D charts using SciChart.js.", }, @@ -50,7 +50,7 @@ const metaData: IExampleMetadata = }, ], path: "3d-bubble-chart", - metaKeywords: "3d, bubble, chart, javascript, webgl, canvas", + metaKeywords: "javascript 3d bubble chart", onWebsite: true, filepath: "Charts3D/Basic3DChartTypes/Bubble3DChart", thumbnailImage: "javascript-3d-bubble-chart.jpg", diff --git a/Examples/src/components/Examples/FeaturedApps/MedicalCharts/VitalSignsMonitorDemo/exampleInfo.tsx b/Examples/src/components/Examples/FeaturedApps/MedicalCharts/VitalSignsMonitorDemo/exampleInfo.tsx index 6b41d8701..3771fc45d 100644 --- a/Examples/src/components/Examples/FeaturedApps/MedicalCharts/VitalSignsMonitorDemo/exampleInfo.tsx +++ b/Examples/src/components/Examples/FeaturedApps/MedicalCharts/VitalSignsMonitorDemo/exampleInfo.tsx @@ -13,11 +13,11 @@ const metaData: IExampleMetadata = frameworks: { javascript: { subtitle: - "Showcases how SciChart.js can be used in a **Medical context**, drawing ECGs with our High Performance JavaScript Charts", - title: "JavaScript Vital Signs ECG/EKG Medical Demo", - pageTitle: "JavaScript Vital Signs ECG/EKG Medical Demo", + "If you’re looking to build an ECG Chart in JavaScript, this demo shows you how to reliably visualize vital signs. This example showcases how to build a real-time medical chart using SciChart.js with JavaScript. It simulates multiple medical signals including ECG/EKG, blood pressure, blood volume, and blood oxygenation. It’s also optimized for continuous data streaming and efficient updates.", + title: "ECG Chart JavaScript", + pageTitle: "ECG Chart JavaScript | Try Demo | SciChart", metaDescription: - "In this example we are simulating four channels of data showing that SciChart.js can be used to draw real-time\n ECG/EKG charts and graphs to monitor heart reate, body temperature, blood pressure, pulse rate, SPO2 blood\n oxygen, volumetric flow and more.", + "Simulate four channels of medical data with SciChart’s ECG Chart in JavaScript. Draw real-time ECG/EKG charts to monitor heart rate, body temperature, and more.", markdownContent: "## Vital Signs Monitor Demo in JavaScript\n\n### Overview\nThis example, titled **Vital Signs Monitor Demo**, showcases how to build a high-performance real-time medical chart using SciChart.js with JavaScript. It simulates multiple medical signals including ECG, blood pressure, blood volume, and blood oxygenation, and is optimized for continuous data streaming and efficient updates.\n\n### Technical Implementation\nThe demo initializes a `SciChartSurface` with a hidden shared `CategoryAxis` for cyclic data management, which is essential for using FIFO-sweeping mode. Data is continuously appended to multiple `XyDataSeries` via the `appendRange()` method, ensuring smooth real-time updates. The use of `fifoCapacity` and `fifoSweeping` mode (see [DataSeries Realtime Updates](https://www.scichart.com/documentation/js/v5/2d-charts/chart-types/data-series-api/realtime-updates/)) allows the series to wrap around once the specified capacity is reached, optimizing performance. Additionally, a recursive `setTimeout` loop simulates real-time data streaming, while a custom `EventHandler` is used to update an information panel with computed metrics. For more detail on real-time updates, refer to [Adding Realtime Updates](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-04-adding-realtime-updates/).\n\n### Features and Capabilities\n**Real-Time Data Streaming:**\nThe demo employs a `setTimeout` loop to periodically fetch and append data points, demonstrating efficient real-time updating using JavaScript.\n\n**Performance Optimization:**\nBy configuring properties like `fifoCapacity` and `fifoSweeping`, the example highlights how FIFO buffers improve performance and simplify code for ECG style wrap-around charts when handling large volumes of data. For further insights, see the [Performance Tips & Tricks](https://www.scichart.com/documentation/js/v5/2d-charts/performance-tips/performance-tips-and-tricks/) guide.\n\n**Axis Configuration and Layout:**\nThe example uses a hidden `CategoryAxis` on the X-axis and multiple `NumericAxis` Y-axes that are vertically stacked with the `RightAlignedOuterVerticallyStackedAxisLayoutStrategy`. This approach simplifies the synchronization of multiple data series. More information is available in the [Vertically Stacked Axis](https://www.scichart.com/documentation/js/v5/2d-charts/axis-api/multi-axis-and-layout/vertically-stacked-axis-layout/) documentation.\n\n**Custom Event Handling and Memory Management:**\nCustom event handlers are implemented using the `EventHandler` class to update the UI with the latest metrics. Additionally, `sciChartSurface.addDeletable()` is used to automatically clean up these subscriptions, ensuring optimal resource management during the chart's lifecycle.\n\n### Integration and Best Practices\nEven though this demo is built using JavaScript, the underlying principles and performance optimizations can be applied across various frameworks. It emphasizes best practices for real-time data visualization including efficient data appending, optimized axis configurations, and sustainable memory management. By following these techniques, developers can create responsive, high-performance charting applications using SciChart.js.", }, @@ -50,7 +50,7 @@ const metaData: IExampleMetadata = }, ], path: "vital-signs-ecg-medical-chart-example", - metaKeywords: "ecg, ekg, realtime, medical, chart, javascript, webgl, canvas", + metaKeywords: "ecg chart javascript", onWebsite: true, filepath: "FeaturedApps/MedicalCharts/VitalSignsMonitorDemo", thumbnailImage: "javascript-vital-signs-ecg-medical-chart-example.jpg", diff --git a/Examples/src/server/services/sandbox/sandboxDependencyUtils.ts b/Examples/src/server/services/sandbox/sandboxDependencyUtils.ts index 1748d1e61..1a16eb484 100644 --- a/Examples/src/server/services/sandbox/sandboxDependencyUtils.ts +++ b/Examples/src/server/services/sandbox/sandboxDependencyUtils.ts @@ -1,6 +1,8 @@ import * as path from "path"; import * as fs from "fs"; +import { Logger } from "../logging"; + export interface IFiles { [key: string]: { content: string; @@ -33,6 +35,25 @@ export const handleInvalidFrameworkValue = (value: never): never => { throw new Error(`Invalid framework value=${value}!`); }; +// Candidates for an extension-less import, in the order a bundler would try them. +// The /index variants matter for folder modules such as ./FloatingPanel, +// which lives at FloatingPanel/index.tsx. +const resolveSuffixes = [".ts", ".tsx", "/index.ts", "/index.tsx"]; + +/** Resolve an extension-less module path to a file on disk, or undefined if none of the candidates exist. */ +const resolveModuleFile = async (basePath: string) => { + for (const suffix of resolveSuffixes) { + try { + const filepath = path.normalize(basePath + suffix); + const content = await fs.promises.readFile(filepath, "utf8"); + return { filepath, suffix, content }; + } catch { + // try the next candidate + } + } + return undefined; +}; + export const includeExternalModules = async ( examplefolderPath: string, folderPath: string, @@ -55,32 +76,23 @@ export const includeExternalModules = async ( files[csPath] = { content: "https://www.scichart.com/demo/images/" + filename, isBinary: true }; } } else { - const filepath = path.join(folderPath, externalImport[1] + externalImport[2] + ".ts"); + const basePath = path.join(folderPath, externalImport[1] + externalImport[2]); const filename = externalImport[2].substring(externalImport[2].lastIndexOf("/") + 1); - let csPath = filepath.replace(examplefolderPath, "src").replace(/\\/g, "/"); - //console.log(externalImport[1] + externalImport[2], csPath); + let csPathBase = basePath.replace(examplefolderPath, "src").replace(/\\/g, "/"); if (updateImports) { - if (!filepath.includes(examplefolderPath)) { - csPath = "src/" + filename + ".ts"; + if (!basePath.includes(examplefolderPath)) { + csPathBase = "src/" + filename; content = content.replace(externalImport[1] + externalImport[2], "./" + filename); - //console.log("Updating import", filepath, csPath, externalImport[1] + externalImport[2]); } } - const csPathx = csPath + "x"; - if (!files[csPath] && !files[csPathx]) { - try { - const externalContent = await fs.promises.readFile(filepath, "utf8"); - //console.log(filepath); - files[csPath] = { content: externalContent, isBinary: false }; - } catch { - const filepathx = filepath + "x"; - try { - const externalContentx = await fs.promises.readFile(filepathx, "utf8"); - files[csPathx] = { content: externalContentx, isBinary: false }; - } catch { - console.log(externalImport[2], "not found at", filepath, "from", folderPath); - files[csPath] = { content: "Could not load source", isBinary: false }; - } + if (!resolveSuffixes.some((suffix) => files[csPathBase + suffix])) { + const resolved = await resolveModuleFile(basePath); + if (resolved) { + const ext = resolved.suffix.endsWith(".tsx") ? ".tsx" : ".ts"; + files[csPathBase + ext] = { content: resolved.content, isBinary: false }; + } else { + Logger.debug(`${externalImport[2]} not found at ${basePath} from ${folderPath}`); + files[csPathBase + ".ts"] = { content: "Could not load source", isBinary: false }; } } } @@ -115,24 +127,15 @@ export const includeImportedModules = async ( } } else { csPath = "src/" + localImport[1] + ".ts"; - const csxPath = "src/" + localImport[1] + ".tsx"; - if (!files[csPath] && !files[csxPath]) { - try { - const filepath = path.join(folderPath, localImport[1] + ".ts"); - //console.log(csPath); - content = await fs.promises.readFile(filepath, "utf8"); - dirname = path.dirname(filepath); - } catch (e) { - try { - const filepath = path.join(folderPath, localImport[1] + ".tsx"); - //console.log("not found. trying ", filepath); - csPath = "src/" + localImport[1] + ".tsx"; - content = await fs.promises.readFile(filepath, "utf8"); - dirname = path.dirname(filepath); - } catch { - console.log(localImport[1], "not loaded for", folderPath); - content = "could not load source"; - } + if (!resolveSuffixes.some((suffix) => files["src/" + localImport[1] + suffix])) { + const resolved = await resolveModuleFile(path.join(folderPath, localImport[1])); + if (resolved) { + csPath = "src/" + localImport[1] + resolved.suffix; + content = resolved.content; + dirname = path.dirname(resolved.filepath); + } else { + Logger.debug(`${localImport[1]} not loaded for ${folderPath}`); + content = "could not load source"; } if (!localImport[1].includes("/")) { // this only works if the import is in the base folder diff --git a/Examples/src/server/websockets.ts b/Examples/src/server/websockets.ts index 4fb946396..7286f397d 100644 --- a/Examples/src/server/websockets.ts +++ b/Examples/src/server/websockets.ts @@ -1,6 +1,8 @@ import * as http from "http"; import * as socketIo from "socket.io"; +import { Logger } from "./services/logging"; + type TSubscription = { series: number[]; startX: number; @@ -24,7 +26,8 @@ const sendData = ( return; } - console.log(`Creating ${pointsPerUpdate} points for ${series.length} series starting at x=${nextx}`); + // Fires on every tick of every subscription, so keep it off the production log. + Logger.debug(`Creating ${pointsPerUpdate} points for ${series.length} series starting at x=${nextx}`); const x: number[] = []; const ys: number[][] = new Array(series.length);