| @@ -5,285 +5,299 @@ | ||
| 5 | 5 | |
| 6 | 6 | global $post; |
| 7 | 7 | wp_nonce_field('meta_box_nonce_action', 'meta_box_nonce_field'); |
| 8 | 8 | |
| 9 | -?> | |
| 10 | -<div style="width:calc(100% - 110px);float:left"> | |
| 9 | +$gvnsql_meta = function ($key) use ($post) { | |
| 10 | + return get_post_meta($post->ID, $key, true); | |
| 11 | +}; | |
| 11 | 12 | |
| 12 | -<h3>Required parameters</h3> | |
| 13 | +$gvnsql_rawtype = $gvnsql_meta('guaven_sqlcharts_graphtype'); | |
| 14 | +if ($gvnsql_rawtype == '') $gvnsql_rawtype = 'pie_l'; | |
| 15 | +$gvnsql_type = guaven_sqlcharts_normalize_type($gvnsql_rawtype); | |
| 16 | +$gvnsql_catalog = guaven_sqlcharts_type_catalog(); | |
| 17 | +if (!isset($gvnsql_catalog[$gvnsql_type])) $gvnsql_type = 'pie_l'; | |
| 13 | 18 | |
| 14 | -<h4 class="gsql_h4">Step 1: Choose a chart type</h4> | |
| 19 | +$gvnsql_icons = array( | |
| 20 | + '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>', | |
| 21 | + '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>', | |
| 22 | + '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>', | |
| 23 | + '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>', | |
| 24 | + '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>', | |
| 25 | + '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>', | |
| 26 | + '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>', | |
| 27 | + '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>', | |
| 28 | + '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>', | |
| 29 | + '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>', | |
| 30 | + '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>', | |
| 31 | +); | |
| 15 | 32 | |
| 16 | -<p> | |
| 17 | -<select name="guaven_sqlcharts_graphtype" id="guaven_sqlcharts_graphtype"> | |
| 18 | -<option value="pie_l" <?php $smfootnote=''; | |
| 19 | -$guaven_sqlcharts_graphtype = get_post_meta($post->ID, 'guaven_sqlcharts_graphtype', true); | |
| 20 | -echo ($guaven_sqlcharts_graphtype == 'pie_l' ? 'selected' : '');?>>Pie Chart</option> | |
| 21 | -<option value="line_l" <?php echo ($guaven_sqlcharts_graphtype == 'line_l' ? 'selected' : '');?>>Line Chart</option> | |
| 22 | -<option value="donut_l" <?php echo ($guaven_sqlcharts_graphtype == 'donut_l' ? 'selected' : '');?>>Donut Chart</option> | |
| 23 | -<option value="bar_l" <?php echo ($guaven_sqlcharts_graphtype == 'bar_l' ? 'selected' : '');?>>Vertical Bar Chart</option> | |
| 24 | -<option value="horizontalbar_l" <?php echo ($guaven_sqlcharts_graphtype == 'horizontalbar_l' ? 'selected' : '');?>>Horizontal Bar Chart</option> | |
| 25 | -<option value="area_l" <?php echo ($guaven_sqlcharts_graphtype == 'area_l' ? 'selected' : '');?>>Area Chart</option> | |
| 26 | -<option value="polar_l" <?php echo ($guaven_sqlcharts_graphtype == 'polar_l' ? 'selected' : '');?>>Polar Area</option> | |
| 27 | - | |
| 28 | -<?php | |
| 29 | -if ($guaven_sqlcharts_graphtype!='' and strpos($guaven_sqlcharts_graphtype,'_l')===false) { | |
| 33 | +$gvnsql_svg_kses = array( | |
| 34 | + 'svg' => array('viewbox' => array(), 'xmlns' => array()), | |
| 35 | + 'path' => array('d' => array(), 'fill' => array(), 'stroke' => array(), 'stroke-width' => array(), 'stroke-linecap' => array(), 'stroke-linejoin' => array(), 'opacity' => array()), | |
| 36 | + 'circle' => array('cx' => array(), 'cy' => array(), 'r' => array(), 'fill' => array(), 'stroke' => array(), 'stroke-width' => array(), 'opacity' => array()), | |
| 37 | + 'rect' => array('x' => array(), 'y' => array(), 'width' => array(), 'height' => array(), 'fill' => array(), 'opacity' => array()), | |
| 38 | +); | |
| 30 | 39 | ?> |
| 31 | -<option value="pie" <?php echo ($guaven_sqlcharts_graphtype == 'pie' ? 'selected' : '');?>>Google Chart - Pie *</option> | |
| 32 | -<option value="3dpie" <?php echo ($guaven_sqlcharts_graphtype == '3dpie' ? 'selected' : '');?>>Google Chart - 3D Pie *</option> | |
| 33 | -<option value="column" <?php echo ($guaven_sqlcharts_graphtype == 'column' ? 'selected' : '');?>>Google Chart - Column *</option> | |
| 34 | -<option value="bar" <?php echo ($guaven_sqlcharts_graphtype == 'bar' ? 'selected' : '');?>>Google Chart - Bar *</option> | |
| 35 | -<option value="area" <?php echo ($guaven_sqlcharts_graphtype == 'area' ? 'selected' : '');?>>Google Chart - Area *</option> | |
| 36 | -<?php | |
| 37 | -$smfootnote='<br><small> | |
| 38 | -* Google Chart options are deprecated and will be removed since 3.0 version. | |
| 39 | -Currently those options support single queries only. Use non-Google Chart options above. | |
| 40 | -</small>'; | |
| 41 | -} ?> | |
| 42 | -</select> | |
| 43 | -<?php | |
| 44 | -echo wp_kses_post($smfootnote); | |
| 45 | -?> | |
| 46 | -<br> | |
| 47 | -</p> | |
| 48 | 40 | |
| 49 | -<p><label><input type="checkbox" name="guaven_sqlcharts_tablepart" value="1" <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_tablepart', true)!=''?'checked':''; ?>> | |
| 50 | - Show table-view data below the graph</label></p> | |
| 51 | -</div> | |
| 52 | -<div style="width:110px;float:left"> | |
| 53 | - <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . 'asset/img/pie.png'); ?>" class="charttype" style="opacity:0.5;margin-top:20px;float:right;width:100px"> | |
| 54 | -</div> | |
| 55 | -<div style="clear:both;display:block"></div> | |
| 56 | -<hr> | |
| 41 | +<div id="gvnsql-app"> | |
| 57 | 42 | |
| 43 | +<?php if ($gvnsql_rawtype != $gvnsql_type) { ?> | |
| 44 | + <div class="gvnsql-note gvnsql-note-migrate"> | |
| 45 | + This chart used the deprecated Google Chart type "<?php echo esc_html($gvnsql_rawtype); ?>". | |
| 46 | + It has been automatically mapped to the equivalent modern chart type below — just press Update to finish the migration. Nothing else changes. | |
| 47 | + </div> | |
| 48 | +<?php } ?> | |
| 58 | 49 | |
| 50 | +<nav class="gvnsql-tabs" id="gvnsql-tabs"> | |
| 51 | + <button type="button" class="gvnsql-tab active" data-tab="data">Chart & Data</button> | |
| 52 | + <button type="button" class="gvnsql-tab" data-tab="filters">Input Filters</button> | |
| 53 | + <button type="button" class="gvnsql-tab" data-tab="style">Style</button> | |
| 54 | + <button type="button" class="gvnsql-tab" data-tab="advanced">Advanced</button> | |
| 55 | +</nav> | |
| 59 | 56 | |
| 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 esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_code', true)); | |
| 64 | -?></textarea> | |
| 65 | -<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> | |
| 66 | -<br> | |
| 67 | -<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> | |
| 68 | -</small> | |
| 69 | -</p> | |
| 57 | +<!-- ============ TAB 1: CHART & DATA ============ --> | |
| 58 | +<section class="gvnsql-section active" data-tab="data"> | |
| 70 | 59 | |
| 71 | -<hr> | |
| 60 | + <h4 class="gvnsql-step">Pick a chart type</h4> | |
| 61 | + <div class="gvnsql-typegrid"> | |
| 62 | + <?php foreach ($gvnsql_catalog as $slug => $info) { ?> | |
| 63 | + <label class="gvnsql-typecard<?php echo $slug == $gvnsql_type ? ' selected' : ''; ?>" data-type="<?php echo esc_attr($slug); ?>"> | |
| 64 | + <input type="radio" name="guaven_sqlcharts_graphtype" value="<?php echo esc_attr($slug); ?>" <?php checked($slug, $gvnsql_type); ?>> | |
| 65 | + <span class="gvnsql-typeicon"><?php echo wp_kses($gvnsql_icons[$slug], $gvnsql_svg_kses); ?></span> | |
| 66 | + <span class="gvnsql-typelabel"><?php echo esc_html($info['label']); ?></span> | |
| 67 | + </label> | |
| 68 | + <?php } ?> | |
| 69 | + </div> | |
| 72 | 70 | |
| 71 | + <?php foreach ($gvnsql_catalog as $slug => $info) { ?> | |
| 72 | + <div class="gvnsql-guide" data-guide="<?php echo esc_attr($slug); ?>" <?php echo $slug == $gvnsql_type ? '' : 'style="display:none"'; ?>> | |
| 73 | + <div class="gvnsql-guide-text"> | |
| 74 | + <strong><?php echo esc_html($info['label']); ?> chart — when to use it:</strong> | |
| 75 | + <?php echo esc_html($info['guide']); ?> | |
| 76 | + </div> | |
| 77 | + <div class="gvnsql-guide-example"> | |
| 78 | + <code><?php echo esc_html($info['example_sql']); ?></code> | |
| 79 | + <button type="button" class="button gvnsql-use-example" | |
| 80 | + data-sql="<?php echo esc_attr($info['example_sql']); ?>" | |
| 81 | + data-x="<?php echo esc_attr($info['example_x']); ?>" | |
| 82 | + data-y="<?php echo esc_attr(strpos($info['example_y'], ';') === false ? $info['example_y'] : 'postcount'); ?>" | |
| 83 | + data-yl="<?php echo esc_attr($info['example_y']); ?>">Use this example</button> | |
| 84 | + </div> | |
| 85 | + </div> | |
| 86 | + <?php } ?> | |
| 73 | 87 | |
| 88 | + <h4 class="gvnsql-step">Build your SQL query</h4> | |
| 74 | 89 | |
| 90 | + <div class="gvnsql-toolbar" id="gvnsql-toolbar"> | |
| 91 | + <span class="gvnsql-toolbar-group"> | |
| 92 | + <button type="button" class="gvnsql-kw" data-insert="SELECT ">SELECT</button> | |
| 93 | + <button type="button" class="gvnsql-kw" data-insert="COUNT(*) ">COUNT(*)</button> | |
| 94 | + <button type="button" class="gvnsql-kw" data-insert="FROM ">FROM</button> | |
| 95 | + <button type="button" class="gvnsql-kw" data-insert="WHERE ">WHERE</button> | |
| 96 | + <button type="button" class="gvnsql-kw" data-insert="AND ">AND</button> | |
| 97 | + <button type="button" class="gvnsql-kw" data-insert="GROUP BY ">GROUP BY</button> | |
| 98 | + <button type="button" class="gvnsql-kw" data-insert="ORDER BY ">ORDER BY</button> | |
| 99 | + <button type="button" class="gvnsql-kw" data-insert="DESC ">DESC</button> | |
| 100 | + <button type="button" class="gvnsql-kw" data-insert="LIMIT 10 ">LIMIT</button> | |
| 101 | + </span> | |
| 102 | + <span class="gvnsql-toolbar-group"> | |
| 103 | + <select id="gvnsql-table-select"><option value="">Insert table…</option></select> | |
| 104 | + <select id="gvnsql-column-select"><option value="">Insert column…</option></select> | |
| 105 | + <select id="gvnsql-tag-select"><option value="">Insert filter tag…</option></select> | |
| 106 | + </span> | |
| 107 | + </div> | |
| 75 | 108 | |
| 76 | -<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> | |
| 77 | - and <a href="https://www.dropbox.com/s/s8ygh1zngo2ajzi/mysqlchart_example-4.png?dl=0" target="_blank">Example 2</a></h4> | |
| 109 | + <div class="gvnsql-editorwrap"> | |
| 110 | + <textarea name="guaven_sqlcharts_code" id="guaven_sqlcharts_code" rows="8" spellcheck="false" | |
| 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(guaven_sqlcharts_get_code($post->ID)); | |
| 113 | + ?></textarea> | |
| 114 | + </div> | |
| 115 | + <p class="gvnsql-hint"> | |
| 116 | + Tip: press <b>Ctrl+Space</b> for suggestions at any point. Separate multiple queries with <b>;</b> to build comparison charts. | |
| 117 | + Supported dynamic tags: <code>{current_user_id}</code>, <code>{current_user_login}</code>, <code>{current_user_email}</code>, <code>{current_user_display_name}</code> | |
| 118 | + — plus every filter you define in the Input Filters tab. | |
| 119 | + </p> | |
| 78 | 120 | |
| 121 | + <div class="gvnsql-mapbox"> | |
| 122 | + <h4 class="gvnsql-step gvnsql-mapbox-title"><span class="gvnsql-mapbox-badge">Final step</span> Map query columns to the chart</h4> | |
| 123 | + <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> | |
| 124 | + <div class="gvnsql-grid2"> | |
| 125 | + <div class="gvnsql-field"> | |
| 126 | + <label for="guaven_sqlcharts_xarg_s_select">X axis — column from your query</label> | |
| 127 | + <select id="guaven_sqlcharts_xarg_s_select" class="gvnsql-colselect" data-target="guaven_sqlcharts_xarg_s"></select> | |
| 128 | + <input type="text" name="guaven_sqlcharts_xarg_s" id="guaven_sqlcharts_xarg_s" class="gvnsql-colcustom" list="gvnsql-columns" | |
| 129 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_xarg_s')); ?>" placeholder="e.g. monthandyear"> | |
| 130 | + <small>The column whose values become the labels/X positions.</small> | |
| 131 | + </div> | |
| 132 | + <div class="gvnsql-field"> | |
| 133 | + <label for="guaven_sqlcharts_yarg_s_select">Y axis — column from your query</label> | |
| 134 | + <select id="guaven_sqlcharts_yarg_s_select" class="gvnsql-colselect" data-target="guaven_sqlcharts_yarg_s"></select> | |
| 135 | + <input type="text" name="guaven_sqlcharts_yarg_s" id="guaven_sqlcharts_yarg_s" class="gvnsql-colcustom" list="gvnsql-columns" | |
| 136 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_yarg_s')); ?>" placeholder="e.g. postcount"> | |
| 137 | + <small>The numeric column that becomes the chart values. Use one output name even with multiple queries.</small> | |
| 138 | + </div> | |
| 139 | + <div class="gvnsql-field"> | |
| 140 | + <label for="guaven_sqlcharts_xarg_l">X axis label (display text)</label> | |
| 141 | + <input type="text" name="guaven_sqlcharts_xarg_l" id="guaven_sqlcharts_xarg_l" | |
| 142 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_xarg_l')); ?>" placeholder="e.g. Months"> | |
| 143 | + <small>Shown as the X axis title on Bar, Line and Scatter charts, and as the first table-view header.</small> | |
| 144 | + </div> | |
| 145 | + <div class="gvnsql-field"> | |
| 146 | + <label for="guaven_sqlcharts_yarg_l">Y axis label / series name(s)</label> | |
| 147 | + <input type="text" name="guaven_sqlcharts_yarg_l" id="guaven_sqlcharts_yarg_l" | |
| 148 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_yarg_l')); ?>" placeholder="e.g. Post count"> | |
| 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 | + </div> | |
| 151 | + </div> | |
| 152 | + </div> | |
| 153 | + <datalist id="gvnsql-columns"></datalist> | |
| 79 | 154 | |
| 80 | -<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> | |
| 81 | -Label for X axis: <br><input type="text" name="guaven_sqlcharts_xarg_l" id="guaven_sqlcharts_xarg_l" value="<?php | |
| 82 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_xarg_l', true)); | |
| 83 | -?>"> | |
| 84 | -<br> | |
| 85 | -<small>This is just label text for a query argument, you can type any desired name here.</small> | |
| 86 | -</div> | |
| 155 | + <p class="gvnsql-checkbox-row"><label><input type="checkbox" name="guaven_sqlcharts_tablepart" value="1" <?php echo $gvnsql_meta('guaven_sqlcharts_tablepart') != '' ? 'checked' : ''; ?>> | |
| 156 | + Show table-view data below the graph</label></p> | |
| 157 | +</section> | |
| 87 | 158 | |
| 88 | -<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> | |
| 89 | -Label for Y axis: <br><input type="text" name="guaven_sqlcharts_yarg_l" id="guaven_sqlcharts_yarg_l" value="<?php | |
| 90 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_yarg_l', true)); | |
| 91 | -?>"> | |
| 92 | -<br><small>This is just a label text for query's main value, you can type any desired name here.<br> | |
| 93 | - Use ";" separated label names if you have more than one query inside SQL CODE field.</small> | |
| 94 | -</div> | |
| 159 | +<!-- ============ TAB 2: INPUT FILTERS ============ --> | |
| 160 | +<section class="gvnsql-section" data-tab="filters"> | |
| 161 | + <h4 class="gvnsql-step">Input filters — no code needed</h4> | |
| 162 | + <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. | |
| 163 | + The tag dropdown suggests <code>{tags}</code> already written in your query and columns from its WHERE part. | |
| 164 | + 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 > {fromdate}</code>.</p> | |
| 95 | 165 | |
| 96 | -<div style="width:100%;padding:4px"></div> | |
| 97 | -<div> | |
| 98 | -<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> | |
| 99 | -SQL column name of X axis: | |
| 100 | -<br> | |
| 101 | -<input type="text" name="guaven_sqlcharts_xarg_s" id="guaven_sqlcharts_xarg_s" value="<?php | |
| 102 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_xarg_s', true)); | |
| 103 | -?>"><br> | |
| 104 | -<small>Write corresponding SQL field/column name here. f.e. display_name, post_date</small> | |
| 105 | -</div> | |
| 166 | + <div id="gvnsql-filters-rows"></div> | |
| 167 | + <p> | |
| 168 | + <button type="button" class="button button-secondary" id="gvnsql-add-filter">+ Add filter</button> | |
| 169 | + <button type="button" class="button-link" id="gvnsql-raw-toggle">Edit raw format</button> | |
| 170 | + </p> | |
| 106 | 171 | |
| 172 | + <textarea name="guaven_sqlcharts_variables" id="guaven_sqlcharts_variables" class="gvnsql-raw" rows="2"><?php | |
| 173 | + echo esc_textarea(trim($gvnsql_meta('guaven_sqlcharts_variables'))); | |
| 174 | + ?></textarea> | |
| 175 | + <p class="gvnsql-hint gvnsql-raw">Raw format: <i>name~default~label~type | name~default~label~type</i> (type: text, number or date)</p> | |
| 107 | 176 | |
| 108 | -<div style="display:inline-block;width:48%;height:90px;vertical-align:text-bottom"> | |
| 109 | -SQL column name of Y axis: | |
| 110 | -<br> | |
| 111 | -<input type="text" name="guaven_sqlcharts_yarg_s" id="guaven_sqlcharts_yarg_s" value="<?php | |
| 112 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_yarg_s', true)); | |
| 113 | -?>"><br> | |
| 114 | -<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> | |
| 115 | -</div> | |
| 116 | -</div> | |
| 177 | + <div class="gvnsql-grid2" style="margin-top:14px"> | |
| 178 | + <div class="gvnsql-field"> | |
| 179 | + <label>Visibility</label> | |
| 180 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_formpartrole" value="1" | |
| 181 | + <?php echo $gvnsql_meta('guaven_sqlcharts_formpartrole') !== '' ? 'checked' : ''; ?>> | |
| 182 | + Hide the filters form from not-logged-in visitors</label> | |
| 183 | + </div> | |
| 184 | + <div class="gvnsql-field"> | |
| 185 | + <label for="guaven_sqlcharts_formpartbutton">Submit button text</label> | |
| 186 | + <input type="text" name="guaven_sqlcharts_formpartbutton" id="guaven_sqlcharts_formpartbutton" | |
| 187 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_formpartbutton')); ?>" placeholder="OK"> | |
| 188 | + </div> | |
| 189 | + </div> | |
| 190 | +</section> | |
| 117 | 191 | |
| 192 | +<!-- ============ TAB 3: STYLE ============ --> | |
| 193 | +<section class="gvnsql-section" data-tab="style"> | |
| 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 to use the built-in palette.</p> | |
| 196 | + <div id="gvnsql-colors-rows" class="gvnsql-colors"></div> | |
| 197 | + <p><button type="button" class="button button-secondary" id="gvnsql-add-color">+ Add color</button></p> | |
| 198 | + <input type="hidden" name="guaven_sqlcharts_colors" id="guaven_sqlcharts_colors" | |
| 199 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_colors')); ?>"> | |
| 118 | 200 | |
| 119 | -<hr/> | |
| 120 | -<h3 id="Optional" id="Optional">Advanced parameters</h3> | |
| 121 | -<p> <a href="#Optional" class="btn button dynamicfieldbutton">Show/Hide Advanced Parameters</a></p> | |
| 201 | + <div class="gvnsql-grid2"> | |
| 202 | + <div class="gvnsql-field"> | |
| 203 | + <label for="guaven_sqlcharts_legend_position">Legend position</label> | |
| 204 | + <?php $gvnsql_legend = esc_attr($gvnsql_meta('guaven_sqlcharts_legend_position')); ?> | |
| 205 | + <select name="guaven_sqlcharts_legend_position" id="guaven_sqlcharts_legend_position"> | |
| 206 | + <option value="default">Hidden (default)</option> | |
| 207 | + <option value="top" <?php selected($gvnsql_legend, 'top'); ?>>Show at the top</option> | |
| 208 | + <option value="bottom" <?php selected($gvnsql_legend, 'bottom'); ?>>Show at the bottom</option> | |
| 209 | + <option value="left" <?php selected($gvnsql_legend, 'left'); ?>>Show at the left</option> | |
| 210 | + <option value="right" <?php selected($gvnsql_legend, 'right'); ?>>Show at the right</option> | |
| 211 | + </select> | |
| 212 | + <small>The legend lists your series names (Y label field).</small> | |
| 213 | + </div> | |
| 214 | + <div class="gvnsql-field"> | |
| 215 | + <label>Value labels</label> | |
| 216 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_forcetooltips" id="guaven_sqlcharts_forcetooltips" value="1" | |
| 217 | + <?php echo $gvnsql_meta('guaven_sqlcharts_forcetooltips') != '' ? 'checked' : ''; ?>> | |
| 218 | + Always show values on the chart (not only on mouse-over). Works with every chart type.</label> | |
| 219 | + </div> | |
| 220 | + <div class="gvnsql-field"> | |
| 221 | + <label for="guaven_sqlcharts_chartwidth">Max width (px)</label> | |
| 222 | + <input type="number" name="guaven_sqlcharts_chartwidth" id="guaven_sqlcharts_chartwidth" | |
| 223 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_chartwidth')); ?>" placeholder="auto"> | |
| 224 | + <small>Leave empty for full container width (responsive).</small> | |
| 225 | + </div> | |
| 226 | + <div class="gvnsql-field"> | |
| 227 | + <label for="guaven_sqlcharts_chartheight">Height (px)</label> | |
| 228 | + <input type="number" name="guaven_sqlcharts_chartheight" id="guaven_sqlcharts_chartheight" | |
| 229 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_chartheight')); ?>" placeholder="auto"> | |
| 230 | + <small>Leave empty to keep the natural aspect ratio.</small> | |
| 231 | + </div> | |
| 232 | + </div> | |
| 233 | +</section> | |
| 122 | 234 | |
| 123 | -<div class="dynamicfielddiv" style="display:none"> | |
| 235 | +<!-- ============ TAB 4: ADVANCED ============ --> | |
| 236 | +<section class="gvnsql-section" data-tab="advanced"> | |
| 237 | + <h4 class="gvnsql-step">Axis behavior (Line and Bar charts)</h4> | |
| 238 | + <div class="gvnsql-checkgrid"> | |
| 239 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_begin_with_0_x" value="1" | |
| 240 | + <?php echo $gvnsql_meta('guaven_sqlcharts_begin_with_0_x') !== '' ? 'checked' : ''; ?>> Force X axis to start at 0</label> | |
| 241 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_begin_with_0_y" value="1" | |
| 242 | + <?php echo $gvnsql_meta('guaven_sqlcharts_begin_with_0_y') !== '' ? 'checked' : ''; ?>> Force Y axis to start at 0</label> | |
| 243 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_round_y_values" value="1" | |
| 244 | + <?php echo $gvnsql_meta('guaven_sqlcharts_round_y_values') !== '' ? 'checked' : ''; ?>> Show only round numbers on the Y axis</label> | |
| 245 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_nostacked" value="1" | |
| 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> | |
| 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> | |
| 124 | 253 | |
| 125 | -<hr/> | |
| 126 | -<h4 class="gsql_h4">Width and height (with px. don't type px itself, just numbers)</h4> | |
| 127 | -<p> | |
| 254 | + <h4 class="gvnsql-step">Remote MySQL database (optional)</h4> | |
| 255 | + <p class="gvnsql-hint">Leave all fields empty to use this WordPress site's own database.</p> | |
| 256 | + <div class="gvnsql-grid2"> | |
| 257 | + <div class="gvnsql-field"> | |
| 258 | + <label for="guaven_sqlcharts_dbhost">Database host</label> | |
| 259 | + <input type="text" name="guaven_sqlcharts_dbhost" id="guaven_sqlcharts_dbhost" | |
| 260 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_dbhost')); ?>" placeholder="e.g. 127.0.0.1"> | |
| 261 | + </div> | |
| 262 | + <div class="gvnsql-field"> | |
| 263 | + <label for="guaven_sqlcharts_dbname">Database name</label> | |
| 264 | + <input type="text" name="guaven_sqlcharts_dbname" id="guaven_sqlcharts_dbname" | |
| 265 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_dbname')); ?>"> | |
| 266 | + </div> | |
| 267 | + <div class="gvnsql-field"> | |
| 268 | + <label for="guaven_sqlcharts_dblogin">Database username</label> | |
| 269 | + <input type="text" name="guaven_sqlcharts_dblogin" id="guaven_sqlcharts_dblogin" | |
| 270 | + value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_dblogin')); ?>"> | |
| 271 | + </div> | |
| 272 | + <div class="gvnsql-field"> | |
| 273 | + <label for="guaven_sqlcharts_dbpass">Database password</label> | |
| 274 | + <?php | |
| 275 | + $gvnsql_dbpass = $gvnsql_meta('guaven_sqlcharts_dbpass'); | |
| 276 | + if (is_array($gvnsql_dbpass)) { | |
| 277 | + $gvnsql_dbpass = guaven_sqlcharts_encrypt_decrypt('decrypt', $gvnsql_dbpass[1]); | |
| 278 | + } | |
| 279 | + ?> | |
| 280 | + <input type="password" name="guaven_sqlcharts_dbpass" id="guaven_sqlcharts_dbpass" | |
| 281 | + value="<?php echo esc_attr($gvnsql_dbpass); ?>" autocomplete="new-password"> | |
| 282 | + <small>Stored encrypted. WordPress supports MySQL databases; for other engines | |
| 283 | + <a target="_blank" href="https://guaven.com/contact/solution-request/">contact us</a>.</small> | |
| 284 | + </div> | |
| 285 | + </div> | |
| 286 | +</section> | |
| 128 | 287 | |
| 129 | -<input type="number" name="guaven_sqlcharts_chartwidth" id="guaven_sqlcharts_chartwidth" value="<?php | |
| 130 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_chartwidth', true)); | |
| 131 | -?>"> | |
| 288 | +</div><!-- /gvnsql-app --> | |
| 132 | 289 | |
| 133 | -<input type="number" name="guaven_sqlcharts_chartheight" id="guaven_sqlcharts_chartheight" value="<?php | |
| 134 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_chartheight', true)); | |
| 135 | -?>"> | |
| 136 | -</p> | |
| 137 | - | |
| 138 | -<p> | |
| 139 | -Color scheme (comma separated #RGB colors. f.e. <i>#FF0000</i> or <i>#00FF00,#BBCC00</i> ). | |
| 140 | -<br> | |
| 141 | -<input type="text" name="guaven_sqlcharts_colors" id="guaven_sqlcharts_colors" value="<?php | |
| 142 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_colors', true)); | |
| 143 | -?>" style="width:500px"> | |
| 144 | -<br><small>Leave empty if you want random colors</small> | |
| 145 | -</p> | |
| 146 | - | |
| 147 | -<p> | |
| 148 | -Mouse-over tooltips</p> | |
| 149 | -<p> | |
| 150 | -<label for="guaven_sqlcharts_forcetooltips"> | |
| 151 | - <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':''; ?>> | |
| 152 | - Force tooltips to be shown by default(not only after mouse-over) | |
| 153 | -</label> | |
| 154 | -</p> | |
| 155 | - | |
| 156 | -<p> | |
| 157 | -Legend block | |
| 158 | -<br> | |
| 159 | -<?php $guaven_sqlcharts_legend_position=esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_legend_position', true));?> | |
| 160 | -<select name="guaven_sqlcharts_legend_position" id="guaven_sqlcharts_legend_position"> | |
| 161 | - <option value="default">Default</option> | |
| 162 | - <option value="top" <?php echo $guaven_sqlcharts_legend_position=='top' ? "selected" : ''; ?>>Shop at the top</option> | |
| 163 | - <option value="bottom" <?php echo $guaven_sqlcharts_legend_position=='bottom' ? "selected" : ''; ?>>Shop at the bottom</option> | |
| 164 | - <option value="left" <?php echo $guaven_sqlcharts_legend_position=='left' ? "selected" : ''; ?>>Shop at the left</option> | |
| 165 | - <option value="right" <?php echo $guaven_sqlcharts_legend_position=='right' ? "selected" : ''; ?>>Shop at the right</option> | |
| 166 | - <option value="hide" <?php echo $guaven_sqlcharts_legend_position=='hide' ? "selected" : ''; ?>>Hide legend</option> | |
| 167 | -</select> | |
| 168 | -<br><small>Legend in a chart is Y values which usually appears at the top/right part of the graph</small> | |
| 169 | -</p> | |
| 170 | - | |
| 171 | -<hr/> | |
| 172 | -<h4 class="gsql_h4">X and Y Axis Ticks (for Line and Bar charts)</h4> | |
| 173 | -<p> | |
| 174 | -<label for="guaven_sqlcharts_begin_with_0_x"> | |
| 175 | - <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' : ''; ?>> | |
| 176 | - Force start X axes at 0 | |
| 177 | -</label> | |
| 178 | - | |
| 179 | -<label for="guaven_sqlcharts_begin_with_0_y"> | |
| 180 | - <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' : ''; ?>> | |
| 181 | - Force start Y axes at 0 | |
| 182 | -</label> | |
| 183 | -</p> | |
| 184 | - | |
| 185 | -<p> | |
| 186 | -<label for="guaven_sqlcharts_round_y_values"> | |
| 187 | - <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' : ''; ?>> | |
| 188 | - Show only round numbers in Y axis ticks | |
| 189 | -</label> | |
| 190 | - | |
| 191 | - | |
| 192 | - <label for="guaven_sqlcharts_nostacked"> | |
| 193 | -<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' : ''; ?>> | |
| 194 | -Disable "stackedness" for datasets | |
| 195 | -</label> | |
| 196 | - | |
| 197 | -</p> | |
| 198 | - | |
| 199 | - | |
| 200 | -<hr/> | |
| 201 | -<h4 class="gsql_h4">Remote MySQL Database Access Details</h4> | |
| 202 | - | |
| 203 | -Leave empty if you are connecting to local DB.<p> | |
| 204 | -<input type="text" name="guaven_sqlcharts_dbhost" id="guaven_sqlcharts_dbhost" value="<?php | |
| 205 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_dbhost', true)); | |
| 206 | -?>" placeholder="database host"> | |
| 207 | - | |
| 208 | -<input type="text" name="guaven_sqlcharts_dbname" id="guaven_sqlcharts_dbname" value="<?php | |
| 209 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_dbname', true)); | |
| 210 | -?>" placeholder="database name"> | |
| 211 | - | |
| 212 | -<input type="text" name="guaven_sqlcharts_dblogin" id="guaven_sqlcharts_dblogin" value="<?php | |
| 213 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_dblogin', true)); | |
| 214 | -?>" placeholder="database username"> | |
| 215 | - | |
| 216 | -<?php | |
| 217 | -$dbpass = get_post_meta($post->ID, 'guaven_sqlcharts_dbpass', true); | |
| 218 | -if (is_array($dbpass)) { | |
| 219 | - $dbpass = guaven_sqlcharts_encrypt_decrypt('decrypt', $dbpass[1]); | |
| 220 | -} | |
| 221 | - | |
| 222 | -?> | |
| 223 | -<input type="password" name="guaven_sqlcharts_dbpass" id="guaven_sqlcharts_dbpass" value="<?php | |
| 224 | -echo esc_attr($dbpass); | |
| 225 | -?>" placeholder="database password"> | |
| 226 | - | |
| 227 | -</p> | |
| 228 | -<p> | |
| 229 | -<small>Note: WordPress supports MySQL only Databases, to use non-MySQL databases some custom PHP code&driver would be needed. | |
| 230 | -To discuss how to build that you can <a target="_blank" href="https://guaven.com/contact/solution-request/">contact us</a>. | |
| 231 | - | |
| 232 | -</small><br> | |
| 233 | -</p> | |
| 234 | - | |
| 235 | - | |
| 236 | -<hr/> | |
| 237 | -<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> | |
| 238 | - and <a href="https://www.dropbox.com/s/fq1gnqcqdbj65ch/mysqlchart_example-3.png?dl=0" target="_blank">Example Demo</a> | |
| 239 | - </h4> | |
| 240 | - | |
| 241 | -<div > | |
| 242 | -<p style="font-weight:bold">Enter dynamic filter variables using the format described below:</p> | |
| 243 | -<textarea name="guaven_sqlcharts_variables" id="guaven_sqlcharts_variables" style="width:100%" rows="2"><?php | |
| 244 | -echo esc_textarea(get_post_meta($post->ID, 'guaven_sqlcharts_variables', true)); | |
| 245 | -?> | |
| 246 | -</textarea> | |
| 247 | -<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> | |
| 248 | - <ul style="padding-left:20px"><li>variable_name - any single name you want.</li><li> | |
| 249 | - default_value - default value when no any variable chosen by a user</li><li> | |
| 250 | - variable_label - Label which would be visible at a form above the chart</li><li> | |
| 251 | - variable_type - number, text or date</li><li> | |
| 252 | - ~ is a separator between variable elements.</li><li> | |
| 253 | - | is a separator between variables</li></ul> | |
| 254 | - | |
| 255 | - 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, | |
| 256 | - 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. | |
| 257 | - {post_date_tag} and {limit_tag} would be replaced with dynamic variables. | |
| 258 | - So, the plugin will automatically recognize it and put corresponding selectboxes above the chart. <br></p> | |
| 259 | -<p><label><input type="checkbox" name="guaven_sqlcharts_formpartrole" value="1" | |
| 260 | - <?php echo get_post_meta($post->ID, 'guaven_sqlcharts_formpartrole', true) !== '' ? 'checked' : ''; ?>> | |
| 261 | - Hide dynamic filters form from not-loggedin users at frontend. </label></p> | |
| 262 | - | |
| 263 | - <p><label>Submit button text (default is "OK") <input type="text" name="guaven_sqlcharts_formpartbutton" value="<?php | |
| 264 | -echo esc_attr(get_post_meta($post->ID, 'guaven_sqlcharts_formpartbutton', true)); ?>" placeholder="Submit button text"></label></p> | |
| 265 | - | |
| 266 | -</div> | |
| 267 | - | |
| 268 | - | |
| 269 | -</div> | |
| 270 | -<hr> | |
| 271 | - | |
| 272 | -<style> | |
| 273 | -.gsql_h4{color:#4693dd;margin-top:5px;margin-bottom:5px} | |
| 274 | -.wpdberror{color:white;background: red;padding:10px;} | |
| 275 | -#guaven_sqlcharts_begin_with_0_y{margin-left:24px;} | |
| 276 | -</style> | |
| 277 | 290 | <script> |
| 278 | -if (jQuery("#post").attr("action").indexOf("#") === -1){ | |
| 291 | +if (jQuery("#post").attr("action") && jQuery("#post").attr("action").indexOf("#") === -1){ | |
| 279 | 292 | jQuery("#post").attr("action", jQuery("#post").attr("action") + "#sqldemo"); |
| 280 | 293 | } |
| 281 | 294 | </script> |
| 295 | + | |
| 282 | 296 | <?php |
| 283 | 297 | $postfix = guaven_sqlcharts_graphtype($post); |
| 284 | -if ($postfix !== '') { | |
| 285 | - | |
| 298 | +if ($postfix !== '' or $gvnsql_meta('guaven_sqlcharts_code') != '') { | |
| 299 | + // legacy google types ($postfix === '') render via the [gvn_schart] alias shortcode | |
| 286 | 300 | ?> |
| 287 | 301 | <div class="gf-alert-success gf-alert"> |
| 288 | 302 | <h4> |
| 289 | 303 | Text shortcode: [gvn_schart<?php |
| @@ -289,9 +303,9 @@ | ||
| 289 | 303 | Text shortcode: [gvn_schart<?php |
| 290 | 304 | echo esc_attr($postfix); |
| 291 | 305 | ?> id="<?php |
| 292 | 306 | echo esc_attr($post->ID); |
| 293 | -?>"<?php echo get_post_meta($post->ID,'guaven_sqlcharts_tablepart', true) !== '' ? ' table="1"' : ''; ?>] | |
| 307 | +?>"<?php echo $gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : ''; ?>] | |
| 294 | 308 | <br> |
| 295 | 309 | <br> |
| 296 | 310 | PHP shortcode: <?php echo do_shortcode(' [gvn_schart<?php |
| 297 | 311 | echo esc_attr($postfix); |
| @@ -296,27 +310,29 @@ | ||
| 296 | 310 | PHP shortcode: <?php echo do_shortcode(' [gvn_schart<?php |
| 297 | 311 | echo esc_attr($postfix); |
| 298 | 312 | ?> id="<?php |
| 299 | 313 | echo esc_attr($post->ID); |
| 300 | -?>"<?php echo get_post_meta($post->ID,'guaven_sqlcharts_tablepart', true) !== '' ? ' table="1"' : ''; ?>]'); ?> | |
| 314 | +?>"<?php echo $gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : ''; ?>]'); ?> | |
| 301 | 315 | </h4> |
| 302 | -<p>Note: Shortcodes supports width and height attributes. F.e. [gvn_schart<?php | |
| 316 | +<p>Note: Shortcodes support width and height attributes, f.e. [gvn_schart<?php | |
| 303 | 317 | echo esc_attr($postfix); |
| 304 | -?> id="1" width="500" height="400"]. If no attributes, default width, height (which you enter in this page above) will be used. | |
| 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 } ?> | |
| 305 | 331 | </div> |
| 306 | 332 | <hr> |
| 307 | -<h3 id="sqldemo" name="sqldemo">Save Changes and See Live Demo</h3> | |
| 333 | +<h3 id="sqldemo" name="sqldemo">Live Preview <small style="font-weight:normal">(reflects the last saved state — press Update to refresh)</small></h3> | |
| 308 | 334 | <?php |
| 309 | - echo do_shortcode('[gvn_schart' . esc_attr($postfix) . ' id="' . esc_attr($post->ID) . '" ' . (get_post_meta($post->ID,'guaven_sqlcharts_tablepart', true) !== '' ? ' table="1"' : '') . ']'); | |
| 335 | + echo do_shortcode('[gvn_schart' . esc_attr($postfix) . ' id="' . esc_attr($post->ID) . '" ' . ($gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : '') . ']'); | |
| 310 | 336 | |
| 311 | 337 | } |
| 312 | 338 | ?> |
| 313 | -<script> | |
| 314 | -jQuery(".dynamicfieldbutton").click(function(){jQuery(".dynamicfielddiv").fadeToggle("slow")}); | |
| 315 | -plugindirurl = '<?php echo esc_url(plugin_dir_url(__FILE__) . 'asset/img/'); ?>'; | |
| 316 | -jQuery("#guaven_sqlcharts_graphtype").change(function(){ | |
| 317 | - jQuery(".charttype").attr("src", plugindirurl + jQuery(this).val().replace("_l", "").replace("column", "bar") + '.png'); | |
| 318 | -}); | |
| 319 | -jQuery("#guaven_sqlcharts_graphtype").trigger('change'); | |
| 320 | - | |
| 321 | -</script> | |
| 322 | -<?php | |
