chart.js
202 lines
| 1 | var WPPChart = (function() { |
| 2 | |
| 3 | "use strict"; |
| 4 | |
| 5 | /* |
| 6 | * Private functions and variables |
| 7 | */ |
| 8 | |
| 9 | var defaults = { |
| 10 | type: 'line', |
| 11 | data: { |
| 12 | labels: [], |
| 13 | datasets: [ |
| 14 | { |
| 15 | label: "", |
| 16 | fill: true, |
| 17 | lineTension: 0.2, |
| 18 | borderWidth: 3, |
| 19 | backgroundColor: "rgba(221, 66, 66, 0.8)", |
| 20 | borderColor: "#881111", |
| 21 | borderCapStyle: 'butt', |
| 22 | borderDash: [], |
| 23 | borderDashOffset: 0.0, |
| 24 | borderJoinStyle: 'miter', |
| 25 | pointBorderColor: "#881111", |
| 26 | pointBackgroundColor: "#fff", |
| 27 | pointBorderWidth: 2, |
| 28 | pointHoverRadius: 4, |
| 29 | pointHoverBackgroundColor: "#881111", |
| 30 | pointHoverBorderColor: "#881111", |
| 31 | pointHoverBorderWidth: 3, |
| 32 | pointRadius: 3, |
| 33 | pointHitRadius: 10, |
| 34 | data: [], |
| 35 | }, |
| 36 | { |
| 37 | label: "", |
| 38 | fill: true, |
| 39 | lineTension: 0.2, |
| 40 | borderWidth: 3, |
| 41 | backgroundColor: "rgba(136, 17, 17, 0.3)", |
| 42 | borderColor: "#a80000", |
| 43 | borderCapStyle: 'butt', |
| 44 | borderDash: [], |
| 45 | borderDashOffset: 0.0, |
| 46 | borderJoinStyle: 'miter', |
| 47 | pointBorderColor: "#a80000", |
| 48 | pointBackgroundColor: "#fff", |
| 49 | pointBorderWidth: 2, |
| 50 | pointHoverRadius: 4, |
| 51 | pointHoverBackgroundColor: "#a80000", |
| 52 | pointHoverBorderColor: "#a80000", |
| 53 | pointHoverBorderWidth: 3, |
| 54 | pointRadius: 3, |
| 55 | pointHitRadius: 10, |
| 56 | data: [], |
| 57 | } |
| 58 | ] |
| 59 | }, |
| 60 | options: { |
| 61 | legend: { |
| 62 | display: true, |
| 63 | labels: { |
| 64 | fontColor: '#23282d', |
| 65 | fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', |
| 66 | fontSize: 12 |
| 67 | } |
| 68 | }, |
| 69 | responsive: true, |
| 70 | maintainAspectRatio: false, |
| 71 | layout: { |
| 72 | padding: { |
| 73 | top: 2, |
| 74 | right: 5, |
| 75 | bottom: 0, |
| 76 | left: 5 |
| 77 | } |
| 78 | }, |
| 79 | scales: { |
| 80 | xAxes: [{ |
| 81 | display: true, |
| 82 | gridLines: { |
| 83 | display: false, |
| 84 | }, |
| 85 | ticks: { |
| 86 | fontSize: 10, |
| 87 | fontColor: '#23282d', |
| 88 | autoSkip: false, |
| 89 | maxRotation: 90, |
| 90 | minRotation: 90 |
| 91 | } |
| 92 | }], |
| 93 | yAxes: [{ |
| 94 | display: false |
| 95 | }] |
| 96 | } |
| 97 | } |
| 98 | }, |
| 99 | chart = null, |
| 100 | canRender = !!window.CanvasRenderingContext2D, |
| 101 | element = null, |
| 102 | cvs = null; |
| 103 | |
| 104 | var canRender = function(){ |
| 105 | return canRender; |
| 106 | }; |
| 107 | |
| 108 | // Source: http://stackoverflow.com/a/5624139 |
| 109 | var HexToRGB = function( hex ){ |
| 110 | |
| 111 | var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; |
| 112 | |
| 113 | hex = hex.replace(shorthandRegex, function( m, r, g, b ) { |
| 114 | return r + r + g + g + b + b; |
| 115 | }); |
| 116 | |
| 117 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); |
| 118 | |
| 119 | return result ? { |
| 120 | r: parseInt( result[1], 16 ), |
| 121 | g: parseInt( result[2], 16 ), |
| 122 | b: parseInt( result[3], 16 ) |
| 123 | } : null; |
| 124 | }; |
| 125 | |
| 126 | /* |
| 127 | * Public functions |
| 128 | */ |
| 129 | |
| 130 | var init = function( container, options ){ |
| 131 | |
| 132 | if ( !canRender() ) { |
| 133 | throw new Error('Your browser is too old, WPPChart cannot create its data chart.'); |
| 134 | } |
| 135 | |
| 136 | if ( 'undefined' == typeof container ) { |
| 137 | throw new Error('Please tell WPPChart where to inject the chart.'); |
| 138 | } |
| 139 | |
| 140 | element = document.getElementById( container ); |
| 141 | |
| 142 | if ( !element ) { |
| 143 | throw new Error('WPPChart cannot find ' + container); |
| 144 | } |
| 145 | |
| 146 | if ( 'undefined' == typeof Chart ) { |
| 147 | throw new Error('ChartJS library not found'); |
| 148 | } |
| 149 | |
| 150 | cvs = document.createElement('canvas'); |
| 151 | element.appendChild( cvs ); |
| 152 | |
| 153 | }; |
| 154 | |
| 155 | var populate = function( data ){ |
| 156 | |
| 157 | if ( chart ) { |
| 158 | chart.destroy(); |
| 159 | } |
| 160 | |
| 161 | var config = defaults; |
| 162 | |
| 163 | config.data.labels = data.labels; |
| 164 | config.data.datasets[0].label = data.datasets[0].label; |
| 165 | config.data.datasets[0].data = data.datasets[0].data; |
| 166 | config.data.datasets[1].label = data.datasets[1].label; |
| 167 | config.data.datasets[1].data = data.datasets[1].data; |
| 168 | |
| 169 | if ( 'undefined' != typeof wpp_chart_comments_color && wpp_chart_comments_color ) { |
| 170 | var rgb_comments = HexToRGB(wpp_chart_comments_color); |
| 171 | config.data.datasets[1].backgroundColor = "rgba( " + rgb_comments.r + ", " + rgb_comments.g + ", " + rgb_comments.b + ", 0.9 )"; |
| 172 | config.data.datasets[1].borderColor = wpp_chart_comments_color; |
| 173 | config.data.datasets[1].pointBorderColor = wpp_chart_comments_color; |
| 174 | config.data.datasets[1].pointHoverBackgroundColor = wpp_chart_comments_color; |
| 175 | config.data.datasets[1].pointHoverBorderColor = wpp_chart_comments_color; |
| 176 | } |
| 177 | |
| 178 | if ( 'undefined' != typeof wpp_chart_views_color && wpp_chart_views_color ) { |
| 179 | var rgb_views = HexToRGB(wpp_chart_views_color); |
| 180 | config.data.datasets[0].backgroundColor = "rgba( " + rgb_views.r + ", " + rgb_views.g + ", " + rgb_views.b + ", 0.7 )"; |
| 181 | config.data.datasets[0].borderColor = wpp_chart_views_color; |
| 182 | config.data.datasets[0].pointBorderColor = wpp_chart_views_color; |
| 183 | config.data.datasets[0].pointHoverBackgroundColor = wpp_chart_views_color; |
| 184 | config.data.datasets[0].pointHoverBorderColor = wpp_chart_views_color; |
| 185 | } |
| 186 | |
| 187 | chart = new Chart( cvs, config ); |
| 188 | |
| 189 | }; |
| 190 | |
| 191 | /* |
| 192 | * Provide access to public methods |
| 193 | */ |
| 194 | |
| 195 | return { |
| 196 | init : init, |
| 197 | populate : populate, |
| 198 | canRender : canRender |
| 199 | }; |
| 200 | |
| 201 | })(); |
| 202 |