← All changes | js/render-google.js +189 -22 3.1.2 → 3.4.8 View file →

		@@ -7,11 +7,26 @@
7	7
8	8	(function($) {
9	9	var gv;
10	10	var all_charts, objects;
	11	+ // so that we know which charts belong to our library.
	12	+ var rendered_charts = [];
11	13
12	14	function renderChart(id) {
13		- renderSpecificChart(id, all_charts[id]);
	15	+ var chart = all_charts[id];
	16	+ var hasAnnotation = false;
	17	+
	18	+ // re-render the chart only if it doesn't have annotations and it is on the front-end
	19	+ // this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
	20	+ // remember, some charts do not support annotations so they should not be included in this.
	21	+ var no_annotation_charts = ['tabular', 'timeline', 'gauge', 'geo', 'bubble', 'candlestick'];
	22	+ if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
	23	+ hasAnnotation = chart.series.length - chart.settings.series.length > 1;
	24	+ }
	25	+
	26	+ if(! hasAnnotation){
	27	+ renderSpecificChart(id, all_charts[id]);
	28	+ }
14	29	}
15	30
16	31	function renderSpecificChart(id, chart) {
17	32	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
		@@ -18,8 +33,9 @@
18	33
19	34	if(chart.library !== 'google'){
20	35	return;
21	36	}
	37	+ rendered_charts[id] = 'yes';
22	38
23	39	series = chart.series;
24	40	data = chart.data;
25	41	settings = chart.settings;
		@@ -32,8 +48,11 @@
32	48
33	49	render = objects[id] || null;
34	50	if (!render) {
35	51	switch (chart.type) {
	52	+ case "tabular":
	53	+ render = "Table";
	54	+ break;
36	55	case "gauge":
37	56	case "table":
38	57	case "timeline":
39	58	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
		@@ -51,8 +70,47 @@
51	70	settings['animation']['startup'] = true;
52	71	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
53	72	}
54	73
	74	+ // mark roles for series that have specified a role
	75	+ // and then remove them from future processing
	76	+ // and also adjust the indices of the series array so that
	77	+ // the ones with a role are ignored
	78	+ // e.g. if there are 6 columns (0-5) out of which 1, 3 and 5 are annotations
	79	+ // the final series will only include 0, 2, 4 (reindexed as 0, 1, 2)
	80	+
	81	+ // this will capture all the series indexes that became annotations.
	82	+ var series_annotations = [];
	83	+ if (settings.series) {
	84	+ var adjusted_series = [];
	85	+ for (i = 0; i < settings.series.length; i++) {
	86	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
	87	+ continue;
	88	+ }
	89	+ if(typeof settings.series[i].role !== 'undefined'){
	90	+ table.setColumnProperty(i + 1, 'role', settings.series[i].role);
	91	+ if(settings.series[i].role === '') {
	92	+ adjusted_series.push(settings.series[i]);
	93	+ }else{
	94	+ series_annotations.push(i);
	95	+ }
	96	+ }
	97	+ }
	98	+ if(adjusted_series.length > 0){
	99	+ settings.series = adjusted_series;
	100	+ }
	101	+ }
	102	+
	103	+ if ( settings['explorer_enabled'] && settings['explorer_enabled'] == 'true' ) { // jshint ignore:line
	104	+ var $explorer = {};
	105	+ $explorer['keepInBounds'] = true;
	106	+
	107	+ if ( settings['explorer_actions'] ) {
	108	+ $explorer['actions'] = settings['explorer_actions'];
	109	+ }
	110	+ settings['explorer'] = $explorer;
	111	+ }
	112	+
55	113	switch (chart.type) {
56	114	case 'pie':
57	115	if (settings.slices) {
58	116	for (i in settings.slices) {
		@@ -86,8 +144,9 @@
86	144	settings['region'] = 'world';
87	145	}
88	146	break;
89	147	case 'table':
	148	+ case 'tabular':
90	149	if (parseInt(settings['pagination']) !== 1)
91	150	{
92	151	delete settings['pageSize'];
93	152	}
		@@ -93,8 +152,11 @@
93	152	}
94	153	break;
95	154	case 'gauge':
96	155	break;
	156	+ case 'bubble':
	157	+ settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
	158	+ break;
97	159	case 'timeline':
98	160	settings['timeline'] = [];
99	161	settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
100	162	settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
		@@ -131,8 +193,9 @@
131	193	case 'area':
132	194	case 'scatter':
133	195	case 'candlestick':
134	196	case 'column':
	197	+ case 'combo':
135	198	axis = settings.hAxis;
136	199	break;
137	200	case 'bar':
138	201	axis = settings.vAxis;
		@@ -172,16 +235,30 @@
172	235
173	236	for (i = 0; i < data.length; i++) {
174	237	row = [];
175	238	for (j = 0; j < series.length; j++) {
176		- if (series[j].type === 'date' || series[j].type === 'datetime') {
177		- date = new Date(data[i][j]);
178		- data[i][j] = null;
179		- if (Object.prototype.toString.call(date) === "[object Date]") {
180		- if (!isNaN(date.getTime())) {
181		- data[i][j] = date;
182		- }
183		- }
	239	+ switch(series[j].type) {
	240	+ case 'string':
	241	+ if(data[i][j] === ''){
	242	+ data[i][j] = null;
	243	+ }
	244	+ break;
	245	+ case 'boolean':
	246	+ if (typeof data[i][j] === 'string'){
	247	+ data[i][j] = data[i][j] === 'true';
	248	+ }
	249	+ break;
	250	+ case 'date':
	251	+ // fall-through.
	252	+ case 'datetime':
	253	+ date = new Date(data[i][j]);
	254	+ data[i][j] = null;
	255	+ if (Object.prototype.toString.call(date) === "[object Date]") {
	256	+ if (!isNaN(date.getTime())) {
	257	+ data[i][j] = date;
	258	+ }
	259	+ }
	260	+ break;
184	261	}
185	262	row.push(data[i][j]);
186	263	}
187	264	table.addRow(row);
		@@ -189,8 +266,9 @@
189	266
190	267	if (settings.series) {
191	268	switch(chart.type){
192	269	case 'table':
	270	+ case 'tabular':
193	271	for(i in settings.series){
194	272	i = parseInt(i);
195	273	if (!series[i + 1]) {
196	274	continue;
		@@ -199,12 +277,19 @@
199	277	}
200	278	break;
201	279	default:
202	280	for (i = 0; i < settings.series.length; i++) {
203		- if (!series[i + 1]) {
	281	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
204	282	continue;
205	283	}
206		- format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
	284	+ var seriesIndexToUse = i + 1;
	285	+
	286	+ // if an annotation "swallowed" a series, use the following one.
	287	+ if(series_annotations.includes(i)){
	288	+ seriesIndexToUse++;
	289	+ }
	290	+
	291	+ format_data(id, table, series[seriesIndexToUse].type, settings.series[i].format, seriesIndexToUse);
207	292	}
208	293	break;
209	294	}
210	295	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -209,12 +294,18 @@
209	294	}
210	295	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
211	296	format_data(id, table, 'number', settings.format, 1);
212	297	}
	298	+
	299	+ if(settings.hAxis && series[0]) {
	300	+ format_data(id, table, series[0].type, settings.hAxis.format, 0);
	301	+ }
	302	+
213	303	override(settings);
214	304
215	305	gv.events.addListener(render, 'ready', function () {
216	306	var arr = id.split('-');
	307	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
217	308	try{
218	309	var img = render.getImageURI();
219	310	__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
220	311	$('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
		@@ -222,8 +313,10 @@
222	313	console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
223	314	}
224	315	});
225	316
	317	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
	318	+
226	319	render.draw(table, settings);
227	320	}
228	321
229	322	function format_data(id, table, type, format, index) {
		@@ -269,16 +362,8 @@
269	362	renderChart(id);
270	363	}
271	364	}
272	365
273		- if(typeof visualizer !== 'undefined'){
274		- // called while updating the chart.
275		- visualizer.update = function(){
276		- renderChart('canvas');
277		- };
278		- }
279		-
280		-
281	366	var resizeTimeout;
282	367
283	368	$(document).ready(function() {
284	369	$(window).resize(function() {
		@@ -288,9 +373,9 @@
288	373
289	374	resizeHiddenContainers(true);
290	375	});
291	376
292		- $(window).load(function(){
	377	+ $(window).on('load', function(){
293	378	resizeHiddenContainers(true);
294	379	});
295	380
296	381	function resizeHiddenContainers(everytime){
		@@ -319,14 +404,59 @@
319	404	});
320	405	}
321	406
322	407	$('body').on('visualizer:render:chart:start', function(event, v){
	408	+ var $chart_types = ['corechart', 'geochart', 'gauge', 'table', 'timeline'];
	409	+ if(v.is_front == true){ // jshint ignore:line
	410	+ // check what all chart types to load.
	411	+ $chart_types = [];
	412	+ $.each(v.charts, function(i, c){
	413	+ var $type = c.type;
	414	+ switch($type){
	415	+ case 'bar':
	416	+ case 'column':
	417	+ case 'line':
	418	+ case 'area':
	419	+ case 'stepped area':
	420	+ case 'bubble':
	421	+ case 'pie':
	422	+ case 'donut':
	423	+ case 'combo':
	424	+ case 'candlestick':
	425	+ case 'histogram':
	426	+ case 'scatter':
	427	+ case 'bubble':
	428	+ $type = 'corechart';
	429	+ break;
	430	+ case 'geo':
	431	+ $type = 'geochart';
	432	+ break;
	433	+ case 'tabular':
	434	+ case 'table':
	435	+ $type = 'table';
	436	+ break;
	437	+ case 'dataTable':
	438	+ case 'polarArea':
	439	+ case 'radar':
	440	+ $type = null;
	441	+ break;
	442	+ }
	443	+ if($type != null){
	444	+ $chart_types.push($type);
	445	+ }
	446	+ });
	447	+ }
	448	+
323	449	objects = {};
324		- google.charts.load("current", {packages: ["corechart", "geochart", "gauge", "table", "timeline"], mapsApiKey: v.map_api_key, 'language' : v.language});
	450	+ google.charts.load("current", {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language});
325	451	google.charts.setOnLoadCallback(function() {
326	452	gv = google.visualization;
327	453	all_charts = v.charts;
328		- render();
	454	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	455	+ renderChart(v.id);
	456	+ } else {
	457	+ render();
	458	+ }
329	459	});
330	460	});
331	461
332	462	$('body').on('visualizer:render:specificchart:start', function(event, v){
		@@ -332,7 +462,44 @@
332	462	$('body').on('visualizer:render:specificchart:start', function(event, v){
333	463	objects = {};
334	464	gv = google.visualization;
335	465	renderSpecificChart(v.id, v.chart);
	466	+ });
	467	+
	468	+ $('body').on('visualizer:render:currentchart:update', function(event, v){
	469	+ renderChart('canvas');
	470	+ });
	471	+
	472	+ // front end actions
	473	+ // 'image' is also called from the library
	474	+ $('body').on('visualizer:action:specificchart', function(event, v){
	475	+ var id = v.id;
	476	+ if(typeof rendered_charts[id] === 'undefined'){
	477	+ return;
	478	+ }
	479	+ var arr = id.split('-');
	480	+ var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
	481	+ switch(v.action){
	482	+ case 'print':
	483	+ // for charts that have no rendered image defined, we print the data instead.
	484	+ var html = v.data;
	485	+ if(img !== ''){
	486	+ html = "<html><body><img src='" + img + "' /></body></html>";
	487	+ }
	488	+ $('body').trigger('visualizer:action:specificchart:defaultprint', {data: html});
	489	+ break;
	490	+ case 'image':
	491	+ if(img !== ''){
	492	+ var $a = $("<a>"); // jshint ignore:line
	493	+ $a.attr("href", img);
	494	+ $("body").append($a);
	495	+ $a.attr("download", v.dataObj.name);
	496	+ $a[0].click();
	497	+ $a.remove();
	498	+ }else{
	499	+ console.warn("No image generated");
	500	+ }
	501	+ break;
	502	+ }
336	503	});
337	504
338	505	})(jQuery);