### Install Wijmo React All Packages

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-React

Installs all Wijmo React component packages using npm. This is the recommended approach for comprehensive access to Wijmo's React wrappers.

```bash
npm install @mescius/wijmo.react.all
```

--------------------------------

### Install Wijmo React Components via npm

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/nextjs

Installs all Wijmo React components using the '@mescius/wijmo.react.all' npm package. This provides a convenient way to include the entire suite of Wijmo's React-compatible controls.

```bash
npm install @mescius/wijmo.react.all 
```

--------------------------------

### Install Wijmo Angular Components

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Angular-Components

Installs all Wijmo Angular 2 components from npm. This package provides Angular components corresponding to the Wijmo core library modules.

```bash
npm install @mescius/wijmo.angular2.all
```

--------------------------------

### Vue Component Setup with Wijmo Grid

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Vue-Components

Sets up a Vue component, importing necessary modules like Vue and a Wijmo Vue module, and initializing data for the grid.

```javascript
import Vue from 'vue';
import '@mescius/wijmo.vue2.grid';
import { getData } from './data';

let App = Vue.extend({
    name: 'app',
    data: function () {
        return {
            data: getData()
        }
    }
})
```

--------------------------------

### Create and Bind Wijmo PivotPanel Control

Source: https://developer.mescius.com/wijmo/docs/Topics/OLAP/Pivot-Panel

Demonstrates how to create a host element, instantiate a PivotEngine, set its itemsSource, and then instantiate a PivotPanel, binding it to the PivotEngine. This is the fundamental setup for using the PivotPanel.

```html
<div id="panel"></div>
```

```javascript
let engine = new wjOlap.PivotEngine();
engine.itemsSource = rawData;

let panel = new wjOlap.PivotPanel('#panel');
panel.itemsSource = engine;
```

--------------------------------

### Install Wijmo All Packages (Release Candidate)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

Installs the latest release candidate build of all Wijmo packages. Use this for testing new features before they are officially released. Not recommended for production.

```bash
npm install @mescius/wijmo.all@rc
```

--------------------------------

### String Formatting with Wijmo

Source: https://developer.mescius.com/wijmo/api/Index.html

Demonstrates how to use the Wijmo 'format' function for string interpolation. It shows examples with different counts to illustrate pluralization and provides a custom format function for HTML escaping.

```typescript
import { format, isString, escapeHtml } from '@mescius/wijmo';
let data = { name: 'Joe', amount: 123456 },
    msg = format('Hello {name}, you won {amount:n2}!', data,
    (data, name, fmt, val) => {
        if (isString(data[name])) {
            val = escapeHtml(data[name]);
        }
        return val;
    }
);

let fmtObj = { count: 0 };
let fmt = JSON.stringify(fmtObj);
console.log(format(fmt, { count: 0 }));  // No items selected.
console.log(format(fmt, { count: 1 }));  // One item is selected.
console.log(format(fmt, { count: 2 }));  // A pair is selected.
console.log(format(fmt, { count: 12 })); // 12 items are selected.
```

--------------------------------

### Install Wijmo All Packages (Latest Release)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

Installs the latest stable release of all Wijmo packages from npm. This is the recommended command for production applications.

```bash
npm install @mescius/wijmo.all
```

--------------------------------

### Install Wijmo All Packages (Nightly Build)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

Installs the latest nightly build of all Wijmo packages. This is for early testing and development and should not be used in production environments.

```bash
npm install @mescius/wijmo.all@nightly
```

--------------------------------

### Initialize CollectionViewNavigator for Page Navigation (JavaScript)

Source: https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/CollectionViewNavigator

Illustrates the setup for page-based navigation using CollectionViewNavigator. It involves creating a CollectionView with a specified pageSize, linking it to the navigator, and setting 'byPage' to true. The 'headerFormat' is configured to show page numbers. It also includes FlexGrid integration.

```javascript
let view = new CollectionView(getData(), {
    pageSize: 5
});

new CollectionViewNavigator('#cv-page', {
    cv: view,
    byPage: true,
    headerFormat: 'Page {current:n0} of {count:n0}'
});

new FlexGrid('#cv-grid', {
    itemsSource: view,
    selectionMode: 'RowRange',
    showMarquee: true
})
```

--------------------------------

### ImmutabilityProvider Setup and Data Handling in TypeScript

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid_Immutable.Immutabilityprovider.html

This TypeScript code demonstrates how to initialize an ImmutabilityProvider with a FlexGrid and handle data changes. It imports necessary classes and functions from Wijmo and a Redux store, then sets up event handlers for adding, removing, and changing items.

```typescript
import { ImmutabilityProvider, DataChangeEventArgs, DataChangeAction } from '@mescius/wijmo.grid.immutable';
import { FlexGrid } from '@mescius/wijmo.grid';
import { store } from './store';
import { addItemAction, removeItemAction, changeItemAction } from './actions';

const grid = new FlexGrid('#grid', {
    allowAddNew: true,
    allowDelete: true
});
const provider = new ImmutabilityProvider(grid, {
    itemsSource: store.getState().items,
    dataChanged: (s: ImmutabilityProvider, e: DataChangeEventArgs) => {
       switch (e.action) {
            case DataChangeAction.Add:
                store.dispatch(addItemAction(e.newItem));
              break;
            case DataChangeAction.Remove:
                store.dispatch(removeItemAction(e.newItem, e.itemIndex));
                break;

```

--------------------------------

### Install Specific Wijmo Package (Grid)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

Installs a single Wijmo package, such as 'wijmo.grid'. npm will automatically install any dependent packages, like '@mescius/wijmo.input' and '@mescius/wijmo'.

```bash
npm install @mescius/wijmo.grid
```

--------------------------------

### Install Wijmo Pure JavaScript Packages

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

Installs only the core pure JavaScript Wijmo packages, excluding framework-specific interop. This is suitable for applications that do not use a specific JavaScript framework.

```bash
npm install @mescius/wijmo.purejs.all
```

--------------------------------

### Create a Basic PDF Document with Wijmo

Source: https://developer.mescius.com/wijmo/docs/Topics/PDF/Overview

This code snippet demonstrates the minimal setup required to generate a single-page blank PDF document using the Wijmo PDF module. It initializes a PdfDocument instance and defines an 'ended' event handler to save the generated document as a file.

```javascript
import * as wjPdf from '@mescius/wijmo.pdf';

var doc = new wjPdf.PdfDocument({
    ended: function (sender, args) {
        wijmo.pdf.saveBlob(args.blob, "Document.pdf");
    }
});
```

--------------------------------

### Utility Functions

Source: https://developer.mescius.com/wijmo/api/Index.html

This section details utility functions provided by the Wijmo library for common tasks.

```APIDOC
## isCollectionViewDefined

### Description
Checks whether an ICollectionView is defined and not empty.

### Method
(Implicitly a function call, not a direct HTTP method)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Assuming 'collectionView' is an ICollectionView object
if (wijmo.isCollectionViewDefined(collectionView)) {
  // Do something with the collection view
}
```

### Response
#### Success Response (boolean)
- **Returns**: `true` if the ICollectionView is defined and not empty, `false` otherwise.

#### Response Example
```json
true
```

## hidePopup

### Description
Hides a popup element previously displayed with the showPopup method. It can optionally remove the popup from the DOM or use a fade-out animation.

### Method
(Implicitly a function call, not a direct HTTP method)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Assuming 'myPopup' is an HTMLElement representing the popup
wijmo.hidePopup(myPopup, true, true); // Hide, remove from DOM, and fade out
```

### Response
#### Success Response (any)
- **Returns**: An interval id that can be used to suspend the fade-out animation.

#### Response Example
```json
12345 // Example interval ID
```

## httpRequest

### Description
Performs HTTP requests. Use the `success` method to obtain the result of the request.

### Method
(Implicitly a function call, not a direct HTTP method)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **url** (string) - Required - The URL to send the request to.
- **options** (IHttpRequestOptions) - Optional - An object containing request options like method, headers, data, and callbacks (success, error, etc.).

### Request Example
```javascript
import { httpRequest } from '@mescius/wijmo';

httpRequest('https://services.odata.org/Northwind/Northwind.svc/Customers?$format=json', {
  success: function(xhr) {
    console.log(JSON.parse(xhr.responseText));
  },
  error: function(xhr) {
    console.error('Error performing HTTP request:', xhr);
  }
});
```

### Response
#### Success Response (XMLHttpRequest)
- **Returns**: A `XMLHttpRequest` object representing the request.

#### Response Example
```json
// The actual response content is handled by the success callback
// Example of xhr object properties:
{
  "status": 200,
  "responseText": "{\"d\": {\"results\": [...]}}"
}
```
```

--------------------------------

### Draw Content in a Wijmo PDF Document

Source: https://developer.mescius.com/wijmo/docs/Topics/PDF/Overview

This snippet shows how to add content to a PDF document created with the Wijmo PDF module. It includes examples of drawing text at specific positions and embedding an image. This follows the initialization of a PdfDocument instance.

```javascript
doc.drawText("Lorem.");
doc.drawText("Ipsum.", 0, 30);

doc.drawImage("resources/wijmo1.png");
```

--------------------------------

### Handle Initialized Event for Wijmo Components in Next.js

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/nextjs

This example shows how to use the 'initialized' event, common to all Wijmo components, to perform additional setup after the component has been rendered. The `onInitControl` handler, which accepts `sender` and `args`, is triggered when the `WjInpt.InputNumber` component is ready.

```javascript
export default function Home() {
  const [amount,setAmount] = useState(100);
  const onInitControl = (sender,args)=>{
  console.log("updated amount : "+sender.value);
  }
  return (
   <div>
     <WjInpt.InputNumber value={amount}
                        initialized={onInitControl}>
     </WjInpt.InputNumber>
   </div>
  );
}
```

--------------------------------

### uidGenerator

Source: https://developer.mescius.com/wijmo/api/Index.html

Generates a unique identifier string.

```APIDOC
## GET /api/utils/uid

### Description
Generates a unique ID string. This function is useful for creating unique keys or identifiers within your application.

### Method
GET

### Endpoint
/api/utils/uid

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **id** (string) - The generated unique identifier.

#### Response Example
```json
{
  "id": "a1b2c3d4-e5f6-7890-1234-567890abcdef"
}
```
```

--------------------------------

### Install Wijmo and WebComponents Polyfills

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Web-Components

Installs the Wijmo WebComponents nightly build and necessary polyfills using npm. Ensure these are saved as dependencies.

```auto
> npm install @mescius/wijmo.webcomponents.all@nightly --save
> npm install @webcomponents/webcomponentsjs --save
```

--------------------------------

### Populate FlexGrid with Sample Data (JavaScript)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-PureJS

This code snippet demonstrates how to create sample data for a grid, including country names, random sales, and expenses. It then initializes a FlexGrid control with specific columns and binds the generated data to it. Requires Wijmo library.

```javascript
//create some random data 
   var countries = 'Germany,UK,Japan,Italy,Greece'.split(','); 
   var data = []; 
   for (var i = 0; i < countries.length; i++) 
    { 
       data.push({          
           id: i, 
           country: countries[i], 
           sales: Math.random() * 10000, 
           expenses: Math.random() * 5000 
       }); 
   } 

    // bind a grid to the raw data 
       var theGrid = new FlexGrid('#theGrid', { 
       autoGenerateColumns: false, 
       columns: [ 
           { binding: 'country', header: 'Country', width: '2*' }, 
           { binding: 'sales', header: 'Sales', width: '*', format: 'n2' }, 
           { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' } 
       ], 
       itemsSource: data 
    }); 
```

--------------------------------

### AngularJS Directive Usage for WjPivotPanel

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Angular_Olap.Wjpivotpanel.html

Example of using the wj-pivot-panel directive as a data source for wj-pivot-grid in an AngularJS application. This demonstrates how to bind data and configure grid behavior.

```html
<wj-pivot-panel
    control="thePanel"
    items-source="rawData">&lt;/wj-pivot-panel&gt;
<wj-pivot-grid
    items-source="thePanel"
    show-detail-on-double-click="false"
    custom-context-menu="true">&lt;/wj-pivot-grid&gt;
```

--------------------------------

### AngularJS WjInputDateTime Directive Example

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Angular_Input.Wjinputdatetime.html

Demonstrates how to use the 'wj-input-date-time' directive in an AngularJS application to display an InputDateTime control. It shows basic configuration with 'value' and 'format' attributes.

```html
<p>Here is an InputDateTime control:</p>
<wj-input-date-time
  value="theDate"
  format="M/d/yyyy">
</wj-input-date-time>
```

--------------------------------

### wjContextMenu Binding Example (KnockoutJS)

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Input.Wjcontextmenu.html

This snippet demonstrates how to use the wjContextMenu binding in KnockoutJS to attach a context menu to a paragraph element. It specifies the ID of the menu to be displayed on a context menu request. The example also includes the definition of the context menu using wjMenu and wjMenuItem bindings.

```html
<p data-bind="wjContextMenu: { id: '#idMenu'}" >
 This paragraph has a context menu.
</p>

<div id="contextmenu" data-bind="wjMenu: { header: 'File', itemClicked: menuItemClicked}">
    <span data-bind="wjMenuItem: {}">New</span>
    <span data-bind="wjMenuItem: {}">open an existing file or folder</span>
    <span data-bind="wjMenuItem: {}">save the current file</span>
    <span data-bind="wjMenuSeparator: {}"></span>
    <span data-bind="wjMenuItem: {}">exit the application</span>
</div>
```

--------------------------------

### Use Wijmo Web Components in HTML

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Web-Components

Demonstrates the basic structure of including Wijmo WebComponents in an HTML file after setting up polyfills and enabling WebComponents mode. Includes a sample wjc-input-number component.

```html
<head>
    <script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
    <script>
        window['wj-control-is-element'] = true;
    </script>
    ...
</head>
<body>
    <wjc-input-number value="5" step="3"></wjc-input-number>
</body>
```

--------------------------------

### wjListBox KnockoutJS Binding Example

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Input.Wjlistbox.html

Demonstrates how to use the wjListBox binding to add a ListBox control to a KnockoutJS application. It shows how to bind the itemsSource and selectedItem properties for data population and selection management.

```html
<div data-bind="wjListBox: {
  itemsSource: countries,
  selectedItem: theCountry
}">
</div>
```

--------------------------------

### PivotEngine Initialization with DataEngine Service

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Olap.Pivotengine.html

Demonstrates how to initialize the PivotEngine and connect to a data service using the ComponentOne data engine. This allows for server-side analysis of large datasets.

```APIDOC
## POST /api/dataengine/cube

### Description
Initializes the PivotEngine and connects to a data service using the ComponentOne data engine. This enables server-side analysis of large datasets without downloading raw data to the client.

### Method
POST

### Endpoint
/api/dataengine/cube

### Parameters
#### Query Parameters
* **itemsSource** (string) - Required - The URL of the data service.

### Request Example
```typescript
import { PivotEngine } from '@mescius/wijmo.olap';

let ng = new wijmo.olap.PivotEngine({
    itemsSource: 'http://demos.componentone.com/ASPNET/c1webapi/4.5.20193.222/api/dataengine/cube'
});
```

### Response
#### Success Response (200)
* **PivotEngine** (object) - The initialized PivotEngine instance.

#### Response Example
```json
{
  "message": "PivotEngine initialized successfully"
}
```

### Error Handling
* **400 Bad Request**: If the itemsSource URL is invalid.
* **500 Internal Server Error**: If there is an issue with the data engine service.
```

--------------------------------

### CSS Styling for Wijmo TreeView Navigation Message

Source: https://developer.mescius.com/wijmo/docs/Topics/Nav/TreeView/Nodes/Node-Navigation

Provides CSS styles for the message display area used in the Wijmo TreeView navigation example. This CSS targets the '.msg' class for visual feedback.

```css
.msg
{
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    color: blue;
    border: 2px solid blue;
    background: lightblue;
}
```

--------------------------------

### Wijmo Angular Binding Syntax

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Angular-Components

Provides examples of one-way, two-way, and event binding using Wijmo components in Angular templates. It highlights the use of square brackets, parentheses, and camelCase attribute names.

```html
<wj-input-number
[(value)]="amount" // two-way binding to a component property
[format]="'n0'" // one-way binding to string
[isReadOnly]="true" // one-way binding to boolean (valueChanged)="valueChanged($event)"> // event binding
</wj-input-number>
```

--------------------------------

### wjFlexChartRsi Binding Example in KnockoutJS

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Chart_Finance_Analytics.Wjflexchartrsi.html

This example demonstrates how to use the wjFlexChartRsi binding within a KnockoutJS application to display a financial chart with a Relative Strength Index (RSI) indicator. It requires the Wijmo financial chart components and specifies the data source, X-axis binding, chart type, and RSI properties like 'binding' and 'period'.

```html
<p>Here is a RSI:</p>
   <div data-bind="wjFinancialChart: { itemsSource: fData, bindingX: 'date', chartType:'Candlestick' }" >
        <div data-bind="wjFlexChartRsi: { binding: 'high,low,open,close',period:20 }" ></div>
  </div>
```

--------------------------------

### Add Wijmo Grid Package (JavaScript)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-PureJS

This snippet demonstrates how to import the wijmo.grid module and instantiate a FlexGrid control using ES2015 import statements in app.js. It requires the '@mescius/wijmo.grid' package.

```javascript
import * as wjGrid from '@mescius/wijmo.grid';
var theGrid = new wjGrid.FlexGrid('#theGrid');

```

--------------------------------

### wjLinearGauge KnockoutJS Binding Example

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Gauge.Wjlineargauge.html

This example demonstrates how to use the wjLinearGauge KnockoutJS binding to create a LinearGauge control. It includes binding for the main gauge properties like value, min, max, and format, as well as nested wjRange bindings for configuring the pointer and different range sections of the gauge. The 'value' property supports two-way binding.

```html
<p>Here is a LinearGauge control:</p>
<div data-bind="wjLinearGauge: {
        value: props.value,
        min: props.min,
        max: props.max,
        format: props.format,
        showRanges: props.showRanges }"
        class="linear-gauge">
    <div data-bind="wjRange: {
            wjProperty: 'pointer',
            thickness: props.ranges.pointerThickness }">
    </div>
    <div data-bind="wjRange: {
            min: props.ranges.lower.min,
            max: props.ranges.lower.max,
            color: props.ranges.lower.color }">
    </div>
    <div data-bind="wjRange: {
            min: props.ranges.middle.min,
            max: props.ranges.middle.max,
            color: props.ranges.middle.color }">
    </div>
    <div data-bind="wjRange: {
            min: props.ranges.upper.min,
            max: props.ranges.upper.max,
            color: props.ranges.upper.color }">
    </div>
</div>
```

--------------------------------

### Declarative Wijmo Control Integration with HTML

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Web-Components

Demonstrates how to declaratively add Wijmo controls like InputNumber and FlexGrid to an HTML page using their respective WebComponent tags. This example showcases setting initial properties and defining columns for FlexGrid.

```html
<label >InputNumber</label>
<wjc-input-number value="5" step="3"></wjc-input-number>
<label>FlexGrid with Filter and specific columns</label>
<wjc-flex-grid id="gridIntro">
    <wjc-flex-grid-filter></wjc-flex-grid-filter>
    <wjc-flex-grid-column binding="country" header="Country" width="*">
    </wjc-flex-grid-column>
    <wjc-flex-grid-column binding="date" header="Date">
    </wjc-flex-grid-column>
    <wjc-flex-grid-column binding="downloads" header="Downloads">
    </wjc-flex-grid-column>
</wjc-flex-grid>
```

--------------------------------

### Export PivotChart to Image File

Source: https://developer.mescius.com/wijmo/docs/Topics/OLAP/Pivot-Chart

Provides an example of exporting the PivotChart to an image file using the saveImageToFile method. This code snippet attaches an event listener to a button that triggers the export when clicked, saving the chart as a PNG file.

```javascript
// export the chart to an image
document.getElementById('export').addEventListener('click', function(e) {
	if (e.target instanceof HTMLButtonElement) {
    	var ext = e.target.textContent.trim();
    	pivotChart.saveImageToFile('FlexChart.png');  
    }
});
```

--------------------------------

### initialize Method

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Chart_Finance_Analytics.Atr.html

Initializes the series with a given set of options.

```APIDOC
## POST /series/initialize

### Description
Initializes the series with a given set of options. This method is typically used internally or when creating series programmatically.

### Method
POST

### Endpoint
`/series/initialize`

### Parameters
#### Request Body
- **options** (any) - Required - An object containing the initialization options for the series.

### Request Example
```json
{
  "options": {
    "name": "Sales Data",
    "itemsSource": [{"country": "US", "sales": 100}, {"country": "CA", "sales": 80}]
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the initialization.

#### Response Example
```json
{
  "status": "initialized"
}
```
```

--------------------------------

### AngularJS ComboBox Directive Example

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Angular_Input.Wjcombobox.html

This code snippet demonstrates how to implement a Wijmo ComboBox control in an AngularJS application using the 'wj-combo-box' directive. It shows basic configuration for displaying a list of countries and enforcing selection from the list.

```html
<p>Here is a ComboBox control:</p>
<wj-combo-box
  text="theCountry"
  items-source="countries"
  is-editable="false"
  placeholder="country">
&lt;/wj-combo-box&gt;
```

--------------------------------

### wjFlexChartFibonacci Binding Example (HTML)

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Chart_Finance_Analytics.Wjflexchartfibonacci.html

This snippet demonstrates how to use the wjFlexChartFibonacci KnockoutJS binding to add a Fibonacci object to a financial chart. It requires the wjFinancialChart and wjFinancialChartSeries bindings to be set up first. The example shows how to bind data, specify chart type, and configure Fibonacci-specific properties like binding, symbol size, label position, and trend direction.

```html
<p>Here is a Fibonacci:</p>
   <div data-bind="wjFinancialChart: { itemsSource: fData, bindingX: 'date', chartType:'Candlestick' }">
        <div data-bind="wjFinancialChartSeries: { bindingX: 'date', binding: 'high,low,open,close' }"></div>
        <div data-bind="wjFlexChartFibonacci: { binding:'close', symbolSize:1, labelPosition: 'Left',  uptrend: true}"></div>
  </div>
```

--------------------------------

### FibonacciTimeZones Constructor

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Chart_Finance_Analytics.Fibonaccitimezones.html

Initializes a new instance of the FibonacciTimeZones class with optional configuration options.

```APIDOC
## new FibonacciTimeZones(options?)

### Description
Initializes a new instance of the FibonacciTimeZones class.

### Method
CONSTRUCTOR

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **options** (any) - Optional - A JavaScript object containing initialization data.

### Request Example
```json
{
  "options": {
    "binding": "close",
    "name": "Fibonacci Time Zones"
  }
}
```

### Response
#### Success Response (200)
* **FibonacciTimeZones** - The newly created FibonacciTimeZones instance.

#### Response Example
```json
{
  "instance": "[FibonacciTimeZones instance]"
}
```
```

--------------------------------

### Initialize Wijmo Popup with Triggers (TypeScript)

Source: https://developer.mescius.com/wijmo/api/enums/Wijmo_Input.Popuptrigger.html

Demonstrates how to initialize a Wijmo Popup control in TypeScript, configuring 'showTrigger' and 'hideTrigger' properties using the PopupTrigger enumeration. This example shows combining multiple trigger actions using bitwise OR.

```typescript
let popup = new Popup('#popup', {

    // set popup owner to 'show' button
    owner: '#btn-show',

    // show the popup when clicking the button
    showTrigger: PopupTrigger.ClickOwner,

    // hide the popup when clicking the button or when the mouse leaves the popup
    hideTrigger: PopupTrigger.ClickOwner | PopupTrigger.LeavePopup,
});
```

--------------------------------

### toHeaderCase - Convert CamelCase Strings to Header Format

Source: https://developer.mescius.com/wijmo/api/Index.html

Converts camelCase strings into header-case format by capitalizing the first letter and inserting spaces before uppercase characters that follow lowercase characters. For example, 'somePropertyName' becomes 'Some Property Name'.

```TypeScript
toHeaderCase(text: string): string
```

--------------------------------

### Configure PivotEngine with fields and data source

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Olap.Pivotengine.html

Creates a PivotEngine instance, assigns a data source, and defines a pivot view by populating rowFields, columnFields, and valueFields collections. Uses beginUpdate() and endUpdate() to batch updates for improved performance. The example demonstrates how to organize data by Country in rows, Category and Product in columns, and aggregate Sales values.

```typescript
import { PivotEngine } from '@mescius/wijmo.olap';

// create pivot engine
let pe = new PivotEngine();

// set data source (populates fields list)
pe.itemsSource = this.getRawData();

// prevent updates while building Olap view
pe.beginUpdate();

// show countries in rows
pe.rowFields.push('Country');

// show categories and products in columns
pe.columnFields.push('Category');
pe.columnFields.push('Product');

// show total sales in cells
pe.valueFields.push('Sales');

// done defining the view
pe.endUpdate();
```

--------------------------------

### Install Wijmo Vue3 components via npm

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-Vue

Installs all Wijmo Vue3 components using the group package '@mescius/wijmo.vue2.all'. Individual packages can also be installed separately, with package names following the pattern 'wijmo.vue2.[library]' corresponding to core 'wijmo.[library]' packages.

```bash
npm install @mescius/wijmo.vue2.all
```

--------------------------------

### wjTooltip Binding Example - KnockoutJS

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Core.Wjtooltip.html

Demonstrates how to use the wjTooltip binding in KnockoutJS to attach a tooltip to a paragraph element. The tooltip content is sourced from another HTML element identified by an ID. This binding supports HTML content and smart positioning.

```html
<p data-bind="wjTooltip: '#fineprint'" >
    Regular paragraph content...
</p>
...
<div id="fineprint" style="display:none" >
  <h3>Important Note</h3>
  <p>
    Data for the current quarter is estimated by pro-rating etc...
  </p>
</div>
```

--------------------------------

### Selection API

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Chart.Flexchartcore.html

Gets or sets the selected chart series.

```APIDOC
## GET/SET selection

### Description
Gets or sets the selected chart series.

### Method
GET/SET

### Endpoint
chart.selection

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Get the selected series
let selectedSeries = chart.selection;

// Set the selected series (assuming 'series' is a SeriesBase object)
// chart.selection = chart.series.items[0]; 
```

### Response
#### Success Response (200)
- **selection** (SeriesBase) - The selected chart series.

#### Response Example
```json
{
  "selection": "<instance of SeriesBase>"
}
```
```

--------------------------------

### Configure PivotEngine with ComponentOne DataEngine Service (TypeScript)

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Olap.Pivotengine.html

Demonstrates how to initialize a PivotEngine instance using a string URL for ComponentOne data engine services. This method allows for server-side analysis of large datasets without client-side data transfer. Basic Authentication can be added by including user and password members in the itemsSource object.

```typescript
import {
    PivotEngine
} from '@mescius/wijmo.olap';

let ng = new wijmo.olap.PivotEngine({
    itemsSource: 'http://demos.componentone.com/ASPNET/c1webapi/4.5.20193.222/api/dataengine/cube'
});
```

--------------------------------

### Create Choropleth Map with Color Scale

Source: https://developer.mescius.com/wijmo/docs/Topics/Map/Overview

This example shows how to create a Choropleth map using Wijmo's FlexMap. It utilizes a GeoMapLayer and a ColorScale to color geographical features (US states in this case) based on data values, such as population estimates.

```javascript
let map = new FlexMap('#map2', {
    header: 'Average Temperature By State',
    layers: [
        new GeoMapLayer({
            url: 'data/US.json',
            colorScale: new ColorScale({
                binding: 'properties.pop_est'
            })
        })
    ]
});
```

--------------------------------

### Create Sample Data for FlexGrid Master-Detail

Source: https://developer.mescius.com/wijmo/docs/Topics/Grid/MasterDetail/Grid-And-Detail-View

Generates sample hierarchical data with countries, products, and sales information. Creates 50 data items with random sales and expense values for demonstration purposes.

```javascript
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var products = 'Phones,Cars,Stereos,Watches,Computers'.split(',');
var data = [];
for (var i = 0; i < 50; i++) {
  data.push({
    id: i,
    country: countries[i % countries.length],
    product: products[i % products.length],
    date: wijmo.DateTime.addDays(new Date(), i),
    sales: Math.random() * 10000,
    expenses: Math.random() * 5000
  });
}
```

--------------------------------

### wjPopup KnockoutJS Binding Example

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Input.Wjpopup.html

This snippet demonstrates how to use the wjPopup binding in KnockoutJS to create and configure a Popup control. It shows how to specify the control, owner element, and triggers for showing and hiding the popup. Dependencies include KnockoutJS and Wijmo libraries.

```html
<p>Here is a Popup control triggered by a button:</p>
<button id="btn2" type="button">
    Click to show Popup
</button>
<div class="popover" data-bind="wjPopup: {
     control: popup,
     owner: '#btn2',
     showTrigger: 'Click',
     hideTrigger: 'Click'}"
>
    <h3>
         Salutation
    </h3>
     <div class="popover-content">
             Hello {​{firstName}} {​{lastName}}
     </div>
</div>
```

--------------------------------

### Wijmo Vue Component Markup Syntax

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Vue-Components

Illustrates the standard Vue markup for Wijmo components, using kebab-case for element and attribute names, and v-bind for property/event binding.

```html
<wj-input-number :value="amount"></wj-input-number>
```

--------------------------------

### AnnotationBase Constructor

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Chart_Annotation.Annotationbase.html

Initializes a new instance of the AnnotationBase class. You can provide an options object for initial configuration.

```APIDOC
## new AnnotationBase()

### Description
Initializes a new instance of the AnnotationBase class.

### Method
CONSTRUCTOR

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "options": {}
}
```

### Response
#### Success Response (200)
An instance of AnnotationBase is returned.

#### Response Example
```json
{
  "instance": "AnnotationBase"
}
```
```

--------------------------------

### Initialize OAuth2 and Manage User Authentication with TypeScript

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Cloud.Oauth2.html

Creates an OAuth2 instance with API credentials and implements sign-in/sign-out functionality through event handlers. Demonstrates how to configure OAuth2 with API key, client ID, and scopes, then attach click handlers to manage user authentication state and update UI elements accordingly.

```typescript
import { OAuth2 } from '@mescius/wijmo.cloud';

// create OAuth2 object
const API_KEY = 'XXXX';
const CLIENT_ID = 'YYYY.apps.googleusercontent.com';
const SCOPES = [ 'https://www.googleapis.com/auth/userinfo.email' ];
const auth = new OAuth2(API_KEY, CLIENT_ID, SCOPES);

// click a button to log in/out
let oAuthBtn = document.getElementById('auth_btn');
oAuthBtn.addEventListener('click', () => {
    if (auth.user) {
        auth.signOut();
    } else {
        auth.signIn();
    }
});

// update button caption and accessToken when user changes
auth.userChanged.addHandler(s => {
    let user = s.user;
    oAuthBtn.textContent = user ? 'Sign Out' : 'Sign In';
    gsNWind.accessToken = user ? s.accessToken : null;
    fsNWind.accessToken = user ? s.accessToken : null;
});
```

--------------------------------

### Import and Use Wijmo FlexGrid in React

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-React

Demonstrates how to import Wijmo React modules and use the FlexGrid component within a React functional component. It sets up state for the grid's data source.

```javascript
import * as React from 'react';
import * as wjcGrid from '@mescius/wijmo.react.grid';

const App: React.FC = () => {
  const [data, setData] = React.useState(getData());

  return <wjcGrid.FlexGrid itemsSource={data} />
}
```

--------------------------------

### Define Wijmo InputNumber Component in Next.js

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/nextjs

This example demonstrates how to define and use a Wijmo InputNumber component within a Next.js functional component. It shows property binding for `value`, `format`, and `isReadOnly`, along with event binding for `valueChanged` using a consistent naming convention.

```javascript
export default function Home() {
  const [amount,setAmount] = useState(100);
  const onValueChanged = (sender,args)=>{
  console.log("updated amount : "+sender.value);
  }
  return (
   <div>
     <WjInpt.InputNumber value={amount}
                        format="n2"
                        isReadOnly={false}
                        valueChanged={onValueChanged}>
     </WjInpt.InputNumber>
   </div>
  );
}
```

--------------------------------

### Create a Polar Chart with FlexRadar

Source: https://developer.mescius.com/wijmo/docs/Topics/Chart/Advanced/SpecialCharts/Radar-Polar-Charts

This example shows how to configure the FlexRadar control to display a polar chart. By binding the bindingX property to a numeric field and setting the chartType, a polar chart is generated. This requires the FlexRadar module and appropriate data.

```javascript
import * as chart from '@mescius/wijmo.chart';

var myPolarChart = new chart.FlexRadar('#myPolarChart', {
    itemsSource: getData(),
    bindingX: 'longitude',
    chartType: 'Area',
    startAngle: 0,
    totalAngle: 360,
    series: [
        { name: 'Latitude 1', binding: 'latitude1' },
        { name: 'Latitude 2', binding: 'latitude2' }
    ]
});
```

--------------------------------

### Initialize CollectionViewNavigator for Item Navigation (JavaScript)

Source: https://developer.mescius.com/wijmo/docs/Topics/Wijmo/Collections/CollectionViewNavigator

Demonstrates how to initialize the CollectionViewNavigator for item-by-item navigation. It requires a CollectionView instance and sets the 'byPage' property to false. The 'headerFormat' property customizes the display text. This snippet also shows integration with FlexGrid.

```javascript
let view = new CollectionView(getData(), {});

new CollectionViewNavigator('#cv-nav', {
    cv: view,
    byPage: false,
    headerFormat: 'Item {currentItem:n0} of {itemCount:n0}'
});

new FlexGrid('#cv-grid', {
    itemsSource: view,
    selectionMode: 'RowRange',
    showMarquee: true
})
```

--------------------------------

### wjSlicer KnockoutJS Binding Example

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Knockout_Olap.Wjslicer.html

This code snippet demonstrates how to use the wjSlicer binding in a KnockoutJS application to add a Slicer control. It shows basic configuration with 'field' and 'showHeader' properties. The wjSlicer binding supports all read-write properties and events of the Slicer class.

```html
<div data-bind="wjSlicer:
{
field: theField,
showHeader: true
}">
</div>
```

--------------------------------

### HTML Structure for Wijmo ColorPicker

Source: https://developer.mescius.com/wijmo/docs/Topics/Input/ColorPicker/ColorPicker

Defines the basic HTML elements required to host the Wijmo ColorPicker component and display output. Includes a heading, a div for output messages, and a div for the ColorPicker itself.

```html
<h1>ColorPicker</h1>
<div id="output">
  Select a background for me!
</div>
<div id="theColorPicker"></div> 
```

--------------------------------

### Import Wijmo Grid Module (ES2015)

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM

Demonstrates how to import the Wijmo grid module using ES2015 import statements in TypeScript or Babel projects. It then creates an instance of the FlexGrid control.

```javascript
import * as wjcGrid from '@mescius/wijmo.grid';
let grid = new wjcGrid.FlexGrid('#hostElement');
```

--------------------------------

### Format String with Data and Pluralization (TypeScript)

Source: https://developer.mescius.com/wijmo/api/Index.html

The format function replaces placeholders in a format string with values from a data object. It supports custom formatting and pluralization based on a 'count' property in the data object. The example demonstrates basic string interpolation and advanced pluralization rules.

```typescript
import { format } from '@mescius/wijmo';
let data = { name: 'Joe', amount: 123456 },
    msg = format('Hello {name}, you won {amount:n2}!', data);

interface fmtObj {
    count: string;
    when: {
        [key: number | string]: string;
    };
}

let fmtObj: fmtObj = {
    count: 'count',
    when: {
        0: 'No items selected.',
        1: 'One item is selected.',
        2: 'A pair is selected.',
        'other': '{count:n0} items are selected.'
    }
};
```

--------------------------------

### AngularJS Module Declaration with Wijmo

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-AngularJS

Shows how to declare an AngularJS module and specify Wijmo as a dependency. This is a required step before using any Wijmo directives within your AngularJS application.

```javascript
var app = angular.module('app', ['wj']);
```

--------------------------------

### Render Engine API

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Chart.Flexchartcore.html

Allows setting or getting the chart's rendering engine.

```APIDOC
## GET/SET renderEngine

### Description
Gets or sets the chart render engine.

### Method
GET/SET

### Endpoint
chart.renderEngine

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Get the render engine
let engine = chart.renderEngine;

// Set a new render engine (assuming IRenderEngine interface is available)
// chart.renderEngine = new CustomRenderEngine(); 
```

### Response
#### Success Response (200)
- **renderEngine** (IRenderEngine) - The chart render engine.

#### Response Example
```json
{
  "renderEngine": "<instance of IRenderEngine>"
}
```
```

--------------------------------

### Include Wijmo Using CDN in HTML Project

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Referencing-Wijmo

This snippet shows how to include Wijmo styles and core JavaScript files using CDN links directly in your HTML. It specifies the order of script and link tags, starting with Wijmo core, followed by control modules, extensions, and interop modules. The example uses '5.latest' which is not recommended for production. It also includes an optional script for setting the Wijmo license key.

```html
<!-- Wijmo styles and core (required) --> 
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/> 
<!-- optionally use a custom theme instead of wijmo.min.css 
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/> --> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script> 
<!-- Wijmo controls (optional, include the controls you need) --> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.min.js"></script> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script> 
<!-- Wijmo custom culture (optional, include the culture you want) --> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script> 
<!-- apply your Wijmo licenseKey (optional) --> 
<script> wijmo.setLicenseKey(**'your license key goes here...'**); </script>
```

--------------------------------

### Define Angular Component with FlexGrid and Sample Data

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/QuickStart/QuickStart-Angular

Create a standalone Angular component that initializes sample data and references the FlexGrid component using ViewChild decorator. The component defines country sales and expenses data to be bound to the grid.

```typescript
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjGridModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  selectedItem: any;
  flexInitialized(_t5: WjFlexGrid) {
    throw new Error('Method not implemented.');
  }
  data: any[];
  @ViewChild('flex') flex!: WjFlexGrid;
  constructor() {
    this.data = [
      { id: 0, country: "US", sales: 1318.37, expenses: 4212.41 },
      { id: 1, country: "Germany", sales: 5847.95, expenses: 89.79 },
      { id: 2, country: "UK", sales: 502.55, expenses: 2878.50 },
      { id: 3, country: "Japan", sales: 4675.40, expenses: 488.65 },
      { id: 4, country: "Italy", sales: 2117.57, expenses: 925.60 },
      { id: 5, country: "Greece", sales: 322.10, expenses: 4163.96 }
    ];
  }
  init = () => { console.log(this.flex); }
}
```

--------------------------------

### Angular Context Menu Implementation with WjContextMenu

Source: https://developer.mescius.com/wijmo/api/classes/Wijmo_Angular2_Input.Wjcontextmenu.html

This snippet demonstrates how to implement a context menu using the Angular 2 wjContextMenu directive. It shows how to bind the directive to an element and define the menu items using wj-menu and wj-menu-item components. The example includes menu commands and parameters.

```html
<p [wjContextMenu]="menu">
 This paragraph has a context menu.</p>

<wj-menu #menu style="display:none">
  <wj-menu-item [cmd]="cmdOpen" [cmdParam] ="1" >Open...</wj-menu-item>
  <wj-menu-item [cmd]="cmdSave" [cmdParam]="2">Save </wj-menu-item>
  <wj-menu-item [cmd]="cmdSave" [cmdParam]="3">Save As...</wj-menu-item>
  <wj-menu-item [cmd]="cmdNew" [cmdParam] ="4" >New...</wj-menu-item>
  <wj-menu-separator></wj-menu-separator>
  <wj-menu-item [cmd]="cmdExit" [cmdParam]="5">Exit</wj-menu-item>
</wj-menu>
```

--------------------------------

### Handle Wijmo Vue 'initialized' Event

Source: https://developer.mescius.com/wijmo/docs/GettingStarted/Vue-Components

This snippet shows how to use the 'initialized' event in Wijmo Vue components. The event fires after the control is added to the DOM and initialized. It allows for further setup, such as applying custom merge managers. The handler receives the grid instance and event arguments.

```html
<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
```

```javascript
methods: {
    initGrid: function(grid, args) {
        grid.mergeManager = new CustomMerge(grid);
    },
    ...
}
```