PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.4.5
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.4.5
4.0.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 All 149 releases
← All changes | js/render-google.js +171 -20 3.1.23.4.5 View file →
@@ -7,10 +7,22 @@
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) {
15 + var chart = all_charts[id];
16 + var hasAnnotation = false;
17 + if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined'){
18 + hasAnnotation = chart.series.length - chart.settings.series.length > 1;
19 + }
20 + // re-render the chart only if it doesn't have annotations and it is on the front-end
21 + // this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
22 + if(hasAnnotation){
23 + return;
24 + }
13 25 renderSpecificChart(id, all_charts[id]);
14 26 }
15 27
16 28 function renderSpecificChart(id, chart) {
@@ -18,8 +30,9 @@
18 30
19 31 if(chart.library !== 'google'){
20 32 return;
21 33 }
34 + rendered_charts[id] = 'yes';
22 35
23 36 series = chart.series;
24 37 data = chart.data;
25 38 settings = chart.settings;
@@ -32,8 +45,11 @@
32 45
33 46 render = objects[id] || null;
34 47 if (!render) {
35 48 switch (chart.type) {
49 + case "tabular":
50 + render = "Table";
51 + break;
36 52 case "gauge":
37 53 case "table":
38 54 case "timeline":
39 55 render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
@@ -51,8 +67,42 @@
51 67 settings['animation']['startup'] = true;
52 68 settings['animation']['duration'] = parseInt(settings['animation']['duration']);
53 69 }
54 70
71 + // mark roles for series that have specified a role
72 + // and then remove them from future processing
73 + // and also adjust the indices of the series array so that
74 + // the ones with a role are ignored
75 + // e.g. if there are 6 columns (0-5) out of which 1, 3 and 5 are annotations
76 + // the final series will only include 0, 2, 4 (reindexed as 0, 1, 2)
77 + if (settings.series) {
78 + var adjusted_series = [];
79 + for (i = 0; i < settings.series.length; i++) {
80 + if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
81 + continue;
82 + }
83 + if(typeof settings.series[i].role !== 'undefined'){
84 + table.setColumnProperty(i + 1, 'role', settings.series[i].role);
85 + if(settings.series[i].role === '') {
86 + adjusted_series.push(settings.series[i]);
87 + }
88 + }
89 + }
90 + if(adjusted_series.length > 0){
91 + settings.series = adjusted_series;
92 + }
93 + }
94 +
95 + if ( settings['explorer_enabled'] && settings['explorer_enabled'] == 'true' ) { // jshint ignore:line
96 + var $explorer = {};
97 + $explorer['keepInBounds'] = true;
98 +
99 + if ( settings['explorer_actions'] ) {
100 + $explorer['actions'] = settings['explorer_actions'];
101 + }
102 + settings['explorer'] = $explorer;
103 + }
104 +
55 105 switch (chart.type) {
56 106 case 'pie':
57 107 if (settings.slices) {
58 108 for (i in settings.slices) {
@@ -86,8 +136,9 @@
86 136 settings['region'] = 'world';
87 137 }
88 138 break;
89 139 case 'table':
140 + case 'tabular':
90 141 if (parseInt(settings['pagination']) !== 1)
91 142 {
92 143 delete settings['pageSize'];
93 144 }
@@ -93,8 +144,11 @@
93 144 }
94 145 break;
95 146 case 'gauge':
96 147 break;
148 + case 'bubble':
149 + settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
150 + break;
97 151 case 'timeline':
98 152 settings['timeline'] = [];
99 153 settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
100 154 settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
@@ -131,8 +185,9 @@
131 185 case 'area':
132 186 case 'scatter':
133 187 case 'candlestick':
134 188 case 'column':
189 + case 'combo':
135 190 axis = settings.hAxis;
136 191 break;
137 192 case 'bar':
138 193 axis = settings.vAxis;
@@ -172,16 +227,30 @@
172 227
173 228 for (i = 0; i < data.length; i++) {
174 229 row = [];
175 230 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 - }
231 + switch(series[j].type) {
232 + case 'string':
233 + if(data[i][j] === ''){
234 + data[i][j] = null;
235 + }
236 + break;
237 + case 'boolean':
238 + if (typeof data[i][j] === 'string'){
239 + data[i][j] = data[i][j] === 'true';
240 + }
241 + break;
242 + case 'date':
243 + // fall-through.
244 + case 'datetime':
245 + date = new Date(data[i][j]);
246 + data[i][j] = null;
247 + if (Object.prototype.toString.call(date) === "[object Date]") {
248 + if (!isNaN(date.getTime())) {
249 + data[i][j] = date;
250 + }
251 + }
252 + break;
184 253 }
185 254 row.push(data[i][j]);
186 255 }
187 256 table.addRow(row);
@@ -199,9 +268,9 @@
199 268 }
200 269 break;
201 270 default:
202 271 for (i = 0; i < settings.series.length; i++) {
203 - if (!series[i + 1]) {
272 + if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
204 273 continue;
205 274 }
206 275 format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
207 276 }
@@ -209,12 +278,18 @@
209 278 }
210 279 } else if (chart.type === 'pie' && settings.format && settings.format !== '') {
211 280 format_data(id, table, 'number', settings.format, 1);
212 281 }
282 +
283 + if(settings.hAxis && series[0]) {
284 + format_data(id, table, series[0].type, settings.hAxis.format, 0);
285 + }
286 +
213 287 override(settings);
214 288
215 289 gv.events.addListener(render, 'ready', function () {
216 290 var arr = id.split('-');
291 + __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
217 292 try{
218 293 var img = render.getImageURI();
219 294 __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
220 295 $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
@@ -222,8 +297,10 @@
222 297 console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
223 298 }
224 299 });
225 300
301 + $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
302 +
226 303 render.draw(table, settings);
227 304 }
228 305
229 306 function format_data(id, table, type, format, index) {
@@ -269,16 +346,8 @@
269 346 renderChart(id);
270 347 }
271 348 }
272 349
273 - if(typeof visualizer !== 'undefined'){
274 - // called while updating the chart.
275 - visualizer.update = function(){
276 - renderChart('canvas');
277 - };
278 - }
279 -
280 -
281 350 var resizeTimeout;
282 351
283 352 $(document).ready(function() {
284 353 $(window).resize(function() {
@@ -288,9 +357,9 @@
288 357
289 358 resizeHiddenContainers(true);
290 359 });
291 360
292 - $(window).load(function(){
361 + $(window).on('load', function(){
293 362 resizeHiddenContainers(true);
294 363 });
295 364
296 365 function resizeHiddenContainers(everytime){
@@ -319,14 +388,59 @@
319 388 });
320 389 }
321 390
322 391 $('body').on('visualizer:render:chart:start', function(event, v){
392 + var $chart_types = ['corechart', 'geochart', 'gauge', 'table', 'timeline'];
393 + if(v.is_front == true){ // jshint ignore:line
394 + // check what all chart types to load.
395 + $chart_types = [];
396 + $.each(v.charts, function(i, c){
397 + var $type = c.type;
398 + switch($type){
399 + case 'bar':
400 + case 'column':
401 + case 'line':
402 + case 'area':
403 + case 'stepped area':
404 + case 'bubble':
405 + case 'pie':
406 + case 'donut':
407 + case 'combo':
408 + case 'candlestick':
409 + case 'histogram':
410 + case 'scatter':
411 + case 'bubble':
412 + $type = 'corechart';
413 + break;
414 + case 'geo':
415 + $type = 'geochart';
416 + break;
417 + case 'tabular':
418 + case 'table':
419 + $type = 'table';
420 + break;
421 + case 'dataTable':
422 + case 'polarArea':
423 + case 'radar':
424 + $type = null;
425 + break;
426 + }
427 + if($type != null){
428 + $chart_types.push($type);
429 + }
430 + });
431 + }
432 +
323 433 objects = {};
324 - google.charts.load("current", {packages: ["corechart", "geochart", "gauge", "table", "timeline"], mapsApiKey: v.map_api_key, 'language' : v.language});
434 + google.charts.load("current", {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language});
325 435 google.charts.setOnLoadCallback(function() {
326 436 gv = google.visualization;
327 437 all_charts = v.charts;
328 - render();
438 + if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
439 + renderChart(v.id);
440 + } else {
441 + render();
442 + }
329 443 });
330 444 });
331 445
332 446 $('body').on('visualizer:render:specificchart:start', function(event, v){
@@ -332,7 +446,44 @@
332 446 $('body').on('visualizer:render:specificchart:start', function(event, v){
333 447 objects = {};
334 448 gv = google.visualization;
335 449 renderSpecificChart(v.id, v.chart);
450 + });
451 +
452 + $('body').on('visualizer:render:currentchart:update', function(event, v){
453 + renderChart('canvas');
454 + });
455 +
456 + // front end actions
457 + // 'image' is also called from the library
458 + $('body').on('visualizer:action:specificchart', function(event, v){
459 + var id = v.id;
460 + if(typeof rendered_charts[id] === 'undefined'){
461 + return;
462 + }
463 + var arr = id.split('-');
464 + var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
465 + switch(v.action){
466 + case 'print':
467 + // for charts that have no rendered image defined, we print the data instead.
468 + var html = v.data;
469 + if(img !== ''){
470 + html = "<html><body><img src='" + img + "' /></body></html>";
471 + }
472 + $('body').trigger('visualizer:action:specificchart:defaultprint', {data: html});
473 + break;
474 + case 'image':
475 + if(img !== ''){
476 + var $a = $("<a>"); // jshint ignore:line
477 + $a.attr("href", img);
478 + $("body").append($a);
479 + $a.attr("download", v.dataObj.name);
480 + $a[0].click();
481 + $a.remove();
482 + }else{
483 + console.warn("No image generated");
484 + }
485 + break;
486 + }
336 487 });
337 488
338 489 })(jQuery);