app/assets/javascript/c80_estate/backend/admin/pstats.js in c80_estate-0.1.0.9 vs app/assets/javascript/c80_estate/backend/admin/pstats.js in c80_estate-0.1.0.10
- old
+ new
@@ -28,19 +28,19 @@
var $div_area_text_stats,
$ul_props; // здесь выводим текстовые свойства
var $div_area_text_stats_sq,
$ul_props_sq; // здесь выводим текстовые свойства занятости в метрах
+
+ // тут живут круговые графики
+ var $div_graph_radial;
+ var $div_graph_radial_sq;
+
+ // тут живут динамические графики
+ var $div_graph_dynamic,
+ $div_graph_dynamic_sq;
-
- var $div_graph; // в этом div живет график занятости
- var $div_graph2, // в этом div живет график занятости
- $div_graph2canvas;
-
- var $div_graph3, // в этом div живет график занятости в метрах
- $div_graph3canvas;
-
var $ajax_div, $ajax_div2;
var fBuild = function () {
// зафиксируем html элементы
@@ -64,32 +64,36 @@
$div_area_text_stats = $("<div id='text_stats'></div>").appendTo($div_index_adds);
$ul_props = $("<ul><li id='title'></li><li id='born_date'></li><li id='atype_filter'></li><li id='all_areas_count'></li><li id='free_areas_count'></li><li id='busy_areas_count'></li></ul>");
$div_area_text_stats.append($ul_props);
+ $div_graph_radial = $("<div id='graph_radial'></div>").appendTo($div_index_adds);
+
$div_busy_coef_sq = $("<div id='coef_sq'></div>").appendTo($div_index_adds);
- $p_busy_coef_sq = $("<p class='val'></p>").appendTo($div_busy_coef_sq);
- $p_busy_coef_mess_sq = $("<p class='title'><abbr class='abbr_busy_coef_sq' title='TITLE'>Занятость (в м.кв.)</abbr></p>").appendTo($div_busy_coef_sq);
- $p_busy_coef_comment_sq = $("<p class='comment'></p>").appendTo($div_busy_coef_sq);
+ $p_busy_coef_sq = $("<p class='val'></p>").appendTo($div_busy_coef_sq);
+ $p_busy_coef_mess_sq = $("<p class='title'><abbr class='abbr_busy_coef_sq' title='TITLE'>Занятость (в м.кв.)</abbr></p>").appendTo($div_busy_coef_sq);
+ $p_busy_coef_comment_sq = $("<p class='comment'></p>").appendTo($div_busy_coef_sq);
$div_area_text_stats_sq = $("<div id='text_stats_sq'></div>").appendTo($div_index_adds);
- $ul_props_sq = $("<ul><li id='all_areas_count_sq'></li><li id='free_areas_count_sq'></li><li id='busy_areas_count_sq'></li></ul>");
- $div_area_text_stats_sq.append($ul_props_sq);
+ $ul_props_sq = $("<ul><li id='all_areas_count_sq'></li><li id='free_areas_count_sq'></li><li id='busy_areas_count_sq'></li></ul>");
+ $div_area_text_stats_sq.append($ul_props_sq);
- //$div_graph = $("<div id='graph'></div>").appendTo($div_index_adds);
- $div_graph2 = $("<div id='graph2'></div>").appendTo($div_index_adds);
+ $div_graph_radial_sq = $("<div id='graph_radial_sq'></div>").appendTo($div_index_adds);
- $div_graph3 = $("<div id='graph3'></div>").appendTo($div_index_adds);
+ $div_graph_dynamic = $("<div id='graph2'></div>").appendTo($div_index_adds);
+ $div_graph_dynamic_sq = $("<div id='graph3'></div>").appendTo($div_index_adds);
+
$main_content.prepend($ajax_div2);
$main_content.prepend($ajax_div);
$main_content.prepend($div_index_adds);
// теперь покажем
$main_content.css('opacity', '1.0');
};
+ // запросим коэф-ты и данные для построения графиков
var fRequestCoefs = function () {
var atype_id = $select_atype.val();
var property_id = $select_property.val();
var start_date = $input_start_date.val();
@@ -142,18 +146,26 @@
$ili.html(ival);
}
}
- if (data["graph"] != undefined || data["graph_dynamic"] != undefined) {
- fDrawChart(data["graph"], data["graph_dynamic"]);
+ if (data["graph_radial"] != undefined) {
+ fDrawChartRadial(data["graph_radial"]);
}
+ if (data["graph_dynamic"] != undefined) {
+ fDrawChartRadialSq(data["graph_dynamic"]);
+ }
+
if (data["graph_dynamic_sq"] != undefined) {
- fDrawChartSq(data["graph_dynamic_sq"]);
+ fDrawChartDynamicSq(data["graph_dynamic_sq"]);
}
+ if (data["graph_radial_sq"] != undefined) {
+ fDrawChartRadialSq(data["graph_radial_sq"]);
+ }
+
$h2_page_title.text(data["title"]);
$h2_page_title.css('opacity', '1.0');
$(document).attr('title', data["title"]);
} else {
@@ -163,10 +175,12 @@
});
//fPreloaderShow();
};
+ // запросим таблицы объектов
+ // результат придёт в виде js и таблицы вставятся сами
var fRequestCharts = function () {
var atype_id = $select_atype.val();
$.ajax({
@@ -193,146 +207,72 @@
fBuild();
fRequestCoefs();
fRequestCharts();
};
- var fDrawChart = function (data_array_rows_radial, data_array_rows_dynamic) {
+ // рисуем динамический график занятости
+ var fDrawChartDynamic = function (data_array_rows_dynamic) {
- google.charts.load('current', {'packages': ['corechart']});
- google.charts.setOnLoadCallback(drawChart);
+ var dataPoints = [];
+ //[
+ // {x: new Date(2012,0), y: 8.3} ,
+ // {x: new Date(2012,1), y: 8.3} ,
+ // {x: new Date(2012,2), y: 8.2} ,
+ // {x: new Date(2012,3), y: 8.1} ,
+ // {x: new Date(2012,4), y: 8.2} ,
+ // {x: new Date(2012,5), y: 8.2} ,
+ // {x: new Date(2012,6), y: 8.2} ,
+ // {x: new Date(2012,7), y: 8.1} ,
+ // {x: new Date(2012,8), y: 7.8} ,
+ // {x: new Date(2012,9), y: 7.9} ,
+ // {x: new Date(2012,10), y:7.8} ,
+ // {x: new Date(2012,11), y:7.8} ,
+ // {x: new Date(2013,0), y:7.9} ,
+ // {x: new Date(2013,1), y:7.7} ,
+ // {x: new Date(2013,2), y:7.6} ,
+ // {x: new Date(2013,3), y:7.5}
+ //]
- function drawChart() {
+ var i, iob;
+ for (i = 0; i < data_array_rows_dynamic.length; i ++) {
+ iob = data_array_rows_dynamic[i];
+ dataPoints.push({
+ x: new Date(iob["year"], iob["month"], iob["day"]),
+ y: iob["val"]
+ })
+ }
- var data, options, chart;
-
- if (data_array_rows_radial != undefined) {
- //data = google.visualization.arrayToDataTable(data_array_rows_radial);
- //
- //options = {
- // title: ''
- //};
-
- //chart = new google.visualization.PieChart(document.getElementById('graph'));
- //
- //chart.draw(data, options);
- }
-
- if (data_array_rows_dynamic != undefined && false) {
- //data_array = [
- // ['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
- // ['Alfred Hitchcock (1935)', 8.4, 7.9],
- // ['Ralph Thomas (1959)', 6.9, 6.5],
- // ['Don Sharp (1978)', 6.5, 6.4],
- // ['James Hawes (2008)', 4.4, 6.2]
- //]
-
- //var data = google.visualization.arrayToDataTable(data_array_rows_dynamic);
-
- data = new google.visualization.DataTable();
- data.addColumn('date', ''); // Implicit domain column.
- data.addColumn('number', ''); // Implicit data column.
- //data.addColumn({type:'number', role:'interval'});
- //data.addColumn({type:'number', role:'interval'});
- //data.addColumn('number', 'Expenses');
-
- var i, iob, yearValue, monthValue, dayValue;
- for (i = 0; i < data_array_rows_dynamic.length; i++) {
- iob = data_array_rows_dynamic[i];
- yearValue = iob[0].substr(0, 4);
- monthValue = iob[0].substr(5, 2) - 1;
- dayValue = iob[0].substr(8, 2);
- console.log(iob + " => " + yearValue + "/" + monthValue + "/" + dayValue); // + ": " + data_array_rows_dynamic[i][0]
- data_array_rows_dynamic[i][0] = new Date(parseInt(yearValue), parseInt(monthValue), parseInt(dayValue));
- }
-
- data.addRows(data_array_rows_dynamic);
-
- options = {
- title: 'Занятость',
- vAxis: {title: '', ticks: [0, 1]},
- ignoreBounds: true,
- isStacked: false
- };
-
- chart = new google.visualization.SteppedAreaChart(document.getElementById('graph2'));
-
- chart.draw(data, options);
- }
-
- if (data_array_rows_dynamic) {
-
-
- var dataPoints = [];
- //[
- // {x: new Date(2012,0), y: 8.3} ,
- // {x: new Date(2012,1), y: 8.3} ,
- // {x: new Date(2012,2), y: 8.2} ,
- // {x: new Date(2012,3), y: 8.1} ,
- // {x: new Date(2012,4), y: 8.2} ,
- // {x: new Date(2012,5), y: 8.2} ,
- // {x: new Date(2012,6), y: 8.2} ,
- // {x: new Date(2012,7), y: 8.1} ,
- // {x: new Date(2012,8), y: 7.8} ,
- // {x: new Date(2012,9), y: 7.9} ,
- // {x: new Date(2012,10), y:7.8} ,
- // {x: new Date(2012,11), y:7.8} ,
- // {x: new Date(2013,0), y:7.9} ,
- // {x: new Date(2013,1), y:7.7} ,
- // {x: new Date(2013,2), y:7.6} ,
- // {x: new Date(2013,3), y:7.5}
- //]
-
- var i, iob;
- for (i = 0; i < data_array_rows_dynamic.length; i ++) {
- iob = data_array_rows_dynamic[i];
- dataPoints.push({
- x: new Date(iob["year"], iob["month"], iob["day"]),
- y: iob["val"]
- })
- }
-
- var chart = new CanvasJS.Chart("graph2",
+ var chart = new CanvasJS.Chart("graph2",
+ {
+ title:{
+ text: "Занятость"
+ },
+ animationEnabled: true,
+ axisY:{
+ includeZero: false,
+ interval: 10,
+ valueFormatString: ""
+ },
+ data: [
{
- title:{
- text: "Занятость"
- },
- animationEnabled: true,
- axisY:{
- includeZero: false,
- interval: 10,
- valueFormatString: ""
- },
- data: [
- {
- type: "stepArea",
- toolTipContent: "{x}: {y}%",
- markerSize: 5,
- dataPoints: dataPoints
- }
+ type: "stepArea",
+ toolTipContent: "{x}: {y}%",
+ markerSize: 5,
+ dataPoints: dataPoints
+ }
- ]
- });
+ ]
+ });
- $('#graph2').css('opacity','1.0').css('display','block');
- chart.render();
- }
-
- }
-
- if (data_array_rows_radial != undefined) {
- $('#graph').css('opacity', '1.0').css('display', 'block');
- }
-
- if (data_array_rows_dynamic != undefined) {
- $('#graph2').css('opacity', '1.0').css('display', 'block');
- }
-
+ $div_graph_dynamic.css('opacity','1.0').css('display','block');
+ chart.render();
+
};
- var fDrawChartSq = function (data) {
+ // рисуем динамический график занятости в м.кв.
+ var fDrawChartDynamicSq = function (data) {
-
var dataPoints = [];
//[
// {x: new Date(2012,0), y: 8.3} ,
// {x: new Date(2012,1), y: 8.3} ,
// {x: new Date(2012,2), y: 8.2} ,
@@ -380,12 +320,80 @@
}
]
});
- $('#graph3').css('opacity','1.0').css('display','block');
+ $div_graph_dynamic_sq.css('opacity','1.0').css('display','block');
chart.render();
+ };
+
+ var fDrawChartRadial = function (data) {
+
+ // data:
+ // [
+ // { y: 6, legendText:"Свободно", label: "Площадей свободно" },
+ // { y: 4, legendText:"Занято", label: "Площадей занято" }
+ // ]
+
+ var chart = new CanvasJS.Chart("graph_radial",
+ {
+ animationEnabled: true,
+ legend:{
+ verticalAlign: "center",
+ horizontalAlign: "",
+ fontSize: 0,
+ fontFamily: "Open Sans"
+ },
+ theme: "theme",
+ data: [
+ {
+ type: "pie",
+ indexLabelFontFamily: "Open Sans",
+ indexLabelFontSize: 14,
+ indexLabel: "{label}: {y}",
+ startAngle:-10,
+ showInLegend: true,
+ toolTipContent:"{legendText} {y}",
+ dataPoints: data
+ }
+ ]
+ });
+ chart.render();
+ };
+
+ var fDrawChartRadialSq = function (data) {
+
+ // data:
+ // [
+ // { y: 6, legendText:"", label: "Метров свободно" },
+ // { y: 4, legendText:"", label: "Метров занято" }
+ // ]
+
+ var chart = new CanvasJS.Chart("graph_radial_sq",
+ {
+ animationEnabled: true,
+ legend:{
+ verticalAlign: "center",
+ horizontalAlign: "",
+ fontSize: 0,
+ fontFamily: "Open Sans"
+ },
+ theme: "theme",
+ data: [
+ {
+ type: "pie",
+ indexLabelFontFamily: "Open Sans",
+ indexLabelFontSize: 14,
+ indexLabel: "{label}: {y}",
+ startAngle:-10,
+ showInLegend: true,
+ toolTipContent:"{legendText} {y}",
+ dataPoints: data
+ }
+ ]
+ });
+ chart.render();
};
fInit();
};
\ No newline at end of file