PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.4.8
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.4.8
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
← All changes | js/render-google.js +169 -27 3.1.33.4.8 View file →
@@ -11,9 +11,22 @@
11 11 // so that we know which charts belong to our library.
12 12 var rendered_charts = [];
13 13
14 14 function renderChart(id) {
15 - 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 + }
16 29 }
17 30
18 31 function renderSpecificChart(id, chart) {
19 32 var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
@@ -35,8 +48,11 @@
35 48
36 49 render = objects[id] || null;
37 50 if (!render) {
38 51 switch (chart.type) {
52 + case "tabular":
53 + render = "Table";
54 + break;
39 55 case "gauge":
40 56 case "table":
41 57 case "timeline":
42 58 render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
@@ -54,8 +70,47 @@
54 70 settings['animation']['startup'] = true;
55 71 settings['animation']['duration'] = parseInt(settings['animation']['duration']);
56 72 }
57 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 +
58 113 switch (chart.type) {
59 114 case 'pie':
60 115 if (settings.slices) {
61 116 for (i in settings.slices) {
@@ -89,8 +144,9 @@
89 144 settings['region'] = 'world';
90 145 }
91 146 break;
92 147 case 'table':
148 + case 'tabular':
93 149 if (parseInt(settings['pagination']) !== 1)
94 150 {
95 151 delete settings['pageSize'];
96 152 }
@@ -96,8 +152,11 @@
96 152 }
97 153 break;
98 154 case 'gauge':
99 155 break;
156 + case 'bubble':
157 + settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
158 + break;
100 159 case 'timeline':
101 160 settings['timeline'] = [];
102 161 settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
103 162 settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
@@ -176,16 +235,30 @@
176 235
177 236 for (i = 0; i < data.length; i++) {
178 237 row = [];
179 238 for (j = 0; j < series.length; j++) {
180 - if (series[j].type === 'date' || series[j].type === 'datetime') {
181 - date = new Date(data[i][j]);
182 - data[i][j] = null;
183 - if (Object.prototype.toString.call(date) === "[object Date]") {
184 - if (!isNaN(date.getTime())) {
185 - data[i][j] = date;
186 - }
187 - }
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;
188 261 }
189 262 row.push(data[i][j]);
190 263 }
191 264 table.addRow(row);
@@ -193,8 +266,9 @@
193 266
194 267 if (settings.series) {
195 268 switch(chart.type){
196 269 case 'table':
270 + case 'tabular':
197 271 for(i in settings.series){
198 272 i = parseInt(i);
199 273 if (!series[i + 1]) {
200 274 continue;
@@ -203,12 +277,19 @@
203 277 }
204 278 break;
205 279 default:
206 280 for (i = 0; i < settings.series.length; i++) {
207 - if (!series[i + 1]) {
281 + if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
208 282 continue;
209 283 }
210 - 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);
211 292 }
212 293 break;
213 294 }
214 295 } else if (chart.type === 'pie' && settings.format && settings.format !== '') {
@@ -213,8 +294,13 @@
213 294 }
214 295 } else if (chart.type === 'pie' && settings.format && settings.format !== '') {
215 296 format_data(id, table, 'number', settings.format, 1);
216 297 }
298 +
299 + if(settings.hAxis && series[0]) {
300 + format_data(id, table, series[0].type, settings.hAxis.format, 0);
301 + }
302 +
217 303 override(settings);
218 304
219 305 gv.events.addListener(render, 'ready', function () {
220 306 var arr = id.split('-');
@@ -227,8 +313,10 @@
227 313 console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
228 314 }
229 315 });
230 316
317 + $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
318 +
231 319 render.draw(table, settings);
232 320 }
233 321
234 322 function format_data(id, table, type, format, index) {
@@ -274,16 +362,8 @@
274 362 renderChart(id);
275 363 }
276 364 }
277 365
278 - if(typeof visualizer !== 'undefined'){
279 - // called while updating the chart.
280 - visualizer.update = function(){
281 - renderChart('canvas');
282 - };
283 - }
284 -
285 -
286 366 var resizeTimeout;
287 367
288 368 $(document).ready(function() {
289 369 $(window).resize(function() {
@@ -324,14 +404,59 @@
324 404 });
325 405 }
326 406
327 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 +
328 449 objects = {};
329 - 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});
330 451 google.charts.setOnLoadCallback(function() {
331 452 gv = google.visualization;
332 453 all_charts = v.charts;
333 - render();
454 + if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
455 + renderChart(v.id);
456 + } else {
457 + render();
458 + }
334 459 });
335 460 });
336 461
337 462 $('body').on('visualizer:render:specificchart:start', function(event, v){
@@ -339,18 +464,23 @@
339 464 gv = google.visualization;
340 465 renderSpecificChart(v.id, v.chart);
341 466 });
342 467
468 + $('body').on('visualizer:render:currentchart:update', function(event, v){
469 + renderChart('canvas');
470 + });
471 +
343 472 // front end actions
473 + // 'image' is also called from the library
344 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] ];
345 481 switch(v.action){
346 482 case 'print':
347 - var id = v.id;
348 - if(typeof rendered_charts[id] === 'undefined'){
349 - return;
350 - }
351 - var arr = id.split('-');
352 - var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
353 483 // for charts that have no rendered image defined, we print the data instead.
354 484 var html = v.data;
355 485 if(img !== ''){
356 486 html = "<html><body><img src='" + img + "' /></body></html>";
@@ -355,8 +485,20 @@
355 485 if(img !== ''){
356 486 html = "<html><body><img src='" + img + "' /></body></html>";
357 487 }
358 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 + }
359 501 break;
360 502 }
361 503 });
362 504