Step Charts

This demo shows line and area step charts.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjInput from '@grapecity/wijmo.input'; import { getData, getChartTypeData, getStepPositionData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a chart let theChart = new wjChart.FlexChart('#theChart', { itemsSource: getData(), chartType: 'Step', bindingX: 'month', legend: { position: 'Top' }, axisX: { axisLine: false, majorTickMarks: "None" }, axisY: { majorGrid: false }, options: { step: { position: 'center' } }, series: [ { binding: 'sms', name: 'SMS Totals' }, { binding: 'email', name: 'Email Totals' }, ] }); var chartType = new wjInput.ComboBox('#chartType', { itemsSource: getChartTypeData(), textChanged: function (s, e) { theChart.chartType = s.text; }, text: 'Step' }); var stepPosition = new wjInput.ComboBox('#stepPosition', { itemsSource: getStepPositionData(), textChanged: function (s, e) { theChart.options = { step: { position: s.text.toLowerCase() } }; }, text: 'Center' }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Step Charts</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"> <label for="chartType">Chart Type: </label> <div id="chartType"></div> <label for="stepPosition">Step Position: </label> <div id="stepPosition"></div> <div id="theChart"></div> </div> </body> </html> // create some random data export function getData() { let months = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec'.split(','), data = []; // for (let i = 0; i < months.length; i++) { data.push({ month: months[i], x: i - 0.5, sms: Math.round(Math.random() * 50), email: Math.round(Math.random() * 100) }); } // return data; } // export function getChartTypeData() { return 'Step,StepSymbols,StepArea'.split(','); } // export function getStepPositionData() { return 'Start,Center,End'.split(','); } .wj-flexchart { height: 300px; } label { width: 150px; text-align: right; margin-right: 3px; } .wj-control { margin-bottom: 3px; } .wj-flexchart .wj-legend .wj-label { opacity: .9; font-size: 80%; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, AfterViewInit, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { DataService } from './app.data'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjInput from '@grapecity/wijmo.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { data: any[]; chartTypeData: string[]; chartType: string; stepPositionData: string[]; stepPosition: string; // // references control in the view @ViewChild('theChart') theChart: wjChart.FlexChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.chartTypeData = dataService.getChartTypeData(); this.chartType = 'Step'; this.stepPositionData = dataService.getStepPositionData(); this.stepPosition = 'Center'; } // ngAfterViewInit() { this.theChart.options = { step: { position: 'center' } }; } stepPositionChanged(combo: wjInput.ComboBox) { this.theChart.options.step.position = combo.text.toLowerCase(); this.theChart.refresh(); } } // @NgModule({ imports: [FormsModule, WjInputModule, WjChartModule, 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 Step Charts</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-group"> <label for="chartType">Chart Type: </label> <wj-combo-box [(text)]="chartType" [itemsSource]="chartTypeData"></wj-combo-box><br> <label for="stepPosition">Step Position: </label> <wj-combo-box #cb (textChanged)="stepPositionChanged(cb)" [(text)]="stepPosition" [itemsSource]="stepPositionData"></wj-combo-box><br> <wj-flex-chart #theChart [chartType]="chartType" bindingX="month" [itemsSource]="data"> <wj-flex-chart-legend position="Top"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" [axisLine]="false" majorTickMarks="None"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" [majorGrid]="false"></wj-flex-chart-axis> <wj-flex-chart-series binding="sms" name="Total SMS"></wj-flex-chart-series> <wj-flex-chart-series binding="email" name="Total Emails"></wj-flex-chart-series> </wj-flex-chart> </div> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let months = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec'.split(','), data = []; // for (let i = 0; i < months.length; i++) { data.push({ month: months[i], x: i - 0.5, sms: Math.round(Math.random() * 50), email: Math.round(Math.random() * 100) }); } // return data; } // getChartTypeData() { return 'Step,StepSymbols,StepArea'.split(','); } // getStepPositionData() { return 'Start,Center,End'.split(','); } } .wj-flexchart { height: 300px; } label { width: 150px; text-align: right; margin-right: 3px; } .wj-control { margin-bottom: 3px; } .wj-flexchart .wj-legend .wj-label { opacity: .9; font-size: 80%; } <template> <div class="container-fluid"> <label for="chartType">Chart Type:</label> <wj-combo-box id="chartType" :text="chartType" :textChanged="chartTypeChanged" :itemsSource="chartTypeData"></wj-combo-box><br> <label for="stepPosition">Step Position:</label> <wj-combo-box id="stepPosition" text="Center" :textChanged="stepPositionChanged" :itemsSource="stepPositionData"></wj-combo-box><br> <div class="form-group"> <wj-flex-chart :chartType="chartType" bindingX="month" :itemsSource="data" :initialized="initializeChart"> <wj-flex-chart-legend position="Top"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" :axisLine='false' majorTickMarks="None"></wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisY" :majorGrid='false'></wj-flex-chart-axis> <wj-flex-chart-series binding="sms" name="Total SMS"></wj-flex-chart-series> <wj-flex-chart-series binding="email" name="Total Emails"></wj-flex-chart-series> </wj-flex-chart> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.chart'; import { getData, getChartTypeData, getStepPositionData } from './data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), chartType: "Step", chartTypeData: getChartTypeData(), stepPositionData: getStepPositionData() } }, methods: { initializeChart: function(flex) { this.theChart = flex; this.theChart.options = { step: { position : "center" }}; }, chartTypeChanged: function(combo) { this.chartType = combo.text; }, stepPositionChanged: function(combo) { this.theChart.options.step.position = combo.text.toLowerCase(); this.theChart.refresh(); } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .wj-flexchart { height: 300px; } label { margin-right: 3px; width: 150px; text-align: right; } .wj-control { margin-bottom: 3px; } .wj-flexchart .wj-legend .wj-label { opacity: .9; font-size: 80%; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Step Charts</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> // create some random data export function getData() { let months = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec'.split(','), data = []; // for (let i = 0; i < months.length; i++) { data.push({ month: months[i], x: i-0.5, sms: Math.round(Math.random() * 50), email: Math.round( Math.random() * 100) }); } // return data; } // export function getChartTypeData() { return 'Step,StepSymbols,StepArea'.split(','); } // export function getStepPositionData() { return 'Start,Center,End'.split(','); } 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 Chart from '@grapecity/wijmo.react.chart'; import * as Input from '@grapecity/wijmo.react.input'; import { getData } from './data'; // class App extends React.Component { // constructor(props) { super(props); // this.chartInitialized = (sender) => { this.theChart = sender; // this.theChart.options = { step: { position: 'center' } }; }; this.state = { data: getData(), chartType: 'Step', chartTypeSource: ['Step', 'StepSymbols', 'StepArea'], stepPositionSource: ['Start', 'Center', 'End'], }; } // render() { return <div className="container-fluid"> <div> <label>Chart Type: </label> <Input.ComboBox itemsSource={this.state.chartTypeSource} textChanged={this.chartTypeChanged.bind(this)} text={this.state.chartType}> </Input.ComboBox> <label>Step Position: </label> <Input.ComboBox itemsSource={this.state.stepPositionSource} textChanged={this.stepPositionChanged.bind(this)} text='Center'> </Input.ComboBox> </div> <div className="form-group"> <Chart.FlexChart chartType={this.state.chartType} bindingX="month" itemsSource={this.state.data} initialized={this.chartInitialized}> <Chart.FlexChartAxis wjProperty="axisX" axisLine={false} majorTickMarks="None"></Chart.FlexChartAxis> <Chart.FlexChartAxis wjProperty="axisY" majorGrid={false}></Chart.FlexChartAxis> <Chart.FlexChartSeries binding="sms" name="SMS Totals"></Chart.FlexChartSeries> <Chart.FlexChartSeries binding="email" name="Email Totals"></Chart.FlexChartSeries> <Chart.FlexChartLegend position="Top"></Chart.FlexChartLegend> </Chart.FlexChart> </div> </div>; } // chartTypeChanged(combo) { this.setState({ chartType: combo.text }); } // stepPositionChanged(combo) { if (this.theChart) { this.theChart.options.step.position = combo.text.toLowerCase(); this.theChart.refresh(); } } } 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 Step Charts</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; } label { width: 150px; text-align: right; margin-right: 3px; } .wj-control { margin-bottom: 3px; } .wj-flexchart .wj-legend .wj-label { opacity: .9; font-size: 80%; } export function getData() { let months = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec'.split(','), data = []; // for (let i = 0; i < months.length; i++) { data.push({ month: months[i], x: i - 0.5, sms: Math.round(Math.random() * 50), email: Math.round(Math.random() * 100) }); } // return data; }