| @@ -108,9 +108,9 @@ | ||
| 108 | 108 | |
| 109 | 109 | <div class="gvnsql-editorwrap"> |
| 110 | 110 | <textarea name="guaven_sqlcharts_code" id="guaven_sqlcharts_code" rows="8" spellcheck="false" |
| 111 | 111 | placeholder="Start typing your query — autocomplete will suggest SQL keywords, your real table names and column names. Or click the buttons above to build the query step by step."><?php |
| 112 | - echo esc_textarea($gvnsql_meta('guaven_sqlcharts_code')); | |
| 112 | + echo esc_textarea(guaven_sqlcharts_get_code($post->ID)); | |
| 113 | 113 | ?></textarea> |
| 114 | 114 | </div> |
| 115 | 115 | <p class="gvnsql-hint"> |
| 116 | 116 | Tip: press <b>Ctrl+Space</b> for suggestions at any point. Separate multiple queries with <b>;</b> to build comparison charts. |
| @@ -139,15 +139,15 @@ | ||
| 139 | 139 | <div class="gvnsql-field"> |
| 140 | 140 | <label for="guaven_sqlcharts_xarg_l">X axis label (display text)</label> |
| 141 | 141 | <input type="text" name="guaven_sqlcharts_xarg_l" id="guaven_sqlcharts_xarg_l" |
| 142 | 142 | value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_xarg_l')); ?>" placeholder="e.g. Months"> |
| 143 | - <small>Any text you like — shown in the table view header.</small> | |
| 143 | + <small>Shown as the X axis title on Bar, Line and Scatter charts, and as the first table-view header.</small> | |
| 144 | 144 | </div> |
| 145 | 145 | <div class="gvnsql-field"> |
| 146 | 146 | <label for="guaven_sqlcharts_yarg_l">Y axis label / series name(s)</label> |
| 147 | 147 | <input type="text" name="guaven_sqlcharts_yarg_l" id="guaven_sqlcharts_yarg_l" |
| 148 | 148 | value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_yarg_l')); ?>" placeholder="e.g. Post count"> |
| 149 | - <small>Shown in the legend. With multiple queries, separate one name per query with ";".</small> | |
| 149 | + <small>Shown in the legend and as the Y axis title. With multiple queries, separate one name per query with ";" (then only the legend is used).</small> | |
| 150 | 150 | </div> |
| 151 | 151 | </div> |
| 152 | 152 | </div> |
| 153 | 153 | <datalist id="gvnsql-columns"></datalist> |
| @@ -191,9 +191,9 @@ | ||
| 191 | 191 | |
| 192 | 192 | <!-- ============ TAB 3: STYLE ============ --> |
| 193 | 193 | <section class="gvnsql-section" data-tab="style"> |
| 194 | 194 | <h4 class="gvnsql-step">Colors</h4> |
| 195 | - <p class="gvnsql-hint">One color per data series (or per slice for circular charts). Leave empty for random colors.</p> | |
| 195 | + <p class="gvnsql-hint">One color per data series (or per slice for circular charts). Leave empty to use the built-in palette.</p> | |
| 196 | 196 | <div id="gvnsql-colors-rows" class="gvnsql-colors"></div> |
| 197 | 197 | <p><button type="button" class="button button-secondary" id="gvnsql-add-color">+ Add color</button></p> |
| 198 | 198 | <input type="hidden" name="guaven_sqlcharts_colors" id="guaven_sqlcharts_colors" |
| 199 | 199 | value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_colors')); ?>"> |
| @@ -214,9 +214,9 @@ | ||
| 214 | 214 | <div class="gvnsql-field"> |
| 215 | 215 | <label>Value labels</label> |
| 216 | 216 | <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_forcetooltips" id="guaven_sqlcharts_forcetooltips" value="1" |
| 217 | 217 | <?php echo $gvnsql_meta('guaven_sqlcharts_forcetooltips') != '' ? 'checked' : ''; ?>> |
| 218 | - Always show values on the chart (not only on mouse-over)</label> | |
| 218 | + Always show values on the chart (not only on mouse-over). Works with every chart type.</label> | |
| 219 | 219 | </div> |
| 220 | 220 | <div class="gvnsql-field"> |
| 221 | 221 | <label for="guaven_sqlcharts_chartwidth">Max width (px)</label> |
| 222 | 222 | <input type="number" name="guaven_sqlcharts_chartwidth" id="guaven_sqlcharts_chartwidth" |
| @@ -243,9 +243,14 @@ | ||
| 243 | 243 | <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_round_y_values" value="1" |
| 244 | 244 | <?php echo $gvnsql_meta('guaven_sqlcharts_round_y_values') !== '' ? 'checked' : ''; ?>> Show only round numbers on the Y axis</label> |
| 245 | 245 | <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_nostacked" value="1" |
| 246 | 246 | <?php echo $gvnsql_meta('guaven_sqlcharts_nostacked') !== '' ? 'checked' : ''; ?>> Disable stacking of multiple datasets (Bar charts)</label> |
| 247 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_timeaxis" value="1" | |
| 248 | + <?php echo $gvnsql_meta('guaven_sqlcharts_timeaxis') !== '' ? 'checked' : ''; ?>> Scale X axis by date/time (Bar and Line charts)</label> | |
| 247 | 249 | </div> |
| 250 | + <p class="gvnsql-hint">Date/time scaling places each point by real elapsed time instead of equal steps. X values must be dates such as | |
| 251 | + <code>2024-02-23</code>, <code>2024-02</code>, <code>2024</code> or <code>2024-02-23 14:30</code>. If any X value is not a date, the normal axis is used. | |
| 252 | + Bars are sized from the closest pair of dates, so very uneven gaps produce thin bars.</p> | |
| 248 | 253 | |
| 249 | 254 | <h4 class="gvnsql-step">Remote MySQL database (optional)</h4> |
| 250 | 255 | <p class="gvnsql-hint">Leave all fields empty to use this WordPress site's own database.</p> |
| 251 | 256 | <div class="gvnsql-grid2"> |
| @@ -310,8 +315,20 @@ | ||
| 310 | 315 | </h4> |
| 311 | 316 | <p>Note: Shortcodes support width and height attributes, f.e. [gvn_schart<?php |
| 312 | 317 | echo esc_attr($postfix); |
| 313 | 318 | ?> id="1" width="500" height="400"]. Without attributes, the width/height from the Style tab is used. |
| 319 | +<?php | |
| 320 | + preg_match_all('/\{arg([0-9]+)\}/', guaven_sqlcharts_get_code($post->ID), $gvnsql_argtags); | |
| 321 | + $gvnsql_argtags = array_unique($gvnsql_argtags[1]); | |
| 322 | + sort($gvnsql_argtags); | |
| 323 | + if (!empty($gvnsql_argtags)) { | |
| 324 | + $gvnsql_argexample = ''; | |
| 325 | + foreach ($gvnsql_argtags as $gvnsql_argn) $gvnsql_argexample .= ' arg' . (int) $gvnsql_argn . '="..."'; | |
| 326 | +?> | |
| 327 | +<br><br><strong>This query uses shortcode arguments.</strong> Pass the values in the shortcode: | |
| 328 | +[gvn_schart<?php echo esc_attr($postfix); ?> id="<?php echo esc_attr($post->ID); ?>"<?php echo esc_html($gvnsql_argexample); ?>]. | |
| 329 | +The live preview below runs without them (every {arg} is 0), so check the real result on a page or post. | |
| 330 | +<?php } ?> | |
| 314 | 331 | </div> |
| 315 | 332 | <hr> |
| 316 | 333 | <h3 id="sqldemo" name="sqldemo">Live Preview <small style="font-weight:normal">(reflects the last saved state — press Update to refresh)</small></h3> |
| 317 | 334 | <?php |
