PluginProbe
Chartify – WordPress Chart Plugin / 3.8.1
Chartify – WordPress Chart Plugin v3.8.1
3.8.1 3.8.0 3.7.9 3.7.8 3.7.7 3.7.6 3.7.5 trunk 1.0.0 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 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.1.4 3.1.5 All 84 releases
← All changes | admin/js/chart-builder-admin-google.js +431 -35 3.1.4 → 3.8.1 View file →
@@ -163,9 +163,9 @@
163 163 });
164 164
165 165 _this.$el.find('.'+_this.htmlClassPrefix+'toggle-hidden-option').on('change', function () {
166 166 // var animationOptions = _this.$el.find('.'+_this.htmlClassPrefix+'hidden-options-section');
167 - var currentSettings = $(this).parents('.' + _this.htmlClassPrefix + 'settings-data-main-wrap')
167 + var currentSettings = $(this).parents('.' + _this.htmlClassPrefix + 'settings-data-main-wrap');
168 168 var hiddenSection = currentSettings.find('.' + _this.htmlClassPrefix + 'hidden-options-section');
169 169 var notHiddenSection = currentSettings.find('.' + _this.htmlClassPrefix + 'not-hidden-options-section');
170 170
171 171 if ($(this).is(':checked')) {
@@ -183,8 +183,9 @@
183 183 });
184 184
185 185 _this.$el.on("click", '.'+_this.htmlClassPrefix+'charts-change-type-type', function(){
186 186 _this.chartType = $(this).attr('data-type');
187 + _this.configureOptions();
187 188 _this.changeChartType();
188 189 _this.$el.find('.'+_this.htmlClassPrefix+'charts-change-type-type').css('backgroundColor', '#e7e7e7');
189 190 $(this).css('backgroundColor', '#008cff63');
190 191 });
@@ -314,8 +315,14 @@
314 315 _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-radius', $(this).val() + 'px');
315 316 _this.drawChartFunction(_this.chartData, _this.chartOptions);
316 317 });
317 318
319 + _this.$el.find('#'+_this.htmlClassPrefix+'option-border-style').on('change', function () {
320 + _this.chartSourceData.settings.border_style = $(this).val();
321 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('border-style', $(this).val());
322 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
323 + });
324 +
318 325 _this.$el.find('#'+_this.htmlClassPrefix+'option-border-width-with-title').on('input', function () {
319 326 _this.chartSourceData.settings.border_width_with_title = $(this).val();
320 327 _this.$el.find('.'+_this.htmlClassPrefix+'container').css('border-width', $(this).val() + 'px');
321 328 _this.drawChartFunction(_this.chartData, _this.chartOptions);
@@ -360,9 +367,9 @@
360 367 _this.$el.find('#'+_this.htmlClassPrefix+'option-box-shadow').on('change', function () {
361 368 if ($(this).is(':checked')) {
362 369 _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', '2px 2px 10px 2px ' + _this.chartSourceData.settings.border_color);
363 370 } else {
364 - _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', '');
371 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').css('box-shadow', 'unset');
365 372 }
366 373 _this.drawChartFunction(_this.chartData, _this.chartOptions);
367 374 });
368 375
@@ -540,12 +547,23 @@
540 547 });
541 548
542 549 _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-format').on('change', function () {
543 550 _this.chartOptions.hAxis.format = $(this).val();
551 + if(_this.chartOptions.hAxis.format == 'percent'){
552 + _this.$el.find('.option-haxis-enable-divide-percent').show(300);
553 + }else{
554 + _this.$el.find('.option-haxis-enable-divide-percent').hide(300);
555 + }
544 556 _this.chartSourceData.settings.haxis_format = _this.chartOptions.hAxis.format;
545 557 _this.drawChartFunction(_this.chartData, _this.chartOptions);
546 558 });
547 559
560 + _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-enable-divide-percent').on('input', function () {
561 + _this.chartOptions.hAxis.enableDividePercent = $(this).is(':checked');
562 + _this.chartSourceData.settings.haxis_enable_divide_percent = _this.chartOptions.hAxis.enableDividePercent ? 'checked' : '';
563 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
564 + });
565 +
548 566 _this.$el.find('#'+_this.htmlClassPrefix+'option-haxis-label-font-size').on('input', function () {
549 567 _this.chartOptions.hAxis.titleTextStyle.fontSize = $(this).val();
550 568 _this.chartSourceData.settings.haxis_label_font_size = _this.chartOptions.hAxis.titleTextStyle.fontSize;
551 569 _this.drawChartFunction(_this.chartData, _this.chartOptions);
@@ -649,12 +667,23 @@
649 667 });
650 668
651 669 _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-format').on('change', function () {
652 670 _this.chartOptions.vAxis.format = $(this).val();
671 + if(_this.chartOptions.vAxis.format == 'percent'){
672 + _this.$el.find('.option-vaxis-enable-divide-percent').show(300);
673 + }else{
674 + _this.$el.find('.option-vaxis-enable-divide-percent').hide(300);
675 + }
653 676 _this.chartSourceData.settings.vaxis_format = _this.chartOptions.vAxis.format;
654 677 _this.drawChartFunction(_this.chartData, _this.chartOptions);
655 678 });
656 679
680 +
681 + _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-enable-divide-percent').on('input', function () {
682 + _this.chartOptions.vAxis.enableDividePercent = $(this).is(':checked');
683 + _this.chartSourceData.settings.vaxis_enable_divide_percent = _this.chartOptions.vaxis.enableDividePercent ? 'checked' : '';
684 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
685 + });
657 686 _this.$el.find('#'+_this.htmlClassPrefix+'option-vaxis-label-font-size').on('input', function () {
658 687 _this.chartOptions.vAxis.titleTextStyle.fontSize = $(this).val();
659 688 _this.chartSourceData.settings.vaxis_label_font_size = _this.chartOptions.vAxis.titleTextStyle.fontSize;
660 689 _this.drawChartFunction(_this.chartData, _this.chartOptions);
@@ -719,8 +748,153 @@
719 748 _this.chartSourceData.settings.vaxis_minor_gridlines_color = _this.chartOptions.vAxis.minorGridlines.color;
720 749 _this.drawChartFunction(_this.chartData, _this.chartOptions);
721 750 });
722 751
752 + //title
753 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-gap').on('input', function () {
754 + _this.chartSourceData.settings.title_gap = $(this).val();
755 + _this.$el.find('.'+_this.htmlClassPrefix+'header-container').attr('style', 'margin-bottom: ' + $(this).val() + 'px' + ' !important;');
756 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
757 + });
758 +
759 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-color').on('input', function () {
760 + _this.chartSourceData.settings.title_color = $(this).val();
761 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('color', $(this).val());
762 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
763 + });
764 +
765 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-font-size').on('input', function () {
766 + _this.chartSourceData.settings.title_font_size = $(this).val();
767 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('font-size', $(this).val() + 'px');
768 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
769 + });
770 +
771 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-bold').on('change', function () {
772 + _this.chartSourceData.settings.title_bold = $(this).is(':checked') ? 'checked' : '';
773 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('font-weight', $(this).is(':checked') ? 'bold' : 'normal');
774 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
775 + });
776 +
777 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-italic').on('change', function () {
778 + _this.chartSourceData.settings.title_italic = $(this).is(':checked') ? 'checked' : '';
779 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('font-style', $(this).is(':checked') ? 'italic' : 'normal');
780 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
781 + });
782 +
783 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-shadow').on('change', function () {
784 + if ($(this).is(':checked')) {
785 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-shadow', '2px 2px 5px ' + _this.chartSourceData.settings.title_shadow_color);
786 + } else {
787 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-shadow', 'unset');
788 + }
789 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
790 + });
791 +
792 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-shadow-color').on('input', function () {
793 + if (_this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-shadow').is(':checked')) {
794 + _this.chartSourceData.settings.title_shadow_color = $(this).val();
795 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-shadow', '2px 2px 5px ' + $(this).val());
796 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
797 + }
798 + });
799 +
800 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-position').on('change', function () {
801 + _this.chartSourceData.settings.title_position = $(this).val();
802 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-align', $(this).val());
803 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
804 + });
805 +
806 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-transform').on('change', function () {
807 + _this.chartSourceData.settings.title_transform = $(this).val();
808 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-transform', $(this).val());
809 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
810 + });
811 +
812 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-text-decoration').on('change', function () {
813 + _this.chartSourceData.settings.title_decoration = $(this).val();
814 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('text-decoration', $(this).val());
815 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
816 + });
817 +
818 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-letter-spacing').on('input', function () {
819 + _this.chartSourceData.settings.title_letter_spacing = $(this).val();
820 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('letter-spacing', $(this).val() + 'px');
821 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
822 + });
823 +
824 + _this.$el.find('#'+_this.htmlClassPrefix+'option-title-gap-description').on('input', function () {
825 + _this.chartSourceData.settings.title_gap_description = $(this).val();
826 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').css('margin-bottom', $(this).val() + 'px');
827 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
828 + });
829 +
830 + //description
831 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-color').on('input', function () {
832 + _this.chartSourceData.settings.description_color = $(this).val();
833 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('color', $(this).val());
834 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
835 + });
836 +
837 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-font-size').on('input', function () {
838 + _this.chartSourceData.settings.description_font_size = $(this).val();
839 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('font-size', $(this).val() + 'px');
840 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
841 + });
842 +
843 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-bold').on('change', function () {
844 + _this.chartSourceData.settings.description_bold = $(this).is(':checked') ? 'checked' : '';
845 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('font-weight', $(this).is(':checked') ? 'bold' : 'normal');
846 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
847 + });
848 +
849 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-italic').on('change', function () {
850 + _this.chartSourceData.settings.description_italic = $(this).is(':checked') ? 'checked' : '';
851 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('font-style', $(this).is(':checked') ? 'italic' : 'normal');
852 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
853 + });
854 +
855 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-shadow').on('change', function () {
856 + if ($(this).is(':checked')) {
857 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-shadow', '2px 2px 5px ' + _this.chartSourceData.settings.description_shadow_color);
858 + } else {
859 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-shadow', 'unset');
860 + }
861 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
862 + });
863 +
864 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-shadow-color').on('input', function () {
865 + if (_this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-shadow').is(':checked')) {
866 + _this.chartSourceData.settings.description_shadow_color = $(this).val();
867 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-shadow', '2px 2px 5px ' + $(this).val());
868 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
869 + }
870 + });
871 +
872 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-position').on('change', function () {
873 + _this.chartSourceData.settings.description_position = $(this).val();
874 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-align', $(this).val());
875 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
876 + });
877 +
878 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-transform').on('change', function () {
879 + _this.chartSourceData.settings.description_transform = $(this).val();
880 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-transform', $(this).val());
881 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
882 + });
883 +
884 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-text-decoration').on('change', function () {
885 + _this.chartSourceData.settings.description_decoration = $(this).val();
886 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('text-decoration', $(this).val());
887 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
888 + });
889 +
890 + _this.$el.find('#'+_this.htmlClassPrefix+'option-description-letter-spacing').on('input', function () {
891 + _this.chartSourceData.settings.description_letter_spacing = $(this).val();
892 + _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').css('letter-spacing', $(this).val() + 'px');
893 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
894 + });
895 +
896 +
723 897 // animation settings
724 898 _this.$el.find('#'+_this.htmlClassPrefix+'option-enable-animation').on('change', function () {
725 899 if ($(this).is(':checked')) {
726 900 _this.chartOptions.animation = {
@@ -1011,9 +1185,9 @@
1011 1185 _this.setOrgChartCustomStyles();
1012 1186 }
1013 1187 });
1014 1188
1015 - _this.$el.find('#'+_this.htmlClassPrefix+'option-org-seslected-classname').on('input', function () {
1189 + _this.$el.find('#'+_this.htmlClassPrefix+'option-org-selected-classname').on('input', function () {
1016 1190 _this.chartOptions.selectedNodeClass = $(this).val();
1017 1191 _this.chartSourceData.settings.org_selected_classname = _this.chartOptions.selectedNodeClass;
1018 1192 _this.drawChartFunction(_this.chartData, _this.chartOptions);
1019 1193 });
@@ -1075,8 +1249,16 @@
1075 1249 _this.drawChartFunction(_this.chartData, _this.chartOptions);
1076 1250 }
1077 1251 });
1078 1252
1253 + _this.$el.find('.'+_this.htmlClassPrefix+'option-series-format').on('input', function () {
1254 + // if (!_this.$el.find('#'+_this.htmlClassPrefix+'option-enable-row-settings').is(':checked')) {
1255 + var id = $(this).attr('data-series-id');
1256 + _this.chartSourceData.settings.series_format[id] = $(this).val();
1257 + _this.drawChartFunction(_this.chartData, _this.chartOptions);
1258 + // }
1259 + });
1260 +
1079 1261 _this.$el.find('.'+_this.htmlClassPrefix+'option-series-visible-in-legend').on('input', function () {
1080 1262 if (_this.chartSourceData.source[0].length > 2) {
1081 1263 var id = $(this).attr('data-series-id');
1082 1264 _this.chartOptions.series[id].visibleInLegend = $(this).is(':checked');
@@ -1381,10 +1563,12 @@
1381 1563
1382 1564 var settings = _this.chartSourceData.settings;
1383 1565 var nSettings = _this.configOptionsForCharts(settings);
1384 1566
1567 + var userLocale = navigator.language || navigator.userLanguage || 'en';
1568 +
1385 1569 /* == Google part == */
1386 - google.charts.load('current', {'packages':['corechart']});
1570 + google.charts.load('current', {'packages':['corechart'], 'language': userLocale});
1387 1571 google.charts.setOnLoadCallback(drawChart);
1388 1572
1389 1573 function drawChart() {
1390 1574 _this.chartData = isChangedType ? _this.chartData : google.visualization.arrayToDataTable( dataTypes );
@@ -1447,8 +1631,12 @@
1447 1631 _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + _this.chartType) );
1448 1632
1449 1633 _this.chartObj.draw( _this.chartData, _this.chartOptions );
1450 1634 _this.resizeChart();
1635 + // Fix ARIA attributes for accessibility compliance
1636 + setTimeout(function() {
1637 + _this.fixAriaAttributes();
1638 + }, 100);
1451 1639 }
1452 1640 /* */
1453 1641 }
1454 1642
@@ -1460,10 +1648,12 @@
1460 1648
1461 1649 var settings = _this.chartSourceData.settings;
1462 1650 var nSettings = _this.configOptionsForCharts(settings);
1463 1651
1652 + var userLocale = navigator.language || navigator.userLanguage || 'en';
1653 +
1464 1654 /* == Google part == */
1465 - google.charts.load('current', {'packages':['corechart']});
1655 + google.charts.load('current', {'packages':['corechart'], 'language': userLocale});
1466 1656 google.charts.setOnLoadCallback(drawChart);
1467 1657
1468 1658 function drawChart() {
1469 1659 dataTypes = nSettings.enableRowSettings ? _this.setRowOptions(dataTypes, nSettings, true) : dataTypes;
@@ -1592,16 +1782,56 @@
1592 1782 if (nSettings.enableAnimation) {
1593 1783 _this.chartOptions.animation = {
1594 1784 startup: nSettings.animationStartup,
1595 1785 duration: nSettings.animationDuration,
1596 - easing: nSettings.animationEasing,
1786 + easing: nSettings.animationEasing,
1597 1787 }
1598 1788 }
1599 -
1789 + if(!isChangedType){
1790 + if(_this.chartOptions.hAxis.format == 'percent' && nSettings.hAxisEnableDividePercent){
1791 + for (var i = 0; i < dataTypes[0].length - 1; i++) {
1792 + nSettings.seriesFormat[i] = '#%';
1793 + }
1794 +
1795 + for (var row = 0; row < _this.chartData.getNumberOfRows(); row++) {
1796 + for (var col = 0; col < _this.chartData.getNumberOfColumns(); col++) {
1797 + var value = _this.chartData.getValue(row, col);
1798 + if (typeof value === 'number' && !isNaN(value)) {
1799 +
1800 + var updatedValue = value / 100;
1801 + _this.chartData.setValue(row, col, updatedValue);
1802 + }
1803 + }
1804 + }
1805 +
1806 + }else {
1807 + for (var i = 0; i < dataTypes[0].length - 1; i++) {
1808 + if (nSettings.seriesFormat[i] === '#%') {
1809 + nSettings.seriesFormat[i] = '';
1810 + }
1811 + }
1812 + }
1813 + }
1814 +
1815 + for (var i = 1; i < dataTypes[0].length; i++) {
1816 +
1817 + if (nSettings.seriesFormat[i - 1]) {
1818 + var formatter = new google.visualization.NumberFormat({
1819 + pattern: nSettings.seriesFormat[i - 1]
1820 + });
1821 + formatter.format(_this.chartData, i);
1822 + }
1823 +
1824 +
1825 + }
1600 1826 _this.chartObj = new google.visualization.BarChart(document.getElementById(_this.htmlClassPrefix + _this.chartType));
1601 1827
1602 1828 _this.chartObj.draw( _this.chartData, _this.chartOptions );
1603 1829 _this.resizeChart();
1830 + // Fix ARIA attributes for accessibility compliance
1831 + setTimeout(function() {
1832 + _this.fixAriaAttributes();
1833 + }, 100);
1604 1834 }
1605 1835 /* */
1606 1836 }
1607 1837
@@ -1614,10 +1844,12 @@
1614 1844
1615 1845 var settings = _this.chartSourceData.settings;
1616 1846 var nSettings = _this.configOptionsForCharts(settings);
1617 1847
1848 + var userLocale = navigator.language || navigator.userLanguage || 'en';
1849 +
1618 1850 /* == Google part == */
1619 - google.charts.load('current', {'packages':['corechart']});
1851 + google.charts.load('current', {'packages':['corechart'], 'language': userLocale});
1620 1852 google.charts.setOnLoadCallback(drawChart);
1621 1853
1622 1854 function drawChart() {
1623 1855 dataTypes = nSettings.enableRowSettings ? _this.setRowOptions(dataTypes, nSettings, true) : dataTypes;
@@ -1750,13 +1982,48 @@
1750 1982 duration: nSettings.animationDuration,
1751 1983 easing: nSettings.animationEasing,
1752 1984 }
1753 1985 }
1754 -
1986 + if(!isChangedType){
1987 + if(_this.chartOptions.vAxis.format == 'percent' && nSettings.vAxisEnableDividePercent){
1988 + for (var i = 0; i < dataTypes[0].length - 1; i++) {
1989 + nSettings.seriesFormat[i] = '#%';
1990 + }
1991 +
1992 +
1993 + for (var row = 0; row < _this.chartData.getNumberOfRows(); row++) {
1994 + for (var col = 0; col < _this.chartData.getNumberOfColumns(); col++) {
1995 + var value = _this.chartData.getValue(row, col);
1996 + if (typeof value === 'number' && !isNaN(value)) {
1997 + var updatedValue = value / 100;
1998 + _this.chartData.setValue(row, col, updatedValue);
1999 + }
2000 + }
2001 + }
2002 + }else {
2003 + for (var i = 0; i < dataTypes[0].length - 1; i++) {
2004 + if (nSettings.seriesFormat[i] === '#%') {
2005 + nSettings.seriesFormat[i] = '';
2006 + }
2007 + }
2008 + }
2009 + }
2010 + for (var i = 1; i < dataTypes[0].length; i++) {
2011 + if (nSettings.seriesFormat[i - 1]) {
2012 + var formatter = new google.visualization.NumberFormat({
2013 + pattern: nSettings.seriesFormat[i - 1]
2014 + });
2015 + formatter.format(_this.chartData, i);
2016 + }
2017 + }
1755 2018 _this.chartObj = new google.visualization.ColumnChart(document.getElementById(_this.htmlClassPrefix + _this.chartType));
1756 2019
1757 2020 _this.chartObj.draw( _this.chartData, _this.chartOptions );
1758 2021 _this.resizeChart();
2022 + // Fix ARIA attributes for accessibility compliance
2023 + setTimeout(function() {
2024 + _this.fixAriaAttributes();
2025 + }, 100);
1759 2026 }
1760 2027 /* */
1761 2028 }
1762 2029
@@ -1768,10 +2035,12 @@
1768 2035
1769 2036 var settings = _this.chartSourceData.settings;
1770 2037 var nSettings = _this.configOptionsForCharts(settings);
1771 2038
2039 + var userLocale = navigator.language || navigator.userLanguage || 'en';
2040 +
1772 2041 /* == Google part == */
1773 - google.charts.load('current', {'packages':['corechart']});
2042 + google.charts.load('current', {'packages':['corechart'], 'language': userLocale});
1774 2043 google.charts.setOnLoadCallback(drawChart);
1775 2044
1776 2045 function drawChart() {
1777 2046 dataTypes = nSettings.enableRowSettings ? _this.setRowOptions(dataTypes, nSettings, true) : dataTypes;
@@ -1917,12 +2186,51 @@
1917 2186 easing: nSettings.animationEasing,
1918 2187 }
1919 2188 }
1920 2189
2190 + if(!isChangedType){
2191 + if(_this.chartOptions.vAxis.format == 'percent' && nSettings.vAxisEnableDividePercent){
2192 + for (var i = 0; i < dataTypes[0].length - 1; i++) {
2193 + nSettings.seriesFormat[i] = '#%';
2194 +
2195 + }
2196 + for (var row = 0; row < _this.chartData.getNumberOfRows(); row++) {
2197 + for (var col = 0; col < _this.chartData.getNumberOfColumns(); col++) {
2198 + var value = _this.chartData.getValue(row, col);
2199 + if (typeof value === 'number' && !isNaN(value)) {
2200 + var updatedValue = value / 100;
2201 + _this.chartData.setValue(row, col, updatedValue);
2202 + }
2203 + }
2204 + }
2205 +
2206 + }else {
2207 + for (var i = 0; i < dataTypes[0].length - 1; i++) {
2208 + if (nSettings.seriesFormat[i] === '#%') {
2209 + nSettings.seriesFormat[i] = '';
2210 + }
2211 + }
2212 + }
2213 + }
2214 +
2215 + for (var i = 1; i < dataTypes[0].length; i++) {
2216 + if (nSettings.seriesFormat[i - 1]) {
2217 + var formatter = new google.visualization.NumberFormat({
2218 + pattern: nSettings.seriesFormat[i - 1]
2219 + });
2220 + formatter.format(_this.chartData, i);
2221 + }
2222 + }
2223 +
2224 +
1921 2225 _this.chartObj = new google.visualization.LineChart(document.getElementById(_this.htmlClassPrefix + _this.chartType));
1922 2226
1923 2227 _this.chartObj.draw( _this.chartData, _this.chartOptions );
1924 2228 _this.resizeChart();
2229 + // Fix ARIA attributes for accessibility compliance
2230 + setTimeout(function() {
2231 + _this.fixAriaAttributes();
2232 + }, 100);
1925 2233 }
1926 2234 /* */
1927 2235 }
1928 2236
@@ -1934,10 +2242,12 @@
1934 2242
1935 2243 var settings = _this.chartSourceData.settings;
1936 2244 var nSettings = _this.configOptionsForCharts(settings);
1937 2245
2246 + var userLocale = navigator.language || navigator.userLanguage || 'en';
2247 +
1938 2248 /* == Google part == */
1939 - google.charts.load('current', {'packages':['corechart']});
2249 + google.charts.load('current', {'packages':['corechart'], 'language': userLocale});
1940 2250 google.charts.setOnLoadCallback(drawChart);
1941 2251
1942 2252 function drawChart() {
1943 2253 _this.chartData = isChangedType ? _this.chartData : google.visualization.arrayToDataTable( dataTypes );
@@ -2001,8 +2311,12 @@
2001 2311 _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + _this.chartType) );
2002 2312
2003 2313 _this.chartObj.draw( _this.chartData, _this.chartOptions );
2004 2314 _this.resizeChart();
2315 + // Fix ARIA attributes for accessibility compliance
2316 + setTimeout(function() {
2317 + _this.fixAriaAttributes();
2318 + }, 100);
2005 2319 }
2006 2320 /* */
2007 2321 }
2008 2322
@@ -2015,10 +2329,12 @@
2015 2329
2016 2330 var settings = _this.chartSourceData.settings;
2017 2331 var nSettings = _this.configOptionsForCharts(settings);
2018 2332
2333 + var userLocale = navigator.language || navigator.userLanguage || 'en';
2334 +
2019 2335 /* == Google part == */
2020 - google.charts.load('current', {'packages':['orgchart']});
2336 + google.charts.load('current', {'packages':['orgchart'], 'language': userLocale});
2021 2337 google.charts.setOnLoadCallback(drawChart);
2022 2338
2023 2339 function drawChart() {
2024 2340 _this.chartDataArray = isChangedType ? _this.chartDataArray : dataTypes;
@@ -2053,8 +2369,12 @@
2053 2369
2054 2370 _this.chartObj.draw( view, _this.chartOptions );
2055 2371 _this.resizeChart();
2056 2372 _this.setOrgChartCustomStyles();
2373 + // Fix ARIA attributes for accessibility compliance
2374 + setTimeout(function() {
2375 + _this.fixAriaAttributes();
2376 + }, 100);
2057 2377 }
2058 2378
2059 2379 _this.$el.on('click', '.google-visualization-orgchart-node-small, .google-visualization-orgchart-node-medium, .google-visualization-orgchart-node-large', function(e) {
2060 2380 if (nSettings.orgSelectedClassname !== '') {
@@ -2167,8 +2487,10 @@
2167 2487 newSettings.hAxisSlantedTextAngle = settings['haxis_slanted_text_angle'];
2168 2488 newSettings.hAxisShowTextEvery = settings['haxis_show_text_every'];
2169 2489 newSettings.vAxisFormat = settings['vaxis_format'];
2170 2490 newSettings.hAxisFormat = settings['haxis_format'];
2491 + newSettings.hAxisEnableDividePercent = (settings['haxis_enable_divide_percent'] == 'checked' && settings['haxis_format'] == 'percent') ? true : false;
2492 + newSettings.vAxisEnableDividePercent = (settings['vaxis_enable_divide_percent'] == 'checked' && settings['vaxis_format'] == 'percent') ? true : false;
2171 2493 newSettings.hAxisMinValue = settings['haxis_min_value'];
2172 2494 newSettings.hAxisMaxValue = settings['haxis_max_value'];
2173 2495 newSettings.vAxisMinValue = settings['vaxis_min_value'];
2174 2496 newSettings.vAxisMaxValue = settings['vaxis_max_value'];
@@ -2193,8 +2515,9 @@
2193 2515 newSettings.animationDuration = settings['animation_duration'];
2194 2516 newSettings.animationStartup = (settings['animation_startup'] == 'checked') ? true : false;
2195 2517 newSettings.animationEasing = settings['animation_easing'];
2196 2518 newSettings.seriesColor = settings['series_color'];
2519 + newSettings.seriesFormat = settings['series_format'];
2197 2520 newSettings.seriesVisibleInLegend = settings['series_visible_in_legend'];
2198 2521 newSettings.seriesLineWidth = settings['series_line_width'];
2199 2522 newSettings.seriesPointSize = settings['series_point_size'];
2200 2523 newSettings.seriesPointShape = settings['series_point_shape'];
@@ -2307,9 +2630,9 @@
2307 2630 'border' : 'none',
2308 2631 'outline' : borderWidth + 'px solid ' + borderColor,
2309 2632 });
2310 2633 }
2311 -
2634 +
2312 2635 if (orgSelectedClassname != '') {
2313 2636 var selectedNode = _this.$el.find('.' + orgSelectedClassname);
2314 2637 selectedNode.css({
2315 2638 'background-color' : selectedBgColor,
@@ -2321,8 +2644,9 @@
2321 2644 // 'outline' : borderWidth + 'px solid ' + borderColor,
2322 2645 });
2323 2646 }
2324 2647
2648 +
2325 2649 var description = _this.$el.find('.' + _this.htmlClassPrefix + 'org-chart-tree-description');
2326 2650 description.css({
2327 2651 'color' : descriptionColor,
2328 2652 'font-size' : descriptionSize + 'px',
@@ -2394,34 +2718,45 @@
2394 2718 // Converting chart data for org chart type
2395 2719 ChartBuilderGoogleCharts.prototype.orgChartConvertData = function( data ){
2396 2720 var _this = this;
2397 2721 var dataTypes = [['Name', 'Manager', 'Tooltip', 'Url']];
2722 +
2723 + var ordering = (_this.chartSourceData && Array.isArray(_this.chartSourceData.source_ordering))
2724 + ? _this.chartSourceData.source_ordering.slice()
2725 + : [];
2726 +
2727 + ordering = ordering.map(String);
2728 +
2729 + Object.keys(data).forEach(function(key) {
2730 + if (!ordering.includes(key)) {
2731 + ordering.push(key);
2732 + }
2733 + });
2734 +
2398 2735 // var name = "";
2399 2736 // Collect data in new array for chart rendering
2400 - for ( var key in data ) {
2401 - if ( data.hasOwnProperty( key ) ) {
2402 - if (key != 0) {
2403 - var name = data[key][0];
2404 - var description = data[key][1];
2405 - var image = (data[key].length > 6) ? data[key][2] : '';
2406 - var parent_name = (data[key].length > 6) ? data[key][3] : data[key][2];
2407 - var tooltip = (data[key].length > 6) ? data[key][4] : data[key][3];
2408 - var url = (data[key].length > 6) ? data[key][5] : '';
2409 -
2410 - if (description) {
2411 - name += _this.orgChartFormatName(description);
2412 - }
2413 - if (image && image != '') {
2414 - name = _this.orgChartFormatImage(image) + name;
2415 - }
2416 - name = {'v': data[key][0], 'f': name};
2417 - dataTypes.push([
2418 - name, parent_name, tooltip, url
2419 - ]);
2420 - }
2737 + ordering.forEach(function(key) {
2738 + if (!data.hasOwnProperty(key) || key == 0) return;
2739 +
2740 + var row = data[key];
2741 + var name = row[0];
2742 + var description = row[1];
2743 + var image = (row.length > 6) ? row[2] : '';
2744 + var parent_name = (row.length > 6) ? row[3] : row[2];
2745 + var tooltip = (row.length > 6) ? row[4] : row[3];
2746 + var url = (row.length > 6) ? row[5] : '';
2747 +
2748 + if (description) {
2749 + name += _this.orgChartFormatName(description);
2421 2750 }
2422 - }
2751 + if (image && image !== '') {
2752 + name = _this.orgChartFormatImage(image) + name;
2753 + }
2423 2754
2755 + name = {'v': row[0], 'f': name};
2756 + dataTypes.push([name, parent_name, tooltip, url]);
2757 + });
2758 +
2424 2759 return dataTypes;
2425 2760 }
2426 2761
2427 2762 ChartBuilderGoogleCharts.prototype.orgChartFormatName = function( description ){
@@ -3118,8 +3453,16 @@
3118 3453
3119 3454 chartData[branchId] = [changedName, changedDescription, changedImage, changedParentName, changedTooltip, changedUrl, changedParentId, changedLevel]
3120 3455 })
3121 3456
3457 + var newOrdering = [];
3458 + treeManual.find("> li.tree-branch").each(function() {
3459 + newOrdering.push($(this).attr("data-id"));
3460 + });
3461 + if (_this.chartSourceData) {
3462 + _this.chartSourceData.source_ordering = newOrdering;
3463 + }
3464 +
3122 3465 _this.chartData = _this.orgChartConvertData( chartData );
3123 3466 _this.chartTempData = _this.chartData;
3124 3467 _this.chartData = window.google.visualization.arrayToDataTable( _this.chartData );
3125 3468 _this.updateChartData( _this.chartData );
@@ -3133,13 +3476,66 @@
3133 3476 e.innerHTML = input;
3134 3477 return e.childNodes[0].nodeValue;
3135 3478 }
3136 3479
3480 + // Fix ARIA attributes for WCAG compliance
3481 + ChartBuilderGoogleCharts.prototype.fixAriaAttributes = function() {
3482 + var _this = this;
3483 + var chartContainer = document.getElementById(_this.htmlClassPrefix + _this.chartType);
3484 +
3485 + if (!chartContainer) {
3486 + return;
3487 + }
3488 +
3489 + // Find all divs with aria-label
3490 + var divsWithAriaLabel = chartContainer.querySelectorAll('div[aria-label]');
3491 + divsWithAriaLabel.forEach(function(div) {
3492 + // Check if this div contains a table (the data table representation)
3493 + if (div.querySelector('table')) {
3494 + // Add role="region" to the table container div
3495 + if (!div.hasAttribute('role')) {
3496 + div.setAttribute('role', 'region');
3497 + }
3498 + } else {
3499 + // Remove aria-label from divs without roles (not table containers)
3500 + if (!div.hasAttribute('role')) {
3501 + div.removeAttribute('aria-label');
3502 + }
3503 + }
3504 + });
3505 +
3506 + // Add role="img" to SVG elements with aria-label
3507 + var svgElements = chartContainer.querySelectorAll('svg[aria-label]');
3508 + svgElements.forEach(function(svg) {
3509 + if (!svg.hasAttribute('role')) {
3510 + svg.setAttribute('role', 'img');
3511 + }
3512 + });
3513 + }
3514 +
3137 3515 ChartBuilderGoogleCharts.prototype.drawChartFunction = function (source, options) {
3138 3516 var _this = this;
3139 3517
3140 3518 var view = new google.visualization.DataView(source);
3141 3519 _this.chartData = source;
3520 +
3521 + // Set role="img" on the chart container
3522 + var chartContainer = document.getElementById(_this.htmlClassPrefix + _this.chartType + (_this.uniqueId || ''));
3523 + if (chartContainer) {
3524 + chartContainer.setAttribute('role', 'img');
3525 + }
3526 +
3527 + // Fix ARIA attributes after chart is drawn
3528 + var drawCallback = function() {
3529 + _this.fixAriaAttributes();
3530 + };
3531 +
3532 + // Add callback to options if it doesn't exist
3533 + if (typeof options.chartArea === 'object') {
3534 + options.chartArea.chartReady = drawCallback;
3535 + } else {
3536 + options.chartReady = drawCallback;
3537 + }
3142 3538
3143 3539 if (_this.chartType == 'org_chart') {
3144 3540 view.setColumns([0, 1, 2]);
3145 3541 }