| 1 |
<?php |
| 2 |
if (!defined('ABSPATH')) { |
| 3 |
die; |
| 4 |
} |
| 5 |
|
| 6 |
global $post; |
| 7 |
wp_nonce_field('meta_box_nonce_action', 'meta_box_nonce_field'); |
| 8 |
|
| 9 |
|
| 10 |
?> |
| 11 |
<div style="width:calc(100% - 110px);float:left"> |
| 12 |
|
| 13 |
<h3>Required parameters</h3> |
| 14 |
|
| 15 |
<h4 class="gsql_h4">Step 1: Choose a chart type</h4> |
| 16 |
|
| 17 |
<p> |
| 18 |
<select name="guaven_sqlcharts_graphtype" id="guaven_sqlcharts_graphtype"> |
| 19 |
<option value="pie_l" <?php $smfootnote=''; |
| 20 |
$guaven_sqlcharts_graphtype = get_post_meta($post->ID, 'guaven_sqlcharts_graphtype', true); |
| 21 |
echo ($guaven_sqlcharts_graphtype == 'pie_l' ? 'selected' : '');?>>Pie Chart</option> |
| 22 |
<option value="line_l" <?php echo ($guaven_sqlcharts_graphtype == 'line_l' ? 'selected' : '');?>>Line Chart</option> |
| 23 |
<option value="donut_l" <?php echo ($guaven_sqlcharts_graphtype == 'donut_l' ? 'selected' : '');?>>Donut Chart</option> |
| 24 |
<option value="bar_l" <?php echo ($guaven_sqlcharts_graphtype == 'bar_l' ? 'selected' : '');?>>Vertical Bar Chart</option> |
| 25 |
<option value="horizontalbar_l" <?php echo ($guaven_sqlcharts_graphtype == 'horizontalbar_l' ? 'selected' : '');?>>Horizontal Bar Chart</option> |
| 26 |
<option value="area_l" <?php echo ($guaven_sqlcharts_graphtype == 'area_l' ? 'selected' : '');?>>Area Chart</option> |
| 27 |
<option value="polar_l" <?php echo ($guaven_sqlcharts_graphtype == 'polar_l' ? 'selected' : '');?>>Polar Area</option> |
| 28 |
|
| 29 |
<?php |
| 30 |
if ($guaven_sqlcharts_graphtype!='' and strpos($guaven_sqlcharts_graphtype,'_l')===false) { |
| 31 |
?> |
| 32 |
<option value="pie" <?php echo ($guaven_sqlcharts_graphtype == 'pie' ? 'selected' : '');?>>Google Chart - Pie *</option> |
| 33 |
<option value="3dpie" <?php echo ($guaven_sqlcharts_graphtype == '3dpie' ? 'selected' : '');?>>Google Chart - 3D Pie *</option> |
| 34 |
<option value="column" <?php echo ($guaven_sqlcharts_graphtype == 'column' ? 'selected' : '');?>>Google Chart - Column *</option> |
| 35 |
<option value="bar" <?php echo ($guaven_sqlcharts_graphtype == 'bar' ? 'selected' : '');?>>Google Chart - Bar *</option> |
| 36 |
<option value="area" <?php echo ($guaven_sqlcharts_graphtype == 'area' ? 'selected' : '');?>>Google Chart - Area *</option> |
| 37 |
<?php |
| 38 |
$smfootnote='<br><small> |
| 39 |
* Google Chart options are deprecated and will be removed since 3.0 version. |
| 40 |
Currently those options support single queries only. Use non-Google Chart options above. |
| 41 |
</small>'; |
| 42 |
} ?> |
| 43 |
</select> |
| 44 |
<?php |
| 45 |
echo $smfootnote; |
| 46 |
?> |
| 47 |
<br> |
| 48 |
</p> |
| 49 |
|
| 50 |
<p><label><input type="checkbox" name="guaven_sqlcharts_tablepart" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_tablepart', true)!=''?'checked':''; ?>> |
| 51 |
Show table-view data below the graph</lable></p> |
| 52 |
</div> |
| 53 |
<div style="width:110px;float:left"><img src="<?php echo plugin_dir_url( __FILE__ ) . 'asset/img/pie.png';?>" class="charttype" style="opacity:0.5;margin-top:20px;float:right;width:100px"></div> |
| 54 |
<div style="clear:both;display:block"></div> |
| 55 |
<hr> |
| 56 |
|
| 57 |
|
| 58 |
|
| 59 |
|
| 60 |
<h4 class="gsql_h4">Step 2: Enter Your SQL Query </h4> |
| 61 |
<p> |
| 62 |
<textarea name="guaven_sqlcharts_code" id="guaven_sqlcharts_code" style="width:100%" rows="6"><?php |
| 63 |
echo (get_post_meta($post->ID, 'guaven_sqlcharts_code', true) != '' ? get_post_meta($post->ID, 'guaven_sqlcharts_code', true) : ''); |
| 64 |
?> |
| 65 |
</textarea> |
| 66 |
<br><small>Separate sql queries with ";" if you would like to use multiple queries to build comparison graphs. <a href="https://www.dropbox.com/s/l9xggkeliqdswo9/mysqlchart_example.png?dl=0" target="_blank">See example</a> |
| 67 |
<br> |
| 68 |
<b>Some supported dynamic tags can be used in your query: {current_user_id},{current_user_login},{current_user_email},{current_user_display_name}.</b> |
| 69 |
</small> |
| 70 |
</p> |
| 71 |
|
| 72 |
<hr> |
| 73 |
|
| 74 |
|
| 75 |
|
| 76 |
|
| 77 |
|
| 78 |
<h4 class="gsql_h4">Step 3: Set Arguments and Values for a Chart - See <a href="https://www.dropbox.com/s/5tt0se24x6hfas0/mysqlchart_example-1.png?dl=0" target="_blank">Example 1</a> |
| 79 |
and <a href="https://www.dropbox.com/s/s8ygh1zngo2ajzi/mysqlchart_example-4.png?dl=0" target="_blank">Example 2</a></h4> |
| 80 |
|
| 81 |
|
| 82 |
<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> |
| 83 |
Label for X axis: <br><input type="text" name="guaven_sqlcharts_xarg_l" id="guaven_sqlcharts_xarg_l" value="<?php |
| 84 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_xarg_l', true); |
| 85 |
?>"> |
| 86 |
<br> |
| 87 |
<small>This is just label text for a query argument, you can type any desired name here.</small> |
| 88 |
</div> |
| 89 |
|
| 90 |
<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> |
| 91 |
Label for Y axis: <br><input type="text" name="guaven_sqlcharts_yarg_l" id="guaven_sqlcharts_yarg_l" value="<?php |
| 92 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_yarg_l', true); |
| 93 |
?>"> |
| 94 |
<br><small>This is just a label text for query's main value, you can type any desired name here.<br> |
| 95 |
Use ";" separated label names if you have more than one query inside SQL CODE field.</small> |
| 96 |
</div> |
| 97 |
|
| 98 |
<div style="width:100%;padding:4px"></div> |
| 99 |
<div> |
| 100 |
<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> |
| 101 |
SQL column name of X axis: |
| 102 |
<br> |
| 103 |
<input type="text" name="guaven_sqlcharts_xarg_s" id="guaven_sqlcharts_xarg_s" value="<?php |
| 104 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_xarg_s', true); |
| 105 |
?>"><br> |
| 106 |
<small>Write corresponding SQL field/column name here. f.e. display_name, post_date</small> |
| 107 |
</div> |
| 108 |
|
| 109 |
|
| 110 |
<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> |
| 111 |
SQL column name of Y axis: |
| 112 |
<br> |
| 113 |
<input type="text" name="guaven_sqlcharts_yarg_s" id="guaven_sqlcharts_yarg_s" value="<?php |
| 114 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_yarg_s', true); |
| 115 |
?>"><br> |
| 116 |
<small>Write corresponding SQL field name here. f.e. post_count) - Use one single output name even if you have multiple queries in SQL CODE field.</small> |
| 117 |
</div> |
| 118 |
</div> |
| 119 |
|
| 120 |
|
| 121 |
<hr/> |
| 122 |
<h3 id="Optional" id="Optional">Advanced parameters</h3> |
| 123 |
<p> <a href="#Optional" class="btn button dynamicfieldbutton">Show/Hide Advanced Parameters</a></p> |
| 124 |
|
| 125 |
<div class="dynamicfielddiv" style="display:none"> |
| 126 |
|
| 127 |
<hr/> |
| 128 |
<h4 class="gsql_h4">Width and height (with px. don't type px itself, just numbers)</h4> |
| 129 |
<p> |
| 130 |
|
| 131 |
<input type="number" name="guaven_sqlcharts_chartwidth" id="guaven_sqlcharts_chartwidth" value="<?php |
| 132 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_chartwidth', true); |
| 133 |
?>"> |
| 134 |
|
| 135 |
<input type="number" name="guaven_sqlcharts_chartheight" id="guaven_sqlcharts_chartheight" value="<?php |
| 136 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_chartheight', true); |
| 137 |
?>"> |
| 138 |
</p> |
| 139 |
|
| 140 |
<p> |
| 141 |
Color scheme (comma separated #RGB colors. f.e. <i>#FF0000</i> or <i>#00FF00,#BBCC00</i> ). |
| 142 |
<br> |
| 143 |
<input type="text" name="guaven_sqlcharts_colors" id="guaven_sqlcharts_colors" value="<?php |
| 144 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_colors', true); |
| 145 |
?>" style="width:500px"> |
| 146 |
<br><small>Leave empty if you want random colors</small> |
| 147 |
</p> |
| 148 |
|
| 149 |
<p> |
| 150 |
Mouse-over tooltips</p> |
| 151 |
<p> |
| 152 |
<label for="guaven_sqlcharts_forcetooltips"> |
| 153 |
<input type="checkbox" name="guaven_sqlcharts_forcetooltips" id="guaven_sqlcharts_forcetooltips" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_forcetooltips', true)!=''?'checked':''; ?>> |
| 154 |
Force tooltips to be shown by default(not only after mouse-over) |
| 155 |
</label> |
| 156 |
</p> |
| 157 |
|
| 158 |
<p> |
| 159 |
Legend block |
| 160 |
<br> |
| 161 |
<?php $guaven_sqlcharts_legend_position=get_post_meta($post->ID, 'guaven_sqlcharts_legend_position', true);?> |
| 162 |
<select name="guaven_sqlcharts_legend_position" id="guaven_sqlcharts_legend_position"> |
| 163 |
<option value="default">Default</option> |
| 164 |
<option value="top" <?php echo $guaven_sqlcharts_legend_position=='top'?"selected":''; ?>>Shop at the top</option> |
| 165 |
<option value="bottom" <?php echo $guaven_sqlcharts_legend_position=='bottom'?"selected":''; ?>>Shop at the bottom</option> |
| 166 |
<option value="left" <?php echo $guaven_sqlcharts_legend_position=='left'?"selected":''; ?>>Shop at the left</option> |
| 167 |
<option value="right" <?php echo $guaven_sqlcharts_legend_position=='right'?"selected":''; ?>>Shop at the right</option> |
| 168 |
<option value="hide" <?php echo $guaven_sqlcharts_legend_position=='hide'?"selected":''; ?>>Hide legend</option> |
| 169 |
</select> |
| 170 |
<br><small>Legend in a chart is Y values which usually appears at the top/right part of the graph</small> |
| 171 |
</p> |
| 172 |
|
| 173 |
<hr/> |
| 174 |
<h4 class="gsql_h4">X and Y Axis Ticks (for Line and Bar charts)</h4> |
| 175 |
<p> |
| 176 |
<label for="guaven_sqlcharts_begin_with_0_x"> |
| 177 |
<input type="checkbox" name="guaven_sqlcharts_begin_with_0_x" id="guaven_sqlcharts_begin_with_0_x" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_begin_with_0_x', true)!=''?'checked':''; ?>> |
| 178 |
Force start X axes at 0 |
| 179 |
</label> |
| 180 |
|
| 181 |
<label for="guaven_sqlcharts_begin_with_0_y"> |
| 182 |
<input type="checkbox" name="guaven_sqlcharts_begin_with_0_y" id="guaven_sqlcharts_begin_with_0_y" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_begin_with_0_y', true)!=''?'checked':''; ?>> |
| 183 |
Force start X axes at 0 |
| 184 |
</label> |
| 185 |
</p> |
| 186 |
|
| 187 |
<p> |
| 188 |
<label for="guaven_sqlcharts_round_y_values"> |
| 189 |
<input type="checkbox" name="guaven_sqlcharts_round_y_values" id="guaven_sqlcharts_round_y_values" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_round_y_values', true)!=''?'checked':''; ?>> |
| 190 |
Show only round numbers in Y axis ticks |
| 191 |
</label> |
| 192 |
|
| 193 |
|
| 194 |
<label for="guaven_sqlcharts_nostacked"> |
| 195 |
<input type="checkbox" name="guaven_sqlcharts_nostacked" id="guaven_sqlcharts_nostacked" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_nostacked', true)!=''?'checked':''; ?> |
| 196 |
>Disable "stackedness" for datasets |
| 197 |
</label> |
| 198 |
|
| 199 |
</p> |
| 200 |
|
| 201 |
|
| 202 |
<hr/> |
| 203 |
<h4 class="gsql_h4">Remote MySQL Database Access Details</h4> |
| 204 |
|
| 205 |
Leave empty if you are connecting to local DB.<p> |
| 206 |
<input type="text" name="guaven_sqlcharts_dbhost" id="guaven_sqlcharts_dbhost" value="<?php |
| 207 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_dbhost', true); |
| 208 |
?>" placeholder="database host"> |
| 209 |
|
| 210 |
<input type="text" name="guaven_sqlcharts_dbname" id="guaven_sqlcharts_dbname" value="<?php |
| 211 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_dbname', true); |
| 212 |
?>" placeholder="database name"> |
| 213 |
|
| 214 |
<input type="text" name="guaven_sqlcharts_dblogin" id="guaven_sqlcharts_dblogin" value="<?php |
| 215 |
echo get_post_meta($post->ID, 'guaven_sqlcharts_dblogin', true); |
| 216 |
?>" placeholder="database username"> |
| 217 |
|
| 218 |
<?php |
| 219 |
$dbpass=get_post_meta($post->ID, 'guaven_sqlcharts_dbpass', true); |
| 220 |
if(is_array($dbpass)){ |
| 221 |
$dbpass=guaven_sqlcharts_encrypt_decrypt('decrypt',$dbpass[1]); |
| 222 |
} |
| 223 |
|
| 224 |
?> |
| 225 |
<input type="password" name="guaven_sqlcharts_dbpass" id="guaven_sqlcharts_dbpass" value="<?php |
| 226 |
echo $dbpass; |
| 227 |
?>" placeholder="database password"> |
| 228 |
|
| 229 |
</p> |
| 230 |
<p> |
| 231 |
<small>Note: WordPress supports MySQL only Databases, to use non-MySQL databases some custom PHP code&driver would be needed. |
| 232 |
To discuss how to build that you can <a target="_blank" href="https://guaven.com/contact/solution-request/">contact us</a>. |
| 233 |
|
| 234 |
</small><br> |
| 235 |
</p> |
| 236 |
|
| 237 |
|
| 238 |
<hr/> |
| 239 |
<h4 class="gsql_h4" >Dynamic filters - See <a href="https://www.dropbox.com/s/6xa6gk7uc75b8me/mysqlchart_example-2.png?dl=0" target="_blank">Example Settings</a> |
| 240 |
and <a href="https://www.dropbox.com/s/fq1gnqcqdbj65ch/mysqlchart_example-3.png?dl=0" target="_blank">Example Demo</a> |
| 241 |
</h4> |
| 242 |
|
| 243 |
<div > |
| 244 |
<p style="font-weight:bold">Enter dynamic filter variables using the format described below:</p> |
| 245 |
<textarea name="guaven_sqlcharts_variables" id="guaven_sqlcharts_variables" style="width:100%" rows="2"><?php |
| 246 |
echo (get_post_meta($post->ID, 'guaven_sqlcharts_variables', true) != '' ? get_post_meta($post->ID, 'guaven_sqlcharts_variables', true) : ''); |
| 247 |
?> |
| 248 |
</textarea> |
| 249 |
<br><p>Use this format: <i>variable_name~default_value~variable_label~variable_type | variable_name~default_value~variable_label~variable_type</i> etc.<br> |
| 250 |
<ul style="padding-left:20px"><li>variable_name - any single name you want.</li><li> |
| 251 |
default_value - default value when no any variable chosen by a user</li><li> |
| 252 |
variable_label - Label which would be visible at a form above the chart</li><li> |
| 253 |
variable_type - number, text or date</li><li> |
| 254 |
~ is a separator between variable elements.</li><li> |
| 255 |
| is a separator between variables</li></ul> |
| 256 |
|
| 257 |
For example if to put <b>limit_tag~10~Count~number | post_date_tag~2010-07-05 17:25:18~Date Published~date</b> here, |
| 258 |
then you can use this SQL code <b>select * from wp_posts where post_date<{post_date_tag} limit {limit_tag}</b> in SQL CODE field. |
| 259 |
{post_date_tag} and {limit_tag} would be replaced with dynamic variables. |
| 260 |
So, the plugin will automatically recognize it and put corresponding selectboxes above the chart. <br></p> |
| 261 |
<p><label><input type="checkbox" name="guaven_sqlcharts_formpartrole" value="1" |
| 262 |
<?php echo get_post_meta($post->ID, 'guaven_sqlcharts_formpartrole', true)!=''?'checked':''; ?>> |
| 263 |
Hide dynamic filters form from not-loggedin users at frontend. </label></p> |
| 264 |
|
| 265 |
<p><label>Submit button text (default is "OK") <input type="text" name="guaven_sqlcharts_formpartbutton" value="<?php |
| 266 |
echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_formpartbutton', true) ); ?>" placeholder="Submit button text"></label></p> |
| 267 |
|
| 268 |
</div> |
| 269 |
|
| 270 |
|
| 271 |
</div> |
| 272 |
<hr> |
| 273 |
|
| 274 |
<style> |
| 275 |
.gsql_h4{color:#4693dd;margin-top:5px;margin-bottom:5px} |
| 276 |
.wpdberror{color:white;background: red;padding:10px;} |
| 277 |
#guaven_sqlcharts_begin_with_0_y{margin-left:24px;} |
| 278 |
</style> |
| 279 |
<script> |
| 280 |
if (jQuery("#post").attr("action").indexOf("#")==-1){ |
| 281 |
jQuery("#post").attr("action",jQuery("#post").attr("action")+"#sqldemo"); |
| 282 |
} |
| 283 |
</script> |
| 284 |
<?php |
| 285 |
$postfix=guaven_sqlcharts_graphtype($post); |
| 286 |
if ($postfix != '') { |
| 287 |
|
| 288 |
?> |
| 289 |
<div class="gf-alert-success gf-alert"> |
| 290 |
<h4> |
| 291 |
Text shortcode: [gvn_schart<?php |
| 292 |
echo $postfix; |
| 293 |
?> id="<?php |
| 294 |
echo $post->ID; |
| 295 |
?>"<?php echo get_post_meta($post->ID,'guaven_sqlcharts_tablepart',true)!=''?' table="1"':''; ?>] |
| 296 |
<br> |
| 297 |
<br> |
| 298 |
PHP shorcode: <?php echo do_shortcode(' [gvn_schart<?php |
| 299 |
echo $postfix; |
| 300 |
?> id="<?php |
| 301 |
echo $post->ID; |
| 302 |
?>"<?php echo get_post_meta($post->ID,'guaven_sqlcharts_tablepart',true)!=''?' table="1"':''; ?>]'); ?> |
| 303 |
</h4> |
| 304 |
<p>Note: Shortcodes supports width and height attributes. F.e. [gvn_schart<?php |
| 305 |
echo $postfix; |
| 306 |
?> id="1" width="500" height="400"]. If no attributes, default width, height (which you enter in this page above) will be used. |
| 307 |
</div> |
| 308 |
<hr> |
| 309 |
<h3 id="sqldemo" name="sqldemo">Save Changes and See Live Demo</h3> |
| 310 |
<?php |
| 311 |
echo do_shortcode(' [gvn_schart' . $postfix . ' id="' . $post->ID . '" '.(get_post_meta($post->ID,'guaven_sqlcharts_tablepart',true)!=''?' table="1"':'').']'); |
| 312 |
|
| 313 |
} |
| 314 |
?> |
| 315 |
<script> |
| 316 |
jQuery(".dynamicfieldbutton").click(function(){jQuery(".dynamicfielddiv").fadeToggle("slow")}); |
| 317 |
plugindirurl='<?php echo plugin_dir_url( __FILE__ ) . 'asset/img/'; ?>'; |
| 318 |
jQuery("#guaven_sqlcharts_graphtype").change(function(){ |
| 319 |
jQuery(".charttype").attr("src",plugindirurl+jQuery(this).val().replace("_l","").replace("column","bar")+'.png'); |
| 320 |
}); |
| 321 |
jQuery("#guaven_sqlcharts_graphtype").trigger('change'); |
| 322 |
|
| 323 |
</script> |
| 324 |
<?php |
