diff options
Diffstat (limited to '97suifangqa/apps/indicator/static/javascripts/card_chart.js')
| -rw-r--r-- | 97suifangqa/apps/indicator/static/javascripts/card_chart.js | 252 |
1 files changed, 178 insertions, 74 deletions
diff --git a/97suifangqa/apps/indicator/static/javascripts/card_chart.js b/97suifangqa/apps/indicator/static/javascripts/card_chart.js index 42a5220..a8fe9f1 100644 --- a/97suifangqa/apps/indicator/static/javascripts/card_chart.js +++ b/97suifangqa/apps/indicator/static/javascripts/card_chart.js @@ -20,12 +20,12 @@ $(function() { plotOptions: { series: { fillOpacity: 0.12, - lineWidth: 1, + lineWidth: 2, marker: { - enabled: true, //false false的时候就不会突出显示点 + enabled: true, // false的时候就不会突出显示点 lineColor: '#31B6AD', - lineWidth: 1, - radius: 3, // 点的大小 + lineWidth: 2, + radius: 4, // 点的大小 fillColor: '#FFFFFF' // 设置点中间填充的颜色 }, shadow: false @@ -49,6 +49,7 @@ $(function() { month: '%Y-%m' }, lineColor: '#CECECE', + lineWidth: 2, gridLineColor: '#EFECEF', gridLineWidth: 1, tickWidth: 0, @@ -113,9 +114,29 @@ $(document).ready(function(){ // pass default global var 'begin_date_str' and 'end_date_str' // detail_chart global var: 'detail_chart' // options for chart global var: 'options_chart_<id>' - // update global var 'detail_chart_options' - detail_chart_options = 'options_chart_' + detail_card_id; - redraw_chart(detail_chart_str, detail_chart_options, + // update global var 'detail_chart_options_str' + detail_chart_options_str = 'options_chart_' + detail_card_id; + // clickable data point + window[detail_chart_options_str].plotOptions = { + series: { + cursor: 'pointer', + point: { + events: { + click: function(event) { + //console.log(event); + //console.log(this); + var date = moment(this.x).utc().format('YYYY-MM-DD'); + TB_show(false, indicator_url+'popup/edithistorydata?card_id='+detail_card_id+'&date='+date+'&no_title=true&TB_iframe=true&height=351&width=630', false); + } + } + } + } + }; + var getdata_type = "num"; + var getdata_num = 10; + detail_chart_getdata_draw(detail_chart_str, + detail_chart_options_str, + getdata_type, getdata_num, begin_date_str, end_date_str ); $(".act_card_container").addClass("move_div_2_left"); @@ -127,8 +148,17 @@ $(document).ready(function(){ $(".shift_date").addClass("unselected"); $(this).removeClass("unselected"); var begin_str = $(this).attr("begin_date"); - var end_str = $(this).attr("end_date"); - redraw_chart(detail_chart_str, detail_chart_options, + var end_date = $(this).attr("end_date"); + // add 2 days to 'end_str' + // otherwise xAxis maybe incomplete to show the last data point + var end_mm = moment(end_date); + end_mm.add('days', 2); + var end_str = end_mm.format('YYYY-MM-DD'); + var getdata_type = "date"; + var getdata_num = null; + detail_chart_getdata_draw(detail_chart_str, + detail_chart_options_str, + getdata_type, getdata_num, begin_str, end_str ); return false; @@ -138,8 +168,17 @@ $(document).ready(function(){ $("#search_begin_date, #search_end_date").bind("change", function(){ $(".shift_date").addClass("unselected"); var begin_str = $("#search_begin_date").val(); - var end_str = $("#search_end_date").val(); - redraw_chart(detail_chart_str, detail_chart_options, + var end_date = $("#search_end_date").val(); + // add 2 days to 'end_str' + // otherwise xAxis maybe incomplete to show the last data point + var end_mm = moment(end_date); + end_mm.add('days', 2); + var end_str = end_mm.format('YYYY-MM-DD'); + var getdata_type = "date"; + var getdata_num = null; + detail_chart_getdata_draw(detail_chart_str, + detail_chart_options_str, + getdata_type, getdata_num, begin_str, end_str ); return false; @@ -147,9 +186,16 @@ $(document).ready(function(){ //浏览更多 $(".see_more_btn").bind("click", function(){ - var btn = $(".see_more_btn"); - var end_str = end_date_str; - get_card_data_table(null, end_str, false); + // get the 'begin_date' of existing data + // used as the 'end_date' to request earlier data + var begin_orig = $("#detail_card_table tr:last .date").text(); + var end_date = moment(begin_orig); + end_date.subtract('days', 1); + var end_str = end_date.format('YYYY-MM-DD'); + var getdata_type = "num"; + var getdata_num = 10; + get_card_data_table(getdata_type, getdata_num, + null, end_str, true); return false; }); @@ -177,7 +223,6 @@ $(document).ready(function(){ }); }); -// 重画历史记录图表 // destroy the original chart and new. // chart_str: (string), // name of global var of chart to draw; @@ -186,85 +231,144 @@ $(document).ready(function(){ // name of global var of the chart options for drawing, // used to draw the detail chart by updating its data. // begin, end: (string), 'YYYY-MM-DD' -function redraw_chart(chart_str, options_str, begin, end){ +// type: "num" | "date" +function detail_chart_getdata_draw(chart_str, options_str, type, num, begin, end) { + var type2 = type || "num"; // default get data by 'num' + var num2 = num || ""; + var begin2 = begin || ""; + var end2 = end || ""; var time = moment().valueOf(); $.ajax({ type: 'get', url: indicator_url + 'ajax/get_card_data_chart', - data: 'card_id='+detail_card_id + '&begin='+begin + '&end='+end + '&time='+time, + data: 'card_id='+detail_card_id + '&type='+type2 + '&num='+num2 + '&begin='+begin2 + '&end='+end2 + '&time='+time, dataType: 'json', success: function(dataJson) { - // 设置默认起始结束时间 - //console.log(begin); - //console.log(end); - var begin_date_js = $.datepicker.parseDate('yy-mm-dd', begin); - var end_date_js = $.datepicker.parseDate('yy-mm-dd', end); - $("#search_begin_date").datepicker("setDate", begin_date_js); - $("#search_end_date").datepicker("setDate", end_date_js); - - //显示 + // show detail card $(".detail_card_info").show(); - //删除chart已有数据 - //var serieses = detail_chart.series; - //for (series_key in serieses){ - // serieses[series_key].remove(); - //} - //更新chart数据 - //detail_chart.addSeries({ - // data: dataJson, - // pointStart: begin_date_log_UTC_time, - // pointInterval: pointInterval - //}); + // update detail table data + get_card_data_table(type, num, begin, end, false); - // destroy original chart and - // redraw with new options and data - var begin_dt = moment(begin); - var end_dt = moment(end); - window[options_str].chart.renderTo = chart_str; - window[options_str].xAxis.min = begin_dt.valueOf(); - window[options_str].xAxis.max = end_dt.valueOf(); - window[options_str].series[0].data = dataJson; - // clickable data point - window[options_str].plotOptions = { - series: { - cursor: 'pointer', - point: { - events: { - click: function(event) { - //console.log(event); - //console.log(this); - var date = moment(this.x).utc().format('YYYY-MM-DD'); - TB_show(false, indicator_url+'popup/edithistorydata?card_id='+detail_card_id+'&date='+date+'&TB_iframe=true&transfer_params&height=351&width=630', false); - } - } - } - } - } - if (window[chart_str] != null) { - window[chart_str].destroy(); - window[chart_str] = null; + //console.log(dataJson); + if (dataJson.failed || dataJson.number_rsp == 0) { + // getdata failed or get no data + return false; } - window[chart_str] = new Highcharts.Chart(window[options_str]); + else { + var begin_dt = moment(dataJson.begin_rsp); + var end_dt = moment(dataJson.end_rsp); + if (dataJson.number_rsp == 1) { + // only one data point + // (3days) dp_date (4days) + begin_dt.subtract('days', 3); + end_dt.add('days', 4); + } + else { + var diff_days = end_dt.diff(begin_dt, 'days'); + var days_toadd = Math.floor(diff_days*0.10) + 1; + end_dt.add('days', days_toadd); + } + // type == "date" + if (type == "date") { + // use date of request instead + begin_dt = moment(dataJson.begin_req); + end_dt = moment(dataJson.end_req); + } - //更新table数据 - //TODO - get_card_data_table(begin, end, true); + // update datepicker + var begin_date_js = $.datepicker.parseDate('yy-mm-dd', + begin_dt.format('YYYY-MM-DD')); + var end_date_js = $.datepicker.parseDate('yy-mm-dd', + end_dt.format('YYYY-MM-DD')); + $("#search_begin_date").datepicker("setDate", + begin_date_js); + $("#search_end_date").datepicker("setDate", + end_date_js); + + // set chart data + window[options_str].chart.renderTo = chart_str; + window[options_str].xAxis.min = begin_dt.valueOf(); + window[options_str].xAxis.max = end_dt.valueOf(); + window[options_str].series[0].data = dataJson.data; + // destroy original chart and + // redraw with new options and data + if (window[chart_str] != null) { + window[chart_str].destroy(); + window[chart_str] = null; + } + window[chart_str] = new Highcharts.Chart(window[options_str]); + } } }); } -function get_card_data_table(begin, end, redraw){ +// get data for detail card table +// if append=true, then keep original data, +// otherwise, replace original data with new data +function get_card_data_table(type, num, begin, end, append){ + var type2 = type || "num"; // default get data by 'num' + var num2 = num || ""; + var begin2 = begin || ""; + var end2 = end || ""; var time = moment().valueOf(); $.ajax({ type: 'get', url: indicator_url + 'ajax/get_card_data_table', - data: 'card_id='+detail_card_id + '&begin='+begin + '&end='+end + '&time='+time, - success: function(data) { - if(redraw){ - $("tr").not(".first_line").remove(); + data: 'card_id='+detail_card_id + '&type='+type2 + '&num='+num2 + '&begin='+begin2 + '&end='+end2 + '&time='+time, + dataType: 'json', + success: function(dataJson) { + if (dataJson.failed || dataJson.number_rsp == 0) { + // getdata failed or get no data + return false; + } + // process data + // 'tr' format: + // <tr id="record_#"> + // <td class="date">"date"</td> + // <td class="record">"record (unit)"</td> + // <td class="state">"state"</td> + // </tr> + var data_html = ""; + for (var i=0; i<dataJson.data.length; i++) { + var r = dataJson.data[i]; + if (r.std_unit_symbol) { + var unit_str = ' (' + r.std_unit_symbol + ')'; + } + else { + var unit_str = ""; + } + var record_html = r.value_html + unit_str; + if (r.is_normal == true) { + var state = '正常'; + } + else if (r.is_normal == false) { + var state = '不正常'; + } + else { + var state = '未知'; + } + // tr_html + var tr_html = '<tr id="record_' + r.id + '">'; + tr_html += '<td class="date">' + r.date + '</td>'; + tr_html += '<td class="record">' + record_html + '</td>'; + tr_html += '<td class="state">' + state + '</td>'; + tr_html += '</tr>'; + //console.log('tr_html: ', tr_html); + data_html += tr_html + '\n'; + } + // update table + if (! append) { + $("#detail_card_table tr").not(".first_line").remove(); + // reset to enable button + $(".see_more_btn").removeAttr('disabled'); + } + //console.log('data_html: ', data_html); + $("#detail_card_table").append(data_html); + // disable button if has no more data + if (! dataJson.has_earlier) { + $(".see_more_btn").attr('disabled', 'disabled'); } - $("table").append(data); } }); } |