### Install and Start Local HTTP Server for ChartIQ
Source: https://documentation.chartiq.com/tutorial-Setting Up a Web Server
Provides steps to install the `http-server` npm package and start a local web server from a specified directory. This server is necessary for viewing ChartIQ ES6 module-based templates due to CORS requirements. Node.js must be installed prior to using npx.
```Shell
npx http-server
```
--------------------------------
### Complete helloworld.html Example with ChartIQ Integration
Source: https://documentation.chartiq.com/tutorial-Quick%20Start%20Create%20a%20Chart%20UI
Provides the full HTML structure for a basic ChartIQ chart, including meta tags, CSS links, UI container elements, and an embedded JavaScript module. This example demonstrates the complete setup process from component registration to chart loading and UI activation.
```HTML
Chart Styles
Candle
Line
Step
Mountain
Baseline
Histogram
```
--------------------------------
### Start ChartIQ Project Development Server
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.1
Command to initiate the local development server for the ChartIQ project, enabling access to the application via a web browser. This is a standard npm command for JavaScript-based projects.
```bash
npm start
```
--------------------------------
### Accessing Localhost Server
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.1
Instructions to access the locally hosted ChartIQ Angular application after installation and compilation.
```Plain Text
http://localhost:4200/
```
--------------------------------
### Complete Customization Stylesheet Example
Source: https://documentation.chartiq.com/tutorial-Time%20Span%20Events%20Hello%20World%20Example%20for%20Angular%208.0
This comprehensive CSS example shows the final contents of `hello-world.component.scss`, including imports for ChartIQ base styles and all custom overrides for pop-up displays and sub-event markers. It demonstrates how to consolidate customizations in a single file for easy management.
```CSS
@import '~chartiq/css/stx-chart.css'; // Chart API
@import "~chartiq/css/chartiq.css";
@import "~chartiq/examples/markers/tradeAnalyticsSample.css";
// Customize the sub-event markers and pop-up displays.
// Sub-event marker pop-up displays.
.stx-performance-marker.stx-marker-expand {
background: rgba(255, 255, 255, 0.90);
max-width: 200px;
max-height: 200px;
padding: 10px;
opacity: 1;
color: #000;
display: block;
border: 1px solid rgba(180, 180, 180, 0.90);
overflow: auto;
position: absolute;
}
// Pop-up display heading text.
.stx-performance-marker.stx-marker-expand h4 {
display: block;
font-size: 0.80rem;
}
// Pop-up display body text.
.stx-performance-marker.stx-marker-expand p {
font-variant: small-caps;
}
// Sub-event markers.
.stx-marker.trade .stx-visual {
background: #C950d7;
width: 8px;
height: 8px;
}
```
--------------------------------
### Accessing Localhost Server
Source: https://documentation.chartiq.com/tutorial-Time%20Span%20Events%20Hello%20World%20Example%20for%20Angular%208.0
Instructions to access the locally hosted ChartIQ Angular application after successful setup and compilation.
```plaintext
http://localhost:4200/
```
--------------------------------
### Install and Start Local HTTP Server
Source: https://documentation.chartiq.com/tutorial-Setting%20Up%20a%20Web%20Server
This command installs and starts a lightweight local web server using npx http-server. It should be executed in the directory containing the ChartIQ templates, which will serve as the root directory for the server. This is necessary because ChartIQ's ES6 modules require HTTP/HTTPS protocols and proper CORS headers.
```Shell
npx http-server
```
--------------------------------
### HelloWorldComponent Stylesheet Import
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.1
The SCSS stylesheet for the HelloWorldComponent, demonstrating the import of the essential `stx-chart.css` file required for all ChartIQ charts.
```SCSS
@import '~chartiq/css/stx-chart.css'; // Chart API
```
--------------------------------
### Accessing Localhost ChartIQ Angular Application
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.0
This snippet shows the URL to access the compiled ChartIQ Angular application locally in a web browser after following the setup instructions.
```plaintext
http://localhost:4200/
```
--------------------------------
### Basic ChartIQ Chart Loading HTML Template
Source: https://documentation.chartiq.com/tutorial-Time%20Span%20Events%20Hello%20World%20Example%208.1
This HTML template (`helloworld.html`) demonstrates the fundamental process of embedding and initializing a ChartIQ time series chart. It sets up a chart container, imports static sample data and the ChartIQ library, and then uses an inline JavaScript module to instantiate `CIQ.ChartEngine` and load a chart with a 5-minute periodicity, all without a user interface.
```html
```
--------------------------------
### Example AI Prompt for Chart Type Command Generation
Source: https://documentation.chartiq.com/tutorial-AI%20Ready
This example illustrates a simple natural language prompt designed to guide an AI model in generating specific CLI commands. It instructs the AI to format chart type requests as "type " and provides a list of valid chart types, enabling the AI to convert user queries into executable commands for the `executor`.
```Natural Language
To display a specific chart type, write the following:
"type "
Replace with one of the following: Candle, Line, Mountain, Step, Histogram.
```
--------------------------------
### Initialize ChartIQ Chart and TimeSpanEventPanel in Angular ngAfterViewInit
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.1
This Angular `ngAfterViewInit` function demonstrates the complete setup for a ChartIQ chart, including the instantiation of the `CIQ.ChartEngine` and the `CIQ.TimeSpanEventPanel`. It also shows how to load initial chart data with periodicity settings, ensuring the time span events panel is initialized after the chart engine.
```TypeScript
ngAfterViewInit() {
const container = this.chartContainer.nativeElement;
const stx = new CIQ.ChartEngine({ container });
new CIQ["TimeSpanEventPanel"]({
stx: stx,
showTooltip: true,
infoPanel: {
spanEvent: "main",
durationEvent: "main",
singleEvent: "main"
}
});
stx.loadChart('SPY', {
masterData: this.getMasterData(),
periodicity: {
period: 1,
interval: 5,
timeUnit: 'minute',
},
});
}
```
--------------------------------
### Complete helloworld.html with Sample Quote Feed Integration
Source: https://documentation.chartiq.com/tutorial-Quick%20Start%20Connect%20a%20Live%20Data%20Source
This comprehensive HTML file demonstrates the full integration of the sample quote feed into a ChartIQ chart. It includes all necessary imports, chart engine instantiation, quote feed attachment, and chart loading, providing a functional example of a dynamic chart.
```html
```
--------------------------------
### Integrate ChartIQ TimeSpanEventPanel in Angular ngAfterViewInit Lifecycle
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.0
This comprehensive snippet demonstrates how to instantiate the `CIQ.TimeSpanEventPanel` within an Angular component's `ngAfterViewInit` lifecycle hook. It shows the panel's creation after the `CIQ.ChartEngine` is initialized and before loading chart data, ensuring the panel has access to the chart engine and proper chart setup.
```TypeScript
ngAfterViewInit() {
const container = this.chartContainer.nativeElement;
const stx = new CIQ.ChartEngine({ container });
new CIQ.TimeSpanEventPanel({
stx: stx,
showTooltip: true,
infoPanel: {
spanEvent: "main",
durationEvent: "main",
singleEvent: "main"
}
});
stx.loadChart('SPY', {
masterData: this.getMasterData(),
periodicity: {
period: 1,
interval: 5,
timeUnit: 'minute'
}
});
}
```
--------------------------------
### Complete ChartIQ Helloworld HTML Page Example
Source: https://documentation.chartiq.com/tutorial-Quick Start Create a Chart UI
A comprehensive HTML example demonstrating a minimal ChartIQ integration. It includes necessary meta tags, stylesheet links, a basic HTML structure for the chart container and a 'Chart Styles' menu, and an embedded JavaScript block for initializing the chart engine, loading data, and activating the ChartIQ UI components.
```HTML
Chart Styles
Candle
Line
Step
Mountain
Baseline
Histogram
```
--------------------------------
### AI Prompt: Generate Chart Type Commands
Source: https://documentation.chartiq.com/tutorial-AI Ready
This example shows a simple natural language prompt designed to guide an AI model in generating specific commands for changing chart types. The prompt instructs the AI to output commands in the format 'type ', where is one of the predefined chart options. The generated command can then be fed into the ChartIQ `executor`.
```text
To display a specific chart type, write the following:
"type "
Replace with one of the following: Candle, Line, Mountain, Step, Histogram.
```
--------------------------------
### Complete helloworld.html Example with Quote Feed
Source: https://documentation.chartiq.com/tutorial-Quick Start Connect a Live Data Source
The full, revised `helloworld.html` file, demonstrating the complete integration of the sample quote feed and removal of static data dependencies for a dynamic chart display.
```HTML
```
--------------------------------
### Access ChartIQ Sample Template via Localhost
Source: https://documentation.chartiq.com/tutorial-Setting Up a Web Server
Illustrates the format for accessing ChartIQ sample templates, such as `helloworld.html`, through a web browser after starting the local `http-server`. Templates must be loaded via HTTP/HTTPS, not `file:///` URIs, to function correctly.
```HTTP
http://localhost:8080/helloworld.html
```
--------------------------------
### Complete helloworld.html for Basic ChartIQ Chart Display
Source: https://documentation.chartiq.com/tutorial-Time%20Span%20Events%20Hello%20World%20Example%208.1
This snippet presents the full `helloworld.html` file, showcasing how to embed and initialize a ChartIQ chart. It includes the necessary HTML structure, CSS references, a chart container, and embedded JavaScript for ChartEngine instantiation, loading sample data, and integrating time span events. This serves as a foundational example for ChartIQ integration.
```HTML
```
--------------------------------
### HelloWorldComponent HTML Template
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.1
The HTML template for the HelloWorldComponent, defining the structure and container for the ChartIQ chart. It includes a template reference variable `#chartContainer` for DOM manipulation.
```HTML
Hello world static chart example
```
--------------------------------
### Basic ChartIQ Chart Loading in HTML
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example 8.0
This HTML file provides a minimal example of loading a ChartIQ time series chart. It sets up the viewport, links a stylesheet, creates a chart container, and uses an inline JavaScript module to import data and the ChartIQ library, then instantiates and loads a chart with static 5-minute periodicity data.
```HTML
```
--------------------------------
### Initialize ChartIQ UI (WebComponents)
Source: https://documentation.chartiq.com/CIQ.UI
Starts the ChartIQ user interface. This method is designed as a helper for the included WebComponents. An optional callback can be provided, which returns when web components are scheduled for initialization, allowing for asynchronous setup.
```APIDOC
begin([cb])
cb: function (optional) - Optional callback returns when web components are scheduled for initialization.
```
--------------------------------
### Integrating Programmatic CSS with TimeSpanEventPanel Instantiation (JavaScript)
Source: https://documentation.chartiq.com/tutorial-Time Span Events Hello World Example for Angular 8.1
This example demonstrates the correct placement of the programmatic CSS injection code relative to the instantiation of 'CIQ.TimeSpanEventPanel'. Placing it after the panel's instantiation ensures the custom styles are applied later in the CSS cascade, effectively overriding previous definitions.
```JavaScript
new CIQ["TimeSpanEventPanel"]({
stx: stx,
showTooltip: true,
infoPanel: {
spanEvent: "main",
durationEvent: "main",
singleEvent: "main"
}
});
const el = document.createElement("style");
el.setAttribute("type", "text/css");
el.innerText = ".stx-marker.trade .stx-visual {"
+ "width: 8px;"
+ "height: 8px;"
+ "}";
document.head.appendChild(el);
```