XY Scatter Plot

The FlexChart's itemsSource and bindingX properties apply to all series in the chart by default.

Specific series may override those properties and use different data sources and bindings. This allows you to use multiple data sources on the same chart, and reduces the need to pre-process data for charting.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjChart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new wjChart.FlexChart('#theChart', { chartType: 'Scatter', axisY: { axisLine: true }, series: [ { name: 'Experiment 1', itemsSource: getData(50, 0, 3), bindingX: 'x', binding: 'y' }, { name: 'Experiment 2', itemsSource: getData(40, 100, 12), bindingX: 'x', binding: 'y' }, { name: 'Experiment 3', itemsSource: getData(30, -100, 24), bindingX: 'x', binding: 'y' } ] }); // // toggle axis origin document.querySelector('#axisOrigin').addEventListener('click', e => { let origin = e.target.checked ? 0 : null; theChart.axisX.origin = origin; theChart.axisY.origin = origin; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart XY Scatter Plot</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-check"> <label for="axisOrigin">Set Axis Origin to Zero</label> <input id="axisOrigin" type="checkbox"> </div> <div id="theChart"></div> </div> </body> </html> export function getData(cnt, a, b) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); // x += .5 + Math.random() * 10; } // return arr; } .wj-flexchart { height: 300px; margin: 10px 0; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjcChart from '@grapecity/wijmo.chart'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnnotationModule } from '@grapecity/wijmo.angular2.chart.annotation'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('flexChart') chart: wjcChart.FlexChart; series1: any[]; series2: any[]; series3: any[]; // constructor(@Inject(DataService) private dataService: DataService) { this.series1 = dataService.getData(50, 0, 3); this.series2 = dataService.getData(40, 100, 12); this.series3 = dataService.getData(30, -100, 24); } // changeAxisOrigin(e: MouseEvent) { let origin = (<HTMLInputElement>e.target).checked ? 0 : null; this.chart.axisX.origin = origin; this.chart.axisY.origin = origin; } } // @NgModule({ imports: [WjChartModule, WjChartAnnotationModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart XY Scatter Plot</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="form-check"> <label for="axisOrigin">Set Axis Origin to Zero</label> <input id="axisOrigin" (click)="changeAxisOrigin($event)" type="checkbox"> </div> <wj-flex-chart #flexChart [chartType]="'Scatter'" [bindingX]="'x'"> <wj-flex-chart-axis wjProperty="axisY" [axisLine]="true"> </wj-flex-chart-axis> <wj-flex-chart-series [name]="'Experiment 1'" [itemsSource]="series1" [bindingX]="'x'" [binding]="'y'"> </wj-flex-chart-series> <wj-flex-chart-series [name]="'Experiment 2'" [itemsSource]="series2" [bindingX]="'x'" [binding]="'y'"> </wj-flex-chart-series> <wj-flex-chart-series [name]="'Experiment 3'" [itemsSource]="series3" [bindingX]="'x'" [binding]="'y'"> </wj-flex-chart-series> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData(cnt: number, a: number, b: number) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); x += .5 + Math.random() * 10; } // return arr; } } .wj-flexchart { height: 300px; margin: 10px 0; } label { margin-right: 3px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="form-check"> <label for="axisOrigin">Set Axis Origin to Zero</label> <input id="axisOrigin" @click="changeAxisOrigin" type="checkbox"> </div> <wj-flex-chart chartType="Scatter" bindingX="x" :initialized="chartInitialized"> <wj-flex-chart-axis wjProperty="axisY" :axisLine=true> </wj-flex-chart-axis> <wj-flex-chart-series name="Experiment 1" :itemsSource="series1" bindingX="x" binding="y"> </wj-flex-chart-series> <wj-flex-chart-series name="Experiment 2" :itemsSource="series2" bindingX="x" binding="y"> </wj-flex-chart-series> <wj-flex-chart-series name="Experiment 3" :itemsSource="series3" bindingX="x" binding="y"> </wj-flex-chart-series> </wj-flex-chart> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.chart'; import { getData } from './data'; // new Vue({ el: '#app', data: { series1: getData(50, 0, 3), series2: getData(40, 100, 12), series3: getData(30, -100, 24) }, methods: { chartInitialized(sender) { this.chart = sender; }, changeAxisOrigin(e) { let origin = e.target.checked ? 0 : null; this.chart.axisX.origin = origin; this.chart.axisY.origin = origin; } } }); </script> <style> .container-fluid .wj-flexchart { height: 300px; margin: 10px 0; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart XY Scatter Plot</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> export function getData(cnt, a, b) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); // x += .5 + Math.random() * 10; } // return arr; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjChart from '@grapecity/wijmo.react.chart'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.chartInitialized = (sender) => { this.chart = sender; }; this.changeAxisOrigin = (target) => { let origin = target.checked ? 0 : null; this.chart.axisX.origin = origin; this.chart.axisY.origin = origin; }; this.state = { series1: getData(50, 0, 3), series2: getData(40, 100, 12), series3: getData(30, -100, 24) }; } render() { return <div className="container-fluid"> <div className="form-check"> <label htmlFor="axisOrigin">Set Axis Origin to Zero</label> <input id="axisOrigin" onClick={e => this.changeAxisOrigin(e.target)} type="checkbox" defaultChecked={false}/> </div> <wjChart.FlexChart chartType="Scatter" bindingX="x" initialized={this.chartInitialized}> <wjChart.FlexChartAxis wjProperty="axisY" axisLine={true}> </wjChart.FlexChartAxis> <wjChart.FlexChartSeries name="Experiment 1" itemsSource={this.state.series1} bindingX="x" binding="y"> </wjChart.FlexChartSeries> <wjChart.FlexChartSeries name="Experiment 2" itemsSource={this.state.series2} bindingX="x" binding="y"> </wjChart.FlexChartSeries> <wjChart.FlexChartSeries name="Experiment 3" itemsSource={this.state.series3} bindingX="x" binding="y"> </wjChart.FlexChartSeries> </wjChart.FlexChart> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart XY Scatter Plot</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexchart { height: 300px; margin: 10px 0; } label { margin-right: 3px; } body { margin-bottom: 24pt; } export function getData(cnt, a, b) { let arr = [], x = -5 * cnt / 2; // for (let i = 0; i < cnt; i++) { let rnd = Math.random() * cnt - cnt / 2; // arr.push({ x: x, y: a + x * (b + rnd) + rnd }); x += .5 + Math.random() * 10; } // return arr; }