@pritamvtv wrote:
i am building bar charts using D3, in runs fine when i run with ionic cordova run/build android but it gives error when i run with ionic cordova run/build android --prod. The app opens fine but the bar chart do not draw. The x-axis draws fine but it is unable to draw y- axis. can someone please help.
**here is mycode** // import { Component } from '@angular/core'; import { Platform } from '@ionic/angular'; import * as d3 from 'd3-selection'; import * as d3Scale from 'd3-scale'; import * as d3Array from 'd3-array'; import * as d3Axis from 'd3-axis'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { barData = [ { season: 'S1', viewers: 250000 }, { season: 'S2', viewers: 380000 }, { season: 'S3', viewers: 500000 }, { season: 'S4', viewers: 690000 }, { season: 'S5', viewers: 690000 }, { season: 'S6', viewers: 750000 }, { season: 'S7', viewers: 1000000 }, { season: 'S8', viewers: 1700000 } ]; title = 'originals'; subtitle = 'Viewers per season for'; width: number; height: number; margin = { top: 20, right: 20, bottom: 30, left: 40 }; x: any; y: any; svg: any; g: any; constructor(private _platform: Platform) { this.width = 900 - this.margin.left - this.margin.right; this.height = 500 - this.margin.top - this.margin.bottom; } ionViewDidEnter() { this.init(); this.initAxes(); this.drawAxes(); this.drawChart(); } init() { this.svg = d3.select('#barChart') .append('svg') .attr('width', '100%') .attr('height', '100%') .attr('viewBox', '0 0 900 500'); this.g = this.svg.append('g') .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); } initAxes() { this.x = d3Scale.scaleBand().rangeRound([0, this.width]).padding(0.1); this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]); this.x.domain(this.barData.map((d) => d.season)); this.y.domain([0, d3Array.max(this.barData, (d) => d.viewers)]); } drawAxes() { this.g.append('g') .attr('class', 'axis axis--x') .attr('transform', 'translate(0,' + this.height + ')') .call(d3Axis.axisBottom(this.x)) .attr('font-size', '30'); this.g.append('g') .attr('class', 'axis axis--y') .call(d3Axis.axisLeft(this.y)) .append('text') .attr('class', 'axis-title') .attr('transform', 'rotate(-90)') .attr('y', 6) .attr('dy', '0.71em') .attr('text-anchor', 'end') .attr('fill', 'rgb(34, 167, 240)') .attr('font-size', '50') .text('viewers'); } drawChart() { this.g.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar') .attr('fill', 'rgb(34, 167, 240)') .attr('x', (d) => this.x(d.season)) .attr('y', (d) => this.y(d.viewers)) .attr('width', this.x.bandwidth()) .attr('height', (d) => this.height - this.y(d.viewers)); } } **pacjage.json** { "name": "example", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "~8.1.2", "@angular/core": "~8.1.2", "@angular/forms": "~8.1.2", "@angular/platform-browser": "~8.1.2", "@angular/platform-browser-dynamic": "~8.1.2", "@angular/router": "~8.1.2", "@ionic-native/android-permissions": "^5.17.1", "@ionic-native/camera": "^5.17.1", "@ionic-native/core": "^5.0.0", "@ionic-native/document-viewer": "^5.17.0", "@ionic-native/file": "^5.17.0", "@ionic-native/file-opener": "^5.17.0", "@ionic-native/file-transfer": "^5.17.0", "@ionic-native/local-notifications": "^5.17.1", "@ionic-native/network": "^5.17.0", "@ionic-native/screen-orientation": "^5.17.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^4.7.1", "@ionic/storage": "^2.2.0", "cordova-android": "8.1.0", "cordova-browser": "6.0.0", "cordova-plugin-android-permissions": "^1.0.2", "cordova-plugin-badge": "^0.8.8", "cordova-plugin-camera": "^4.1.0", "cordova-plugin-document-viewer": "^0.9.13", "cordova-plugin-file": "^6.0.2", "cordova-plugin-file-opener2": "^2.2.1", "cordova-plugin-file-transfer": "^1.7.1", "cordova-plugin-local-notification": "^0.9.0-beta.2", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-screen-orientation": "^3.0.2", "cordova-sqlite-storage": "^3.4.0", "core-js": "^2.5.4", "d3": "^5.14.2", "es6-promise-plugin": "^4.2.2", "jquery": "^3.4.1", "rxjs": "~6.5.1", "tslib": "^1.9.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/architect": "~0.801.2", "@angular-devkit/build-angular": "~0.801.2", "@angular-devkit/core": "~8.1.2", "@angular-devkit/schematics": "~8.1.2", "@angular/cli": "~8.1.2", "@angular/compiler": "~8.1.2", "@angular/compiler-cli": "~8.1.2", "@angular/language-service": "~8.1.2", "@ionic/angular-toolkit": "^2.1.1", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "^5.0.0", "cordova-plugin-device": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.1.3", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.4.3" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-network-information": {}, "cordova-sqlite-storage": {}, "cordova-plugin-screen-orientation": {}, "cordova-plugin-document-viewer": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-file-transfer": {}, "cordova-plugin-file": {}, "cordova-plugin-file-opener2": { "ANDROID_SUPPORT_V4_VERSION": "27.+" }, "cordova-plugin-android-permissions": {}, "cordova-plugin-local-notification": {}, "cordova-plugin-camera": { "ANDROID_SUPPORT_V4_VERSION": "27.+" } }, "platforms": [ "browser", "android" ] } }
Posts: 1
Participants: 1