diff options
Diffstat (limited to '97suifangqa/apps/indicator/static/javascripts/card_chart.js')
| -rw-r--r-- | 97suifangqa/apps/indicator/static/javascripts/card_chart.js | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/97suifangqa/apps/indicator/static/javascripts/card_chart.js b/97suifangqa/apps/indicator/static/javascripts/card_chart.js new file mode 100644 index 0000000..42a5220 --- /dev/null +++ b/97suifangqa/apps/indicator/static/javascripts/card_chart.js @@ -0,0 +1,272 @@ +// set global options for hightcharts {{{ +$(function() { + Highcharts.setOptions ({ + //chart: { + // type: 'areaspline' + // //marginLeft: 25, + // //height: 223, + // //spacingTop: 10, + // //spacingBottom: 4 + // //overflow: false, + // //zIndex: 5 + //}, + colors: ['#31B6AD'], + credits: { + enabled: false + }, + legend: { + enabled: false + }, + plotOptions: { + series: { + fillOpacity: 0.12, + lineWidth: 1, + marker: { + enabled: true, //false false的时候就不会突出显示点 + lineColor: '#31B6AD', + lineWidth: 1, + radius: 3, // 点的大小 + fillColor: '#FFFFFF' // 设置点中间填充的颜色 + }, + shadow: false + //threshold: null + } + }, + title: { + text: null + }, + tooltip: { + useHTML: true, + style: { + padding: '7px' + }, + borderColor: '#EAEAEA' + }, + xAxis: { + type: 'datetime', + dateTimeLabelFormats: { + day: '%m-%e', + month: '%Y-%m' + }, + lineColor: '#CECECE', + gridLineColor: '#EFECEF', + gridLineWidth: 1, + tickWidth: 0, + labels: { + step: 2, + maxStaggerLines: 1 + }, + startOnTick: false, + endOnTick: false, + //tickInterval: (7 * 24 * 3600 * 1000), // 7 days + tickInterval: null, + tickPixelInterval: 50, + tickColor: '#FFFFFF' + }, + yAxis: { + title: { + text: null + }, + min: null, + max: null, + //allowDecimals: false, + startOnTick: false, + endOnTick: false, + tickInterval: null, + tickPixelInterval: 40, + lineColor: '#CECECE', + lineWidth: 2, + gridLineColor: '#EFECEF', + gridLineWidth: 1, + minPadding: 0.3, + maxPadding: 1.2 + } + }); +}); +// }}} + +$(document).ready(function(){ + //详细历史记录 + $(".detail_history").bind("click", function(){ + // update 'detail_card_id' + detail_card_id = $(this).closest(".index_card").attr("id").replace('index_card_', ''); + // check if this card has data + // if has no data, then exists div class="edit_icon_container" + if ($("#index_card_"+detail_card_id + " .edit_icon_container").length) { + $(".detail_card_info").hide(); + return false; + } + // get the index title and set for the 'detail card' + var index_title = $("#index_card_"+detail_card_id + " .card_title").html(); + $(".detail_card_info .card_title .title").html(index_title); + // set date for the 'shift_date' buttons + var date_fmt = 'YYYY-MM-DD'; + var today_mm = moment(); + var today_str = today_mm.format(date_fmt); + var three_month_ago_str = today_mm.clone().subtract('months', 3).format(date_fmt); + var six_month_ago_str = today_mm.clone().subtract('months', 6).format(date_fmt); + $(".recent_three_month").attr('end_date', today_str); + $(".recent_three_month").attr('begin_date', three_month_ago_str); + $(".recent_six_month").attr('end_date', today_str); + $(".recent_six_month").attr('begin_date', six_month_ago_str); + // draw chart + // 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, + begin_date_str, end_date_str + ); + $(".act_card_container").addClass("move_div_2_left"); + return false; + }); + + //切换日期 + $(".shift_date").bind("click", 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, + begin_str, end_str + ); + return false; + }); + + //根据日期搜索 + $("#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, + begin_str, end_str + ); + return false; + }); + + //浏览更多 + $(".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); + return false; + }); + + //收起历史记录 + $(".collapse_btn").bind("click", function(){ + // //删除图表数据 + // var serieses = detail_chart.series; + // for (series_key in serieses){ + // serieses[series_key].remove(); + // } + //删除图表 + if (window[detail_chart_str] != null) { + window[detail_chart_str].destroy(); + window[detail_chart_str] = null; + } + //删除表格数据 + $("tr").not(".first_line").remove(); + //隐藏div + $(".detail_card_info").hide(); + //初始化详细卡片id + detail_card_id = "-1"; + //添加删除div位置初始化 + $(".act_card_container").removeClass("move_div_2_left"); + return false; + }); +}); + +// 重画历史记录图表 +// destroy the original chart and new. +// chart_str: (string), +// name of global var of chart to draw; +// and the div id to contain the chart. +// options_str: (string), +// 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){ + 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, + 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); + + //显示 + $(".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 + //}); + + // 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; + } + window[chart_str] = new Highcharts.Chart(window[options_str]); + + //更新table数据 + //TODO + get_card_data_table(begin, end, true); + } + }); +} + +function get_card_data_table(begin, end, redraw){ + 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(); + } + $("table").append(data); + } + }); +} + +// vim: set ts=8 sw=4 tw=0 fenc=utf-8 ft=javascript: // |