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; };