WordPress.org
Get WordPress

Plugin Directory

Changeset 1879841


Ignore:
Timestamp:
05/23/2018 08:42:26 AM (8 years ago)
Author:
kreydle
Message:

Chart updated to chartjs

Location:
shorty-lite/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • shorty-lite/trunk/assets/js/js.js

    r1469795 r1879841  
    181181    height = typeof height !== 'undefined' ? height : 230;
    182182
    183     jQuery(selector).highcharts({
    184         chart: {
    185             height: height,
     183    jQuery(selector).hide();
     184   
     185    var maxValueBar = 0;
     186   
     187    jQuery.each(series2, function(index, value){
     188        if(value[1]>maxValueBar) {
     189            maxValueBar=value[1];
     190        }
     191    });
     192    maxValueBar += (maxValueBar*10/100);
     193   
     194    jQuery(selector).after('<canvas id="myChart" width="100%" height="25"></canvas>');
     195    var ctx = document.getElementById("myChart").getContext('2d');
     196    var myChart = new Chart(ctx, {
     197        type: 'bar',
     198        data: {
     199            datasets: [{
     200                yAxisID: 'A',
     201                label: 'Conversions',
     202                data: [{
     203                    x: 1526965990,
     204                    y: 0,
     205                }],
     206                borderWidth: 1,
     207                backgroundColor: Color("#c0392b").rgbString(),
     208            }, {
     209                yAxisID: 'B',
     210                label: 'Visits',
     211                data: [{
     212                    x: 1526965990,
     213                    y: 0
     214                }],
     215                borderColor: '#368fcf',
     216                borderWidth: '1px',
     217                backgroundColor: Color("#3998dc").alpha(0.2).rgbString(),
     218                lineTension: 0,
     219                type: 'line'
     220            }] 
    186221        },
    187         title: {
    188             text: null
    189         },
    190         xAxis: {
    191             gridLineWidth: 0,
    192             type: 'datetime',
    193             title: {
    194                 text: ''
     222        options: {
     223             legend: {
     224                display: false
     225             },
     226            responsive: true,
     227            title:{
     228                display:false,
    195229            },
    196             dateTimeLabelFormats: {
    197                 hour: '%I:%M %p',
    198                 minute: '%I:%i %p',
    199                 day: '%e-%b',
    200                 month: '%b \'%y',
    201             },
    202             startOnTick: false,
    203             endOnTick: false,
    204             minPadding: 0,
    205             maxPadding: 0,
    206             tickmarkPlacement: 'on',
    207             min: minDate,
    208             max: maxDate,
    209         },
    210         yAxis: [
    211             {
    212                 gridLineWidth: 0,
    213                 labels: {
    214                     enabled: false,
    215                     format: '{value:2f}',
    216                 },
    217                 title: {
    218                     text: ''
    219                 },
    220                 opposite: true,
    221             },
    222             {
    223                 gridLineWidth: 1,
    224                 gridLineColor: '#f2f2f2',
    225                 labels: {
    226                     enabled: false,
    227                     format: '{value:2f}',
    228                 },
    229                 title: {
    230                     text: ''
    231                 },
    232             }
    233         ],
    234         plotOptions: {
    235             area: {
    236                 marker: {
    237                     enabled: false,
     230            tooltips: {
     231                callbacks: {
     232                    label: function(tooltipItem, data) {
     233                        var label = data.datasets[tooltipItem.datasetIndex].label || '';
     234
     235                        if (label) {
     236                            label += ': ';
     237                        }
     238                        label += tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     239                        return label;
     240                    },
     241                    title: function(tooltipItem, data) {
     242                        var label = tooltipItem[0].xLabel;
     243                         var d = new Date(label),
     244                            month = '' + (d.getMonth() + 1),
     245                            day = '' + d.getDate(),
     246                            year = d.getFullYear();
     247                        if (month.length < 2) month = '0' + month;
     248                        if (day.length < 2) day = '0' + day;
     249                        return [day, month, year].join('-');
     250                    }
    238251                }
    239252            },
    240             series: {
    241                 pointWidth: 20,
     253            scales: {
     254                xAxes: [{
     255                    type: "time",
     256                    display: true,
     257                    scaleLabel: {
     258                        display: false,
     259                    },
     260                    offset: true,
     261                    barPercentage: 0.4
     262                }],
     263                yAxes: [{
     264                    id: 'A',
     265                    type: 'linear',
     266                    display: false,
     267                    ticks: {
     268                        min:0, max: maxValueBar,
     269                    },
     270                    scaleLabel: function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
     271                },{
     272                    id: 'B',
     273                    type: 'linear',
     274                    display: false,
     275                    scaleLabel: function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
     276                }]
    242277            }
    243         },
    244         exporting:
    245                 {
    246                     enabled: false
    247                 },
    248         series: [
    249             {
    250                 type: 'area',
    251                 name: 'Visits',
    252                 yAxis: 1,
    253                 color: '#3498db',
    254                 fillOpacity: 0.1,
    255                 data: series1,
    256                 showInLegend: false,
    257                 marker: {
    258                     enabled: true
    259                 },
    260                 pointStart: minDate,
    261             },
    262             {
    263                 type: 'column',
    264                 name: 'Conversions',
    265                 color: 'rgba(231,76,60,0.9)',
    266                 data: series2,
    267                 showInLegend: false,
    268                 pointStart: minDate,
    269             }
    270         ]
    271     });
     278        }
     279    });
     280    myChart.data.datasets.forEach((dataset) => {
     281        dataset.data.pop();
     282    });
     283    myChart.update();
     284    jQuery.each(series1, function(index, value){
     285        myChart.data.datasets[1].data.push({x: value[0], y: value[1]});
     286    });
     287    jQuery.each(series2, function(index, value){
     288        myChart.data.datasets[0].data.push({x: value[0], y: value[1]});
     289    });
     290    myChart.update();
    272291}
    273292

  • shorty-lite/trunk/classes/srty_shorty.php

    r1469795 r1879841  
    251251        wp_enqueue_script('datetimepicker', SH_JS_URL . '/bootstrap-datetimepicker.min.js', array(), '4.17.37', TRUE);
    252252        wp_enqueue_script('clippy', SH_JS_URL . '/ZeroClipboard.min.js', array(), '1.0.0', TRUE);
    253         wp_enqueue_script('highchart', SH_JS_URL . '/highcharts.js', array(), '4.1.5', TRUE);
     253        wp_enqueue_script('chart_js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js', array(), '4.1.5', TRUE);
    254254        wp_enqueue_script('chosen', SH_JS_URL . '/chosen.jquery.min.js', array(), '1.5.0', TRUE);
    255255        wp_enqueue_script('srty_js', SH_JS_URL . '/js.js', array(), '1.1.0', TRUE);

  • shorty-lite/trunk/shorty-lite.php

    r1724253 r1879841  
    77  Author: Shorty
    88  Author URI: http://www.shortywp.com/?utm_source=shorty&utm_medium=referral&utm_term=plugin_meta&utm_campaign=wordpress_plugin
    9   Version: 1.2.3
     9  Version: 1.3.0
    1010  Text Domain: shorty-lite
    1111  License: GPL version 2 or later - http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Note: See TracChangeset for help on using the changeset viewer.