This topic contains 6 replies, has 2 voices, and was last updated by adriwan_kenoby 7 years, 1 month ago.
- Topic
Hi everybody,
I am trying to use amCharts as page-component. I think that my probleme maybe is I don’t define dependencies correctly OR it’s because of the amChart code don’t respect the requirejs standard API , I need help to better undestood the front-end architecture.
This is the inline code of an amChart : https://www.amcharts.com/demos/date-based-data/
This is an example using requirejs : http://www.amcharts.com/tips/using-requirejs-with-amcharts/
And this is my code for replace it as a page-component:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141// src/Sinabs/MonitoringBundle/Resources/public/js/app/components/amchart-component.jsdefine(function (require) {'use strict';var amchartComponent,BaseComponent = require('oroui/js/app/components/base/component');var AmCharts = require('amcharts.serial');require('amcharts.theme.light');amchartComponent = BaseComponent.extend({/*** @property {Object}*/$chart: null,/*** Initializes amchart component** @param {Object} options*/initialize: function (options) {// _sourceElement refers to the HTMLElement// that contains the component declarationthis.$elem = options._sourceElement;delete options._sourceElement;var data = [];for (var index in options.data) {data.push({"date": index, "value": options[index]});}var config = {"type": "serial","theme": "light","marginRight": 40,"marginLeft": 40,"autoMarginOffset": 20,"mouseWheelZoomEnabled": true,"dataDateFormat": "YYYY-MM-DDTJJ:NN:SS","valueAxes": [{"id": "v1","axisAlpha": 0,"position": "left","ignoreAxisWidth": true}],"balloon": {"borderThickness": 1,"shadowAlpha": 0},"graphs": [{"id": "g1","balloon": {"drop": true,"adjustBorderColor": false,"color": "#ffffff"},"bullet": "round","bulletBorderAlpha": 1,"bulletColor": "#FFFFFF","bulletSize": 5,"hideBulletsCount": 50,"lineThickness": 2,"title": "red line","useLineColorForBulletBorder": true,"valueField": "value","balloonText": "<span>[[value]]</span>"}],"chartScrollbar": {"graph": "g1","oppositeAxis": false,"offset": 30,"scrollbarHeight": 80,"backgroundAlpha": 0,"selectedBackgroundAlpha": 0.1,"selectedBackgroundColor": "#888888","graphFillAlpha": 0,"graphLineAlpha": 0.5,"selectedGraphFillAlpha": 0,"selectedGraphLineAlpha": 1,"autoGridCount": true,"color": "#AAAAAA"},"chartCursor": {"pan": true,"valueLineEnabled": true,"valueLineBalloonEnabled": true,"cursorAlpha": 1,"cursorColor": "#258cbb","limitToGraph": "g1","valueLineAlpha": 0.2,"valueZoomable": true},"valueScrollbar": {"oppositeAxis": false,"offset": 50,"scrollbarHeight": 10},"categoryField": "date","categoryAxis": {"parseDates": true,"minPeriod": "fff","dashLength": 1,"minorGridEnabled": true},"export": {"enabled": true},"dataProvider": data};this.$chart = AmCharts.makeChart(this.$elem, config);this.$chart.addListener("rendered", zoomChart);this.zoomChart();amchartComponent.__super__.initialize.call(this, options);},zoomChart: function () {this.$chart.zoomToIndexes(this.$chart.dataProvider.length - 40, this.$chart.dataProvider.length - 1);},/*** Disposes the component*/dispose: function () {if (this.disposed) {// component is already removedreturn;}delete this.$elem;amchartComponent.__super__.dispose.call(this);}});return amchartComponent;});The view.html.twig ( whose extend OroUIBundle:actions:view.html.twig and where sondeData is an associative array ) :
1234567{% set options = {data: sondeData} %}<div id="chartdiv"data-page-component-module="sinabsmonitoring/js/app/components/amchart-component"data-page-component-options="{{ options|json_encode }}"></div>And the yaml configuration file for requirejs :
123456789101112131415161718192021# src/Sinabs/MonitoringBundle/Resources/config/requirejs.ymlconfig:shim:# shim configures the exports and dependencies for older, traditional# "browser globals" scripts that do not use define() to declare# the dependencies and set a module value;'amcharts.serial':deps:- 'amcharts'export: 'AmCharts''amcharts.theme.light':deps:- 'amcharts'exports: 'AmCharts'paths:# path mappings for module names not found directly under baseUrl'amcharts': 'https://www.amcharts.com/lib/3/amcharts.js''amcharts.serial': 'https://www.amcharts.com/lib/3/serial.js''amcharts.theme.light': 'https://www.amcharts.com/lib/3/themes/light.js''sinabsmonitoring/js/app/components/amchart-component': 'bundles/sinabsmonitoring/js/app/components/amchart-component.js'
The forum ‘OroPlatform – HTML, JavaScript, CSS, Design Questions’ is closed to new topics and replies.