WordPress.org
Get WordPress

Plugin Directory

Changeset 1537098


Ignore:
Timestamp:
11/20/2016 03:21:17 PM (9 years ago)
Author:
schrax
Message:

Adding v1.2 of the charty plugin

Location:
charty/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • charty/trunk/charty.php

    r1531035 r1537098  
    44Description: Create and manage google geographic charts and maps. It's a useful tool to display demographic data on geographic charts but also on google maps (there is a Map display mode).
    55You can also customize your geographic charts (title, content, context, background, color gradient...).
    6 Version: 1.1
     6Version: 1.2
    77Author: Paul-Adrien Bru
    88Author URI: https://www.pa-bru.fr/
    … …  
    106106        $this->plugin_path              = plugin_dir_path( __FILE__ );
    107107        $this->plugin_url               = plugin_dir_url( __FILE__ );
    108         $this->plugin_version           = '1.1';
     108        $this->plugin_version           = '1.2';
    109109        $this->plugin_l10n              = 'charty';
    110110        $this->countries                = require_once( $this->plugin_path . 'inc/countries.php');
    … …  
    161161
    162162    public function add_plugin_scripts(){
    163         wp_enqueue_script('charty_load_chart', plugins_url( '/js/charty_load_chart.js' , __FILE__ ), array("google_charts_api"), $this->plugin_version, true);
    164         wp_enqueue_script('google_charts_api', $this->api_base , array(), false, true);
     163        wp_enqueue_script('charty_load_chart', plugins_url( '/js/charty_load_chart.js' , __FILE__ ), array("google_charts_api"), $this->plugin_version, false);
     164        wp_enqueue_script('google_charts_api', $this->api_base , array(), false, false);
    165165    }
    166166
    … …  
    685685        );
    686686        $variables_array = array_merge($variables_array, $spe_vars);
    687         wp_localize_script( 'charty_load_chart', 'charty', $variables_array );
    688        
     687
     688        $chartName = "charty_".$atts['id'];
    689689        /*
    690690         * Return the content generated and replace the shortcode by that :
    691691         */
    692             $display_charty = '<h2>'.$charty_title.'</h2>'
    693                                 .'<div id="charty_'.$atts['id'].'" style="height: '. $charty_height .';"></div>'
    694                                 .'<p style="text-align:center;font-style:italic;">'.$charty_description.'</p>';
    695 
    696             return $display_charty;
     692        $display_charty = '<h2>'.$charty_title.'</h2>'
     693                            .'<div id="charty_'.$atts['id'].'" style="height: '. $charty_height .';"></div>'
     694                            .'<p style="text-align:center;font-style:italic;">'.$charty_description.'</p>'
     695                            . '<script type="text/javascript">'
     696                            . 'var ' . $chartName . ' = new Charty(' . json_encode($variables_array).');'
     697                            . '</script>';
     698
     699        return $display_charty;
    697700    }
    698701}

  • charty/trunk/js/charty_load_chart.js

    r1529960 r1537098  
    1 var myMapsApiKey = charty.charty_maps_api_key;
    2 var chart_div = document.getElementById('charty_'+ charty.charty_id);
    3 google.charts.load('upcoming', {mapsApiKey: myMapsApiKey, 'packages':['geochart', 'map']});
    4 
    5 charty.charty_data.unshift(charty.charty_labels);
    6 
    7 switch(charty.charty_type){
    8     case "geo_chart":
    9         google.charts.setOnLoadCallback(drawGeoChart);
    10         break;
    11     case "map":
    12         google.charts.setOnLoadCallback(drawMap);
    13         break;
    14     default:
    15         break;
    16 }
    17 
    18 function drawGeoChart() {
    19     var data = google.visualization.arrayToDataTable(charty.charty_data);
    20 
    21     var options = {
    22         region: charty.charty_region,
    23         displayMode: charty.charty_display_mode,
    24         colorAxis: {colors: charty.charty_color_axis},
    25         backgroundColor: charty.charty_bg_color,
    26         datalessRegionColor: charty.charty_dataless_region_color,
    27         defaultColor: charty.charty_default_color,
    28         tooltip: {trigger: charty.charty_tooltip_trigger}
    29     };
    30 
    31     var chart = chart = new google.visualization.GeoChart(chart_div);
    32     chart.draw(data, options);
    33 }
    34 
    35 function drawMap() {
    36     var data = google.visualization.arrayToDataTable(charty.charty_data);
    37     var style;
    38 
    39     switch(charty.charty_map_style){
    40         case "none":
    41             style= "hybrid";
    42             break;
    43         case "green":
    44             style = "greenAll";
    45             break;
    46         case "red":
    47             style = "redAll";
    48             break;
    49         case "blue":
    50             style = "blueAll";
    51             break;
     1/*
     2 * charty_load_chart.js
     3 * @author  pa-bru
     4 * @version 1.2
     5 * @url http://pa-bru.fr
     6 */
     7(function() {
     8    /***************************************
     9     HELPERS :
     10     ***************************************/
     11    function extendDefaults(source, properties) {
     12        var property;
     13        for (property in properties) {
     14            if (properties.hasOwnProperty(property)) {
     15                source[property] = properties[property];
     16            }
     17        }
     18        return source;
    5219    }
    5320
    54     var options = {
    55         mapType: style,
    56         zoomLevel: charty.charty_map_zoom_level,
    57         showTooltip: true,
    58         showInfoWindow: true,
    59         useMapTypeControl: charty.charty_map_type_control,
    60         maps: {
    61             greenAll: {
    62                 name: 'color green',
    63                 styles: [
    64                     {featureType: 'poi.attraction',
    65                         stylers: [{color: '#fce8b2'}]},
    66                     {featureType: 'road.highway',
    67                         stylers: [{hue: '#0277bd'}, {saturation: -50}]},
    68                     {featureType: 'road.highway', elementType: 'labels.icon',
    69                         stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
    70                     {featureType: 'landscape',
    71                         stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
    72                 ]},
    73             redAll: {
    74                 name: 'color red',
    75                 styles: [
    76                     {featureType: 'landscape',
    77                         stylers: [{color: '#fde0dd'}]},
    78                     {featureType: 'road.highway',
    79                         stylers: [{color: '#67000d'}]},
    80                     {featureType: 'road.highway', elementType: 'labels',
    81                         stylers: [{visibility: 'off'}]},
    82                     {featureType: 'poi',
    83                         stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
    84                     {featureType: 'water',
    85                         stylers: [{color: '#67000d'}]},
    86                     {featureType: 'transit.station.airport',
    87                         stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
    88                 ]},
    89             blueAll: {
    90                 name: 'color blue',
    91                 styles: [
    92                     {featureType: 'landscape',
    93                         stylers: [{color: '#c5cae9'}]},
    94                     {featureType: 'road.highway',
    95                         stylers: [{color: '#023858'}]},
    96                     {featureType: 'road.highway', elementType: 'labels',
    97                         stylers: [{visibility: 'off'}]},
    98                     {featureType: 'poi',
    99                         stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
    100                     {featureType: 'water',
    101                         stylers: [{color: '#0288d1'}]},
    102                     {featureType: 'transit.station.airport',
    103                         stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
    104                 ]}
     21    function getElems(elems, ctx){
     22        return (typeof elems === 'string') ? (ctx || document).querySelectorAll(elems) : [elems];
     23    }
     24
     25    function getElem(elem, ctx){
     26        return (typeof elem === 'string') ? (ctx || document).querySelector(elem) : elem;
     27    }
     28
     29    /***************************************
     30     CHARTY OBJECT CONSTRUCTOR :
     31     ***************************************/
     32    this.Charty = function(options) {
     33        //save popup instance to get the scope :
     34        var chart = {};
     35        if(chart.instance) return;
     36        chart.instance = this;
     37
     38        function mergeParams(options){
     39            var defaults = {
     40                region: null,
     41                displayMode: null,
     42                colorAxis: null,
     43                backgroundColor: null,
     44                datalessRegionColor: null,
     45                defaultColor: null,
     46                tooltip: null,
     47                charty_data: null,
     48                charty_type: null,
     49                charty_maps_api_key: null,
     50                charty_id: null,
     51                charty_labels: null,
     52                charty_map_style: null,
     53                charty_map_zoom_level: null,
     54                charty_map_type_control: null
     55            };
     56
     57            // Create options by extending defaults with the passed in arguments
     58            if (options && typeof options === "object") {
     59                chart.instance.options = extendDefaults(defaults, options);
     60            }
    10561        }
     62        function init(){
     63            console.log(chart);
     64            //load google charts API :
     65            google.charts.load('upcoming', {mapsApiKey: chart.instance.options.charty_maps_api_key, 'packages':['geochart', 'map']});
     66
     67            // Get the div element to add the chart :
     68            chart.elem = getElem('#charty_' + chart.instance.options.charty_id);
     69
     70            //add labels at the beginning of the array of data :
     71            chart.instance.options.charty_data.unshift(chart.instance.options.charty_labels);
     72
     73            //Write the chart after the document is loaded according to the chart type :
     74            switch(chart.instance.options.charty_type){
     75                case "geo_chart":
     76                    google.charts.setOnLoadCallback(drawGeoChart);
     77                    break;
     78                case "map":
     79                    google.charts.setOnLoadCallback(drawMap);
     80                    break;
     81                default:
     82                    break;
     83            }
     84        }
     85
     86        function drawGeoChart() {
     87            var data = google.visualization.arrayToDataTable(chart.instance.options.charty_data);
     88
     89            var options = {
     90                region: chart.instance.options.charty_region,
     91                displayMode: chart.instance.options.charty_display_mode,
     92                colorAxis: {colors: chart.instance.options.charty_color_axis},
     93                backgroundColor: chart.instance.options.charty_bg_color,
     94                datalessRegionColor: chart.instance.options.charty_dataless_region_color,
     95                defaultColor: chart.instance.options.charty_default_color,
     96                tooltip: {trigger: chart.instance.options.charty_tooltip_trigger}
     97            };
     98
     99            //remove property colorAxis if the user has not specified this property : (can't be null for google)
     100            if(chart.instance.options.charty_color_axis == (null || "")){
     101                options.colorAxis = undefined;
     102            }
     103            var geoChart = new google.visualization.GeoChart(chart.elem);
     104            geoChart.draw(data, options);
     105        }
     106
     107        function drawMap() {
     108            var data = google.visualization.arrayToDataTable(chart.instance.options.charty_data);
     109            var style;
     110
     111            switch(chart.instance.options.charty_map_style){
     112                case "none":
     113                    style= "hybrid";
     114                    break;
     115                case "green":
     116                    style = "greenAll";
     117                    break;
     118                case "red":
     119                    style = "redAll";
     120                    break;
     121                case "blue":
     122                    style = "blueAll";
     123                    break;
     124            }
     125
     126            var options = {
     127                mapType: style,
     128                zoomLevel: chart.instance.options.charty_map_zoom_level,
     129                showTooltip: true,
     130                showInfoWindow: true,
     131                useMapTypeControl: chart.instance.options.charty_map_type_control,
     132                maps: {
     133                    greenAll: {
     134                        name: 'color green',
     135                        styles: [
     136                            {featureType: 'poi.attraction',
     137                                stylers: [{color: '#fce8b2'}]},
     138                            {featureType: 'road.highway',
     139                                stylers: [{hue: '#0277bd'}, {saturation: -50}]},
     140                            {featureType: 'road.highway', elementType: 'labels.icon',
     141                                stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
     142                            {featureType: 'landscape',
     143                                stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
     144                        ]},
     145                    redAll: {
     146                        name: 'color red',
     147                        styles: [
     148                            {featureType: 'landscape',
     149                                stylers: [{color: '#fde0dd'}]},
     150                            {featureType: 'road.highway',
     151                                stylers: [{color: '#67000d'}]},
     152                            {featureType: 'road.highway', elementType: 'labels',
     153                                stylers: [{visibility: 'off'}]},
     154                            {featureType: 'poi',
     155                                stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
     156                            {featureType: 'water',
     157                                stylers: [{color: '#67000d'}]},
     158                            {featureType: 'transit.station.airport',
     159                                stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
     160                        ]},
     161                    blueAll: {
     162                        name: 'color blue',
     163                        styles: [
     164                            {featureType: 'landscape',
     165                                stylers: [{color: '#c5cae9'}]},
     166                            {featureType: 'road.highway',
     167                                stylers: [{color: '#023858'}]},
     168                            {featureType: 'road.highway', elementType: 'labels',
     169                                stylers: [{visibility: 'off'}]},
     170                            {featureType: 'poi',
     171                                stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
     172                            {featureType: 'water',
     173                                stylers: [{color: '#0288d1'}]},
     174                            {featureType: 'transit.station.airport',
     175                                stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
     176                        ]}
     177                }
     178            };
     179            var mapChart = new google.visualization.Map(chart.elem);
     180            mapChart.draw(data, options);
     181        }
     182        mergeParams(options);
     183        init();
    106184    };
    107     var chart = new google.visualization.Map(chart_div);
    108     chart.draw(data, options);
    109 }
     185}());

  • charty/trunk/js/charty_mce.js

    r1529960 r1537098  
    99                    icon: 'icon charty-icon',
    1010                    onselect: function (e) {
    11                         confirm("Warning : The plugin enables just one geo chart (or map chart) per page for the moment !\nPlease add just one shortcode.") ? ed.insertContent(this.value()) : null;
     11                        ed.insertContent(this.value());
    1212                    },
    1313                    values: charty_posts_js
    … …  
    2020                    authorurl : 'http://pa-bru.fr',
    2121                    infourl : 'https://github.com/pa-bru/charty',
    22                     version : "1.0"
     22                    version : "1.2"
    2323                };
    2424            }

  • charty/trunk/readme.txt

    r1532721 r1537098  
    22Contributors: schrax
    33Donate link: http://pa-bru.fr/
    4 Tags: chart, charts, charting, graph, graphs, geochart, google geochart, google maps, map,
     4Tags: chart, charts, charting, graph, graphs, geochart, geocharts, google geochart,
     5google geocharts, google maps, map,
    56graphing, visualisation, visualise data, visualization, visualize data, HTML5,
    67plugin, widget, shortcode, geographic chart, demographic data, charty
    78Requires at least: 4.0
    89Tested up to: 4.6.1
    9 Stable tag: 1.1
     10Stable tag: 1.2
    1011License: GPLv2 or later
    1112License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    7980= Can I insert several charts with charty on the same page ? =
    8081
    81 NO. But in the next version you will be able to add several charties on the same page.
     82Yes. It is possible since the 1.2 version of Charty !
    8283
    8384== Screenshots ==
    … …  
    8889
    8990== Changelog ==
     91
     92= 1.2 =
     93* You can now add and display several charts on the same page.
    9094
    9195= 1.1 =
Note: See TracChangeset for help on using the changeset viewer.