[fix] cleanup chart

frappe/public/js/frappe/dom.js

@@ -11,9 +11,12 @@ frappe.dom = {
 		return document.getElementById(id);
 	},
 	set_unique_id: function(ele) {
+		var $ele = $(ele);
+		if($ele.attr('id')) {
+			return $ele.attr('id');
+		}
 		var id = 'unique-' + frappe.dom.id_count;
-		if(ele)
-			ele.setAttribute('id', id);
+		$ele.attr('id', id);
 		frappe.dom.id_count++;
 		return id;
 	},

frappe/public/js/frappe/form/dashboard.js

@@ -354,8 +354,7 @@ frappe.ui.form.Dashboard = Class.extend({
 		this.chart_area.removeClass('hidden');
 
 		$.extend(opts, {
-			wrapper: me.wrapper,
-			bind_to: ".form-chart",
+			wrapper: me.wrapper.find('.form-chart'),
 			padding: {
 				right: 30,
 				bottom: 30

frappe/public/js/frappe/ui/charts.js

@@ -6,6 +6,8 @@ frappe.ui.Chart = Class.extend({
 		$.extend(this.opts, opts);
 		this.show_chart(false);
 
+		this.opts.bind_to = frappe.dom.set_unique_id(this.opts.wrapper);
+
 		if(this.opts.data && ((this.opts.data.columns && this.opts.data.columns.length >= 1)
 			|| (this.opts.data.rows && this.opts.data.rows.length >= 1))) {
 				this.chart = this.render_chart();
@@ -17,7 +19,7 @@ frappe.ui.Chart = Class.extend({
 
 	render_chart: function() {
 		var chart_dict = {
-			bindto: this.opts.bind_to,
+			bindto: '#' + this.opts.bind_to,
 		    data: {},
 			axis: {
 		        x: {
@@ -49,7 +51,7 @@ frappe.ui.Chart = Class.extend({
 	},
 
 	show_chart: function(show) {
-		this.opts.wrapper.find(this.opts.bind_to).toggle(show);
+		this.opts.wrapper.toggle(show);
 	},
 
 	set_chart_size: function(width, height) {

frappe/public/js/frappe/views/reports/grid_report.js

@@ -366,10 +366,9 @@ frappe.views.GridReport = Class.extend({
 	},
 	make: function() {
 		var me = this;
-		this.chart_id = 'chart-' + cstr(cint(Math.random() * 10000000000));
 
 		// chart wrapper
-		this.chart_area = $('<div class="chart" id="'+ this.chart_id +'"></div>').appendTo(this.wrapper);
+		this.chart_area = $('<div class="chart"></div>').appendTo(this.wrapper);
 
 		this.page.add_menu_item(__("Export"), function() { return me.export(); }, true);
 
@@ -664,14 +663,13 @@ frappe.views.GridReportWithPlot = frappe.views.GridReport.extend({
 	setup_chart: function() {
 		var me = this;
 		if (in_list(["Daily", "Weekly"], this.filter_inputs.range.val())) {
-			this.wrapper.find("#" + me.chart_id).toggle(false);
+			this.chart_area.toggle(false);
 			return;
 		}
 		var chart_data = this.get_chart_data ? this.get_chart_data() : null;
-		
+
 		this.chart = new frappe.ui.Chart({
-			wrapper: me.wrapper,
-			bind_to: "#" + me.chart_id,
+			wrapper: this.chart_area,
 			data: chart_data
 		});
 	},
@@ -698,19 +696,19 @@ frappe.views.GridReportWithPlot = frappe.views.GridReport.extend({
 
 	get_chart_data: function() {
 		var me = this;
-		
+
 		var plottable_cols = [];
 		$.each(me.columns, function(idx, col) {
 			if(col.formatter==me.currency_formatter && !col.hidden && col.plot!==false) {
 				plottable_cols.push(col.field);
 			}
 		})
-		
+
 		var data = {
 			x: 'x',
 			'columns': [['x'].concat(plottable_cols)]
 		};
-		
+
 		$.each(this.data, function(i, item) {
 			if (item.checked) {
 				var data_points = [item.name];

frappe/public/js/frappe/views/reports/query_report.js

@@ -41,9 +41,7 @@ frappe.views.QueryReport = Class.extend({
 		this.wrapper = $("<div>").appendTo(this.page.main);
 		$('<div class="waiting-area" style="display: none;"></div>\
 		<div class="no-report-area msg-box no-border" style="display: none;"></div>\
-		<div style="border-bottom: 1px solid #d1d8dd; padding-bottom: 10px">\
-			<div class="chart_area"></div>\
-		</div>\
+		<div class="chart_area" style="border-bottom: 1px solid #d1d8dd; padding-bottom: 10px"></div>\
 		<div class="results" style="display: none;">\
 			<div class="result-area" style="height:400px;"></div>\
 			<p class="help-msg alert alert-warning text-center" style="margin: 15px; margin-top: 0px;"></p>\
@@ -53,6 +51,7 @@ frappe.views.QueryReport = Class.extend({
 					e.g. "5:10"  (' + __("to filter values between 5 & 10") + ')</p>\
 		</div>').appendTo(this.wrapper);
 
+		this.chart_area = this.wrapper.find(".chart_area");
 		this.make_toolbar();
 	},
 	make_toolbar: function() {
@@ -142,6 +141,7 @@ frappe.views.QueryReport = Class.extend({
 		this.page.set_title(__(this.report_name));
 		this.page.clear_inner_toolbar();
 		this.setup_filters();
+		this.chart_area.toggle(false);
 
 		var report_settings = frappe.query_reports[this.report_name];
 
@@ -299,6 +299,8 @@ frappe.views.QueryReport = Class.extend({
 			this.report_ajax.abort();
 		}
 
+		this.chart_area.toggle(false);
+
 		this.report_ajax = frappe.call({
 			method: "frappe.desk.query_report.run",
 			type: "GET",
@@ -736,23 +738,23 @@ frappe.views.QueryReport = Class.extend({
 	},
 
 	setup_chart: function(res) {
-		var me = this;
-		this.wrapper.find(".chart_area").parent().toggle(false);
+		this.chart_area.toggle(false);
 
 		if (this.get_query_report_opts().get_chart_data) {
 			var opts = this.get_query_report_opts().get_chart_data(res.columns, res.result);
 		} else if (res.chart) {
 			var opts = res.chart;
+		} else {
+			return;
 		}
 
 		$.extend(opts, {
-			wrapper: me.wrapper,
-			bind_to: ".chart_area"
+			wrapper: this.chart_area,
 		});
 
 		this.chart = new frappe.ui.Chart(opts);
-		if(this.chart)
-			this.wrapper.find(".chart_area").parent().toggle(true);
-
+		if(this.chart) {
+			this.chart_area.toggle(true);
+		}
 	}
 })