-
-
Save algmelo/13f54311eed2c8f643fc7920992a781b to your computer and use it in GitHub Desktop.
Generate graphic with Elementor form data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function get_elementor_form_data_by_parameter($parameter) { | |
| global $wpdb; | |
| $results = $wpdb->get_results( | |
| $wpdb->prepare(" | |
| SELECT sv.value | |
| FROM {$wpdb->prefix}e_submissions_values sv | |
| INNER JOIN {$wpdb->prefix}e_submissions s ON sv.submission_id = s.id | |
| WHERE sv.key = %s | |
| ", $parameter) | |
| ); | |
| $values = array_map(function($row) { | |
| return $row->value; | |
| }, $results); | |
| $counts = array_count_values($values); | |
| return $counts; | |
| } | |
| function render_custom_graphic_shortcode($atts) { | |
| $atts = shortcode_atts([ | |
| 'graphic' => 'bar', | |
| 'parameter' => 'estado' | |
| ], $atts); | |
| $data = get_elementor_form_data_by_parameter($atts['parameter']); | |
| $chart_id = 'chart_' . uniqid(); | |
| ob_start(); | |
| ?> | |
| <canvas id="<?php echo esc_attr($chart_id); ?>" width="400" height="200"></canvas> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const ctx = document.getElementById('<?php echo esc_js($chart_id); ?>').getContext('2d'); | |
| new Chart(ctx, { | |
| type: '<?php echo esc_js($atts['graphic']); ?>', | |
| data: { | |
| labels: <?php echo json_encode(array_keys($data)); ?>, | |
| datasets: [{ | |
| label: '<?php echo ucfirst(esc_js($atts['parameter'])); ?>', | |
| data: <?php echo json_encode(array_values($data)); ?>, | |
| backgroundColor: [ | |
| '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top' | |
| }, | |
| title: { | |
| display: true, | |
| text: 'Distribuição por <?php echo ucfirst(esc_js($atts['parameter'])); ?>' | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <?php | |
| return ob_get_clean(); | |
| } | |
| add_shortcode('custom_graphic', 'render_custom_graphic_shortcode'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment