# sql-chart-builder/3.0.3/admin_metabox.php

SQL Chart Builder, version 3.0.3. 339 lines.

- Page: https://pluginprobe.com/plugins/sql-chart-builder/3.0.3/code/admin_metabox.php
- Raw: https://pluginprobe.com/plugins/sql-chart-builder/3.0.3/raw/admin_metabox.php
- Modified: 2026-09-12T08:54:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/sql-chart-builder/3.0.3/code/admin_metabox.php#L10-L20`.

```php
<?php
if (!defined('ABSPATH')) {
    die;
}

global $post;
wp_nonce_field('meta_box_nonce_action', 'meta_box_nonce_field');

$gvnsql_meta = function ($key) use ($post) {
    return get_post_meta($post->ID, $key, true);
};

$gvnsql_rawtype = $gvnsql_meta('guaven_sqlcharts_graphtype');
if ($gvnsql_rawtype == '') $gvnsql_rawtype = 'pie_l';
$gvnsql_type = guaven_sqlcharts_normalize_type($gvnsql_rawtype);
$gvnsql_catalog = guaven_sqlcharts_type_catalog();
if (!isset($gvnsql_catalog[$gvnsql_type])) $gvnsql_type = 'pie_l';

$gvnsql_icons = array(
    'pie_l' => '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 12V3a9 9 0 0 1 8.6 6.2L12 12z" fill="currentColor"/></svg>',
    'donut_l' => '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="3.4" opacity=".35"/><path d="M12 3.5a8.5 8.5 0 0 1 8.1 5.9" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round"/></svg>',
    'polar_l' => '<svg viewBox="0 0 24 24"><path d="M12 12V4a8 8 0 0 1 8 8h-8z" fill="currentColor" opacity=".85"/><path d="M12 12h5.5a5.5 5.5 0 1 1-5.5-5.5V12z" fill="currentColor" opacity=".45"/><circle cx="12" cy="12" r="9.5" fill="none" stroke="currentColor" stroke-width="1.4" opacity=".5"/></svg>',
    'radar_l' => '<svg viewBox="0 0 24 24"><path d="M12 2.5l9 6.5-3.4 10.5H6.4L3 9z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 7l5 3.6-1.9 5.9H8.9L7 10.6z" fill="currentColor" opacity=".4"/></svg>',
    'line_l' => '<svg viewBox="0 0 24 24"><path d="M3 18l6-7 4 3 8-9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
    'area_l' => '<svg viewBox="0 0 24 24"><path d="M3 18l6-7 4 3 8-9v14H3z" fill="currentColor" opacity=".45"/><path d="M3 18l6-7 4 3 8-9" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
    'steppedline_l' => '<svg viewBox="0 0 24 24"><path d="M3 18h4v-5h5V8h5V4h4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
    'bar_l' => '<svg viewBox="0 0 24 24"><rect x="4" y="11" width="4" height="9" fill="currentColor"/><rect x="10" y="5" width="4" height="15" fill="currentColor" opacity=".7"/><rect x="16" y="8" width="4" height="12" fill="currentColor" opacity=".45"/></svg>',
    'horizontalbar_l' => '<svg viewBox="0 0 24 24"><rect x="3" y="4" width="15" height="4" fill="currentColor"/><rect x="3" y="10" width="18" height="4" fill="currentColor" opacity=".7"/><rect x="3" y="16" width="10" height="4" fill="currentColor" opacity=".45"/></svg>',
    'stackedbar_l' => '<svg viewBox="0 0 24 24"><rect x="4" y="12" width="4" height="8" fill="currentColor"/><rect x="4" y="7" width="4" height="5" fill="currentColor" opacity=".45"/><rect x="10" y="9" width="4" height="11" fill="currentColor"/><rect x="10" y="4" width="4" height="5" fill="currentColor" opacity=".45"/><rect x="16" y="14" width="4" height="6" fill="currentColor"/><rect x="16" y="10" width="4" height="4" fill="currentColor" opacity=".45"/></svg>',
    'scatter_l' => '<svg viewBox="0 0 24 24"><circle cx="6" cy="16" r="2" fill="currentColor"/><circle cx="10" cy="9" r="2" fill="currentColor" opacity=".75"/><circle cx="15" cy="13" r="2" fill="currentColor" opacity=".55"/><circle cx="19" cy="5" r="2" fill="currentColor" opacity=".85"/><circle cx="13" cy="19" r="2" fill="currentColor" opacity=".4"/></svg>',
);

$gvnsql_svg_kses = array(
    'svg' => array('viewbox' => array(), 'xmlns' => array()),
    'path' => array('d' => array(), 'fill' => array(), 'stroke' => array(), 'stroke-width' => array(), 'stroke-linecap' => array(), 'stroke-linejoin' => array(), 'opacity' => array()),
    'circle' => array('cx' => array(), 'cy' => array(), 'r' => array(), 'fill' => array(), 'stroke' => array(), 'stroke-width' => array(), 'opacity' => array()),
    'rect' => array('x' => array(), 'y' => array(), 'width' => array(), 'height' => array(), 'fill' => array(), 'opacity' => array()),
);
?>

<div id="gvnsql-app">

<?php if ($gvnsql_rawtype != $gvnsql_type) { ?>
    <div class="gvnsql-note gvnsql-note-migrate">
        This chart used the deprecated Google Chart type "<?php echo esc_html($gvnsql_rawtype); ?>".
        It has been automatically mapped to the equivalent modern chart type below — just press Update to finish the migration. Nothing else changes.
    </div>
<?php } ?>

<nav class="gvnsql-tabs" id="gvnsql-tabs">
    <button type="button" class="gvnsql-tab active" data-tab="data">Chart &amp; Data</button>
    <button type="button" class="gvnsql-tab" data-tab="filters">Input Filters</button>
    <button type="button" class="gvnsql-tab" data-tab="style">Style</button>
    <button type="button" class="gvnsql-tab" data-tab="advanced">Advanced</button>
</nav>

<!-- ============ TAB 1: CHART & DATA ============ -->
<section class="gvnsql-section active" data-tab="data">

    <h4 class="gvnsql-step">Pick a chart type</h4>
    <div class="gvnsql-typegrid">
        <?php foreach ($gvnsql_catalog as $slug => $info) { ?>
        <label class="gvnsql-typecard<?php echo $slug == $gvnsql_type ? ' selected' : ''; ?>" data-type="<?php echo esc_attr($slug); ?>">
            <input type="radio" name="guaven_sqlcharts_graphtype" value="<?php echo esc_attr($slug); ?>" <?php checked($slug, $gvnsql_type); ?>>
            <span class="gvnsql-typeicon"><?php echo wp_kses($gvnsql_icons[$slug], $gvnsql_svg_kses); ?></span>
            <span class="gvnsql-typelabel"><?php echo esc_html($info['label']); ?></span>
        </label>
        <?php } ?>
    </div>

    <?php foreach ($gvnsql_catalog as $slug => $info) { ?>
    <div class="gvnsql-guide" data-guide="<?php echo esc_attr($slug); ?>" <?php echo $slug == $gvnsql_type ? '' : 'style="display:none"'; ?>>
        <div class="gvnsql-guide-text">
            <strong><?php echo esc_html($info['label']); ?> chart — when to use it:</strong>
            <?php echo esc_html($info['guide']); ?>
        </div>
        <div class="gvnsql-guide-example">
            <code><?php echo esc_html($info['example_sql']); ?></code>
            <button type="button" class="button gvnsql-use-example"
                data-sql="<?php echo esc_attr($info['example_sql']); ?>"
                data-x="<?php echo esc_attr($info['example_x']); ?>"
                data-y="<?php echo esc_attr(strpos($info['example_y'], ';') === false ? $info['example_y'] : 'postcount'); ?>"
                data-yl="<?php echo esc_attr($info['example_y']); ?>">Use this example</button>
        </div>
    </div>
    <?php } ?>

    <h4 class="gvnsql-step">Build your SQL query</h4>

    <div class="gvnsql-toolbar" id="gvnsql-toolbar">
        <span class="gvnsql-toolbar-group">
            <button type="button" class="gvnsql-kw" data-insert="SELECT ">SELECT</button>
            <button type="button" class="gvnsql-kw" data-insert="COUNT(*) ">COUNT(*)</button>
            <button type="button" class="gvnsql-kw" data-insert="FROM ">FROM</button>
            <button type="button" class="gvnsql-kw" data-insert="WHERE ">WHERE</button>
            <button type="button" class="gvnsql-kw" data-insert="AND ">AND</button>
            <button type="button" class="gvnsql-kw" data-insert="GROUP BY ">GROUP BY</button>
            <button type="button" class="gvnsql-kw" data-insert="ORDER BY ">ORDER BY</button>
            <button type="button" class="gvnsql-kw" data-insert="DESC ">DESC</button>
            <button type="button" class="gvnsql-kw" data-insert="LIMIT 10 ">LIMIT</button>
        </span>
        <span class="gvnsql-toolbar-group">
            <select id="gvnsql-table-select"><option value="">Insert table…</option></select>
            <select id="gvnsql-column-select"><option value="">Insert column…</option></select>
            <select id="gvnsql-tag-select"><option value="">Insert filter tag…</option></select>
        </span>
    </div>

    <div class="gvnsql-editorwrap">
        <textarea name="guaven_sqlcharts_code" id="guaven_sqlcharts_code" rows="8" spellcheck="false"
            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
        echo esc_textarea(guaven_sqlcharts_get_code($post->ID));
        ?></textarea>
    </div>
    <p class="gvnsql-hint">
        Tip: press <b>Ctrl+Space</b> for suggestions at any point. Separate multiple queries with <b>;</b> to build comparison charts.
        Supported dynamic tags: <code>{current_user_id}</code>, <code>{current_user_login}</code>, <code>{current_user_email}</code>, <code>{current_user_display_name}</code>
        — plus every filter you define in the Input Filters tab.
    </p>

    <div class="gvnsql-mapbox">
    <h4 class="gvnsql-step gvnsql-mapbox-title"><span class="gvnsql-mapbox-badge">Final step</span> Map query columns to the chart</h4>
    <p class="gvnsql-hint gvnsql-mapbox-hint">Tell the chart which query column goes to which axis. The dropdowns are filled with the columns found in your SQL query above.</p>
    <div class="gvnsql-grid2">
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_xarg_s_select">X axis — column from your query</label>
            <select id="guaven_sqlcharts_xarg_s_select" class="gvnsql-colselect" data-target="guaven_sqlcharts_xarg_s"></select>
            <input type="text" name="guaven_sqlcharts_xarg_s" id="guaven_sqlcharts_xarg_s" class="gvnsql-colcustom" list="gvnsql-columns"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_xarg_s')); ?>" placeholder="e.g. monthandyear">
            <small>The column whose values become the labels/X positions.</small>
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_yarg_s_select">Y axis — column from your query</label>
            <select id="guaven_sqlcharts_yarg_s_select" class="gvnsql-colselect" data-target="guaven_sqlcharts_yarg_s"></select>
            <input type="text" name="guaven_sqlcharts_yarg_s" id="guaven_sqlcharts_yarg_s" class="gvnsql-colcustom" list="gvnsql-columns"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_yarg_s')); ?>" placeholder="e.g. postcount">
            <small>The numeric column that becomes the chart values. Use one output name even with multiple queries.</small>
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_xarg_l">X axis label (display text)</label>
            <input type="text" name="guaven_sqlcharts_xarg_l" id="guaven_sqlcharts_xarg_l"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_xarg_l')); ?>" placeholder="e.g. Months">
            <small>Shown as the X axis title on Bar, Line and Scatter charts, and as the first table-view header.</small>
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_yarg_l">Y axis label / series name(s)</label>
            <input type="text" name="guaven_sqlcharts_yarg_l" id="guaven_sqlcharts_yarg_l"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_yarg_l')); ?>" placeholder="e.g. Post count">
            <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>
        </div>
    </div>
    </div>
    <datalist id="gvnsql-columns"></datalist>

    <p class="gvnsql-checkbox-row"><label><input type="checkbox" name="guaven_sqlcharts_tablepart" value="1" <?php echo $gvnsql_meta('guaven_sqlcharts_tablepart') != '' ? 'checked' : ''; ?>>
    Show table-view data below the graph</label></p>
</section>

<!-- ============ TAB 2: INPUT FILTERS ============ -->
<section class="gvnsql-section" data-tab="filters">
    <h4 class="gvnsql-step">Input filters — no code needed</h4>
    <p class="gvnsql-hint">Each filter becomes an input field above your chart at the front-end, and a <code>{tag}</code> placed inside the SQL query.
    The tag dropdown suggests <code>{tags}</code> already written in your query and columns from its WHERE part.
    Example: pick or type <b>fromdate</b> with type <b>date</b>, click "Insert into query" and complete the condition, e.g. <code>WHERE post_date &gt; {fromdate}</code>.</p>

    <div id="gvnsql-filters-rows"></div>
    <p>
        <button type="button" class="button button-secondary" id="gvnsql-add-filter">+ Add filter</button>
        <button type="button" class="button-link" id="gvnsql-raw-toggle">Edit raw format</button>
    </p>

    <textarea name="guaven_sqlcharts_variables" id="guaven_sqlcharts_variables" class="gvnsql-raw" rows="2"><?php
        echo esc_textarea(trim($gvnsql_meta('guaven_sqlcharts_variables')));
    ?></textarea>
    <p class="gvnsql-hint gvnsql-raw">Raw format: <i>name~default~label~type | name~default~label~type</i> (type: text, number or date)</p>

    <div class="gvnsql-grid2" style="margin-top:14px">
        <div class="gvnsql-field">
            <label>Visibility</label>
            <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_formpartrole" value="1"
                <?php echo $gvnsql_meta('guaven_sqlcharts_formpartrole') !== '' ? 'checked' : ''; ?>>
                Hide the filters form from not-logged-in visitors</label>
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_formpartbutton">Submit button text</label>
            <input type="text" name="guaven_sqlcharts_formpartbutton" id="guaven_sqlcharts_formpartbutton"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_formpartbutton')); ?>" placeholder="OK">
        </div>
    </div>
</section>

<!-- ============ TAB 3: STYLE ============ -->
<section class="gvnsql-section" data-tab="style">
    <h4 class="gvnsql-step">Colors</h4>
    <p class="gvnsql-hint">One color per data series (or per slice for circular charts). Leave empty to use the built-in palette.</p>
    <div id="gvnsql-colors-rows" class="gvnsql-colors"></div>
    <p><button type="button" class="button button-secondary" id="gvnsql-add-color">+ Add color</button></p>
    <input type="hidden" name="guaven_sqlcharts_colors" id="guaven_sqlcharts_colors"
        value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_colors')); ?>">

    <div class="gvnsql-grid2">
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_legend_position">Legend position</label>
            <?php $gvnsql_legend = esc_attr($gvnsql_meta('guaven_sqlcharts_legend_position')); ?>
            <select name="guaven_sqlcharts_legend_position" id="guaven_sqlcharts_legend_position">
                <option value="default">Hidden (default)</option>
                <option value="top" <?php selected($gvnsql_legend, 'top'); ?>>Show at the top</option>
                <option value="bottom" <?php selected($gvnsql_legend, 'bottom'); ?>>Show at the bottom</option>
                <option value="left" <?php selected($gvnsql_legend, 'left'); ?>>Show at the left</option>
                <option value="right" <?php selected($gvnsql_legend, 'right'); ?>>Show at the right</option>
            </select>
            <small>The legend lists your series names (Y label field).</small>
        </div>
        <div class="gvnsql-field">
            <label>Value labels</label>
            <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_forcetooltips" id="guaven_sqlcharts_forcetooltips" value="1"
                <?php echo $gvnsql_meta('guaven_sqlcharts_forcetooltips') != '' ? 'checked' : ''; ?>>
                Always show values on the chart (not only on mouse-over). Works with every chart type.</label>
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_chartwidth">Max width (px)</label>
            <input type="number" name="guaven_sqlcharts_chartwidth" id="guaven_sqlcharts_chartwidth"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_chartwidth')); ?>" placeholder="auto">
            <small>Leave empty for full container width (responsive).</small>
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_chartheight">Height (px)</label>
            <input type="number" name="guaven_sqlcharts_chartheight" id="guaven_sqlcharts_chartheight"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_chartheight')); ?>" placeholder="auto">
            <small>Leave empty to keep the natural aspect ratio.</small>
        </div>
    </div>
</section>

<!-- ============ TAB 4: ADVANCED ============ -->
<section class="gvnsql-section" data-tab="advanced">
    <h4 class="gvnsql-step">Axis behavior (Line and Bar charts)</h4>
    <div class="gvnsql-checkgrid">
        <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_begin_with_0_x" value="1"
            <?php echo $gvnsql_meta('guaven_sqlcharts_begin_with_0_x') !== '' ? 'checked' : ''; ?>> Force X axis to start at 0</label>
        <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_begin_with_0_y" value="1"
            <?php echo $gvnsql_meta('guaven_sqlcharts_begin_with_0_y') !== '' ? 'checked' : ''; ?>> Force Y axis to start at 0</label>
        <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_round_y_values" value="1"
            <?php echo $gvnsql_meta('guaven_sqlcharts_round_y_values') !== '' ? 'checked' : ''; ?>> Show only round numbers on the Y axis</label>
        <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_nostacked" value="1"
            <?php echo $gvnsql_meta('guaven_sqlcharts_nostacked') !== '' ? 'checked' : ''; ?>> Disable stacking of multiple datasets (Bar charts)</label>
        <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_timeaxis" value="1"
            <?php echo $gvnsql_meta('guaven_sqlcharts_timeaxis') !== '' ? 'checked' : ''; ?>> Scale X axis by date/time (Bar and Line charts)</label>
    </div>
    <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
    <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.
    Bars are sized from the closest pair of dates, so very uneven gaps produce thin bars.</p>

    <h4 class="gvnsql-step">Remote MySQL database (optional)</h4>
    <p class="gvnsql-hint">Leave all fields empty to use this WordPress site's own database.</p>
    <div class="gvnsql-grid2">
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_dbhost">Database host</label>
            <input type="text" name="guaven_sqlcharts_dbhost" id="guaven_sqlcharts_dbhost"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_dbhost')); ?>" placeholder="e.g. 127.0.0.1">
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_dbname">Database name</label>
            <input type="text" name="guaven_sqlcharts_dbname" id="guaven_sqlcharts_dbname"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_dbname')); ?>">
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_dblogin">Database username</label>
            <input type="text" name="guaven_sqlcharts_dblogin" id="guaven_sqlcharts_dblogin"
                value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_dblogin')); ?>">
        </div>
        <div class="gvnsql-field">
            <label for="guaven_sqlcharts_dbpass">Database password</label>
            <?php
            $gvnsql_dbpass = $gvnsql_meta('guaven_sqlcharts_dbpass');
            if (is_array($gvnsql_dbpass)) {
                $gvnsql_dbpass = guaven_sqlcharts_encrypt_decrypt('decrypt', $gvnsql_dbpass[1]);
            }
            ?>
            <input type="password" name="guaven_sqlcharts_dbpass" id="guaven_sqlcharts_dbpass"
                value="<?php echo esc_attr($gvnsql_dbpass); ?>" autocomplete="new-password">
            <small>Stored encrypted. WordPress supports MySQL databases; for other engines
            <a target="_blank" href="https://guaven.com/contact/solution-request/">contact us</a>.</small>
        </div>
    </div>
</section>

</div><!-- /gvnsql-app -->

<script>
if (jQuery("#post").attr("action") && jQuery("#post").attr("action").indexOf("#") === -1){
  jQuery("#post").attr("action", jQuery("#post").attr("action") + "#sqldemo");
}
</script>

<?php
$postfix = guaven_sqlcharts_graphtype($post);
if ($postfix !== '' or $gvnsql_meta('guaven_sqlcharts_code') != '') {
    // legacy google types ($postfix === '') render via the [gvn_schart] alias shortcode
?>
<div class="gf-alert-success gf-alert">
<h4>
Text shortcode: [gvn_schart<?php
    echo esc_attr($postfix);
?> id="<?php
    echo esc_attr($post->ID);
?>"<?php echo $gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : ''; ?>]
<br>
<br>
PHP shortcode: &lt;?php echo do_shortcode(' [gvn_schart<?php
    echo esc_attr($postfix);
?> id="<?php
    echo esc_attr($post->ID);
?>"<?php echo $gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : ''; ?>]'); ?&gt;
</h4>
<p>Note: Shortcodes support width and height attributes, f.e. [gvn_schart<?php
    echo esc_attr($postfix);
?> id="1" width="500" height="400"]. Without attributes, the width/height from the Style tab is used.
<?php
    preg_match_all('/\{arg([0-9]+)\}/', guaven_sqlcharts_get_code($post->ID), $gvnsql_argtags);
    $gvnsql_argtags = array_unique($gvnsql_argtags[1]);
    sort($gvnsql_argtags);
    if (!empty($gvnsql_argtags)) {
        $gvnsql_argexample = '';
        foreach ($gvnsql_argtags as $gvnsql_argn) $gvnsql_argexample .= ' arg' . (int) $gvnsql_argn . '="..."';
?>
<br><br><strong>This query uses shortcode arguments.</strong> Pass the values in the shortcode:
[gvn_schart<?php echo esc_attr($postfix); ?> id="<?php echo esc_attr($post->ID); ?>"<?php echo esc_html($gvnsql_argexample); ?>].
The live preview below runs without them (every {arg} is 0), so check the real result on a page or post.
<?php } ?>
</div>
<hr>
<h3 id="sqldemo" name="sqldemo">Live Preview <small style="font-weight:normal">(reflects the last saved state — press Update to refresh)</small></h3>
<?php
    echo do_shortcode('[gvn_schart' . esc_attr($postfix) . ' id="' . esc_attr($post->ID) . '" ' . ($gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : '') . ']');

}
?>

```