123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- BemsWebApplication.EnergyUsage = function (params,viewInfo) {
- "use strict";
- var initialized = false,
- shouldReload = false,
- currentTabIndex = ko.observable(0),
- dataSource;
- var multiViewItems = [
- {
- viewModel: viewModel,
- template: 'mainCharts'
- },
- {
- viewModel: viewModel,
- template: 'subCharts'
- }
- ];
- var elements = _.map(_.range(1, 11), function(x) {
- return {
- id: ['chart', x].join('')
- }
- });
- var chartLayout = new BWA.ChartLayout({
- divs: _.map(elements, function(element) {
- if (element.id === 'chart1') {
- element.id = 'chartDiv';
- element.chartId = 'chart1';
- }
- if (element.id === 'chart2') {
- element.id = 'chart2div';
- element.chartId = 'chart2';
- }
- if (element.id === 'chart6') {
- element.widgetChartName = 'dxPieChart';
- }
- return element;
- }),
- multiViewOptions: {
- viewIndex: currentTabIndex,
- viewCount: multiViewItems.length
- }
- });
- var pieDataSource = [
- { country: "USA",medals: 110 },
- { country: "China",medals: 100 },
- { country: "Russia",medals: 72 },
- { country: "Britain",medals: 47 },
- { country: "Australia",medals: 46 },
- { country: "Germany",medals: 41 },
- { country: "France",medals: 40 },
- { country: "South Korea",medals: 31 }
- ];
- var pieChartOptions = {
- dataSource: pieDataSource,
- palette: "Soft Pastel",
- title: "Olympic Medals in 2008",
- legend: {
- horizontalAlignment: "right",
- verticalAlignment: "top",
- margin: 0
- },
- pointClick: function (point) {
- point.select();
- },
- series: [
- {
- type: "doughnut", // if not, pie.
- argumentField: "country",
- valueField: "medals",
- hoverStyle: {
- color: "#ffd700"
- }
- }
- ]
- };
- var chartDataSource = [
- {
- year: 1950,
- Africa: 227,
- Americas: 331,
- Asia: 1436,
- Europe: 547,
- Oceania: 12
- },
- //{
- // year: 1960,
- // Africa: 285,
- // Americas: 416,
- // Asia: 1718,
- // Europe: 605,
- // Oceania: 15
- //},
- {
- year: 1970,
- Africa: 365,
- Americas: 512,
- Asia: 2156,
- Europe: 657,
- Oceania: 19
- },
- {
- year: 1980,
- Africa: 478,
- Americas: 612,
- Asia: 2644,
- Europe: 695,
- Oceania: 22
- },
- {
- year: 1990,
- Africa: 633,
- Americas: 720,
- Asia: 3180,
- Europe: 722,
- Oceania: 26
- },
- {
- year: 2000,
- Africa: 810,
- Americas: 833,
- Asia: 3678,
- Europe: 731,
- Oceania: 30
- },
- {
- year: 2010,
- Africa: 1016,
- Americas: 936,
- Asia: 4149,
- Europe: 728,
- Oceania: 35
- }
- ];
- function handleCmBuildingModification() {
- shouldReload = true;
- }
- var chartOptions = {
- dataSource: chartDataSource,
- title: {
- text: 'Continental Population Shift (in millions)'
- },
- legend: {
- horizontalAlignment: 'center',
- verticalAlignment: 'bottom'
- },
- commonSeriesSettings: {
- argumentField: 'year',
- type: 'fullStackedArea',
- label: {
- visible: true,
- connector: {
- visible: true
- }
- }
- },
- tooltip: {
- enabled: true,
- percentPrecision: 2,
- customizeTooltip: function (value) {
- return {
- text: value.percentText
- };
- }
- },
- series: [{
- name: 'Oceania',
- valueField: 'Oceania'
- },{
- name: 'Africa',
- valueField: 'Africa'
- },{
- name: 'Americas',
- valueField: 'Americas'
- },{
- name: 'Asia',
- valueField: 'Asia'
- },{
- name: 'Europe',
- valueField: 'Europe'
- }]
- };
- var dataSource = [
- { month: "January",avgT: 9.8,minT: 4.1,maxT: 15.5,prec: 109 },
- { month: "February",avgT: 11.8,minT: 5.8,maxT: 17.8,prec: 104 },
- { month: "March",avgT: 13.4,minT: 7.2,maxT: 19.6,prec: 92 },
- { month: "April",avgT: 15.4,minT: 8.1,maxT: 22.8,prec: 30 },
- { month: "May",avgT: 18,minT: 10.3,maxT: 25.7,prec: 10 },
- { month: "June",avgT: 20.6,minT: 12.2,maxT: 29,prec: 2 },
- { month: "July",avgT: 22.2,minT: 13.2,maxT: 31.3,prec: 2 },
- { month: "August",avgT: 22.2,minT: 13.2,maxT: 31.1,prec: 1 },
- { month: "September",avgT: 21.2,minT: 12.4,maxT: 29.9,prec: 8 },
- { month: "October",avgT: 17.9,minT: 9.7,maxT: 26.1,prec: 24 },
- { month: "November",avgT: 12.9,minT: 6.2,maxT: 19.6,prec: 64 },
- { month: "December",avgT: 9.6,minT: 3.4,maxT: 15.7,prec: 76 }
- ];
- var chartOptions2 = {
- dataSource: dataSource,
- commonSeriesSettings: {
- argumentField: "month"
- },
- panes: [{
- name: "topPane"
- },{
- name: "bottomPane"
- }],
- defaultPane: "bottomPane",
- series: [{
- pane: "topPane",
- color: "#87CEEB",
- type: "rangeArea",
- rangeValue1Field: "minT",
- rangeValue2Field: "maxT",
- name: "Monthly Temperature Ranges, °C"
- },{
- pane: "topPane",
- valueField: "avgT",
- name: "Average Temperature, °C",
- label: {
- visible: true,
- customizeText: function () {
- return this.valueText + " °C";
- }
- }
- },{
- type: "bar",
- valueField: "prec",
- name: "prec, mm",
- label: {
- visible: true,
- customizeText: function () {
- return this.valueText + " mm";
- }
- }
- }
- ],
- valueAxis: [{
- pane: "bottomPane",
- grid: {
- visible: true
- },
- title: {
- text: "Precipitation, mm"
- }
- },{
- pane: "topPane",
- min: 0,
- max: 30,
- grid: {
- visible: true
- },
- title: {
- text: "Temperature, °C"
- }
- }],
- legend: {
- verticalAlignment: "bottom",
- horizontalAlignment: "center"
- },
- title: {
- text: "Weather in Glendale, CA"
- }
- };
- var dataSource3 = [
- { country: "USA",gold: 36,silver: 38,bronze: 36 },
- { country: "China",gold: 51,silver: 21,bronze: 28 },
- { country: "Russia",gold: 23,silver: 21,bronze: 28 },
- { country: "Britain",gold: 19,silver: 13,bronze: 15 },
- { country: "Australia",gold: 14,silver: 15,bronze: 17 },
- { country: "Germany",gold: 16,silver: 10,bronze: 15 }
- ];
- var chartOptions3 = {
- rotated: true,
- pointSelectionMode: "multiple",
- dataSource: dataSource3,
- //size: {
- // width: '100%',
- // height: '100%'
- //},
- commonSeriesSettings: {
- argumentField: "country",
- type: "stackedbar",
- selectionStyle: {
- hatching: {
- direction: "left"
- }
- }
- },
- series: [
- { valueField: "gold",name: "Gold Medals",color: "#ffd700" },
- { valueField: "silver",name: "Silver Medals",color: "#c0c0c0" },
- { valueField: "bronze",name: "Bronze Medals",color: "#cd7f32" }
- ],
- title: {
- text: "Olympic Medals in 2008"
- },
- legend: {
- verticalAlignment: "bottom",
- horizontalAlignment: "center"
- },
- pointClick: function (point) {
- point.isSelected() ? point.clearSelection() : point.select();
- }
- }
- function handleViewShown() {
- $('#chart1').dxChart($.extend({},chartOptions,{
- title: 'chart1'
- }));
- $('#chart2').dxChart($.extend({},chartOptions2,{
- title: 'chart2'
- }));
- $('#chart3').dxChart(chartOptions3);
- $('#chart4').dxChart(chartOptions3);
- $('#chart5').dxChart(chartOptions3);
- $('#chart6').dxPieChart(pieChartOptions);
- $('#chart7').dxChart(chartOptions);
- $('#chart8').dxChart(chartOptions3);
- $('#chart9').dxChart(chartOptions3);
- $('#chart10').dxChart(chartOptions3);
- chartLayout.initialize();
- chartLayout.onShown();
- if(shouldReload)
- {
- //shouldReload = false;
- //dataSource.pageIndex(0);
- //dataSource.load();
- }
- $SideMenu.showSideMenuIfWill(params.view);
- //sideOverlayVisible(true);
- }
- function handleViewDisposing() {
- }
- function handleViewHidden() {
- chartLayout.onHidden();
- }
- function handleViewShowing() {
- //BemsWebApplication.app.loadTemplates('views/sideMenu/sidemenu1.dxview');
- //deferred.resolve();
- }
- function refreshList() {
- //dataSource.pageIndex(0);
- //dataSource.load();
- }
-
- var viewModel = {
- refreshList: refreshList,
- viewShowing: handleViewShowing,
- viewShown: handleViewShown,
- viewHidden: handleViewHidden,
- viewDisposing: handleViewDisposing,
- currentTabIndex: currentTabIndex,
- multiViewItems: multiViewItems
- }
- return viewModel;
- };
|