Hovering on points shows point value
-
Hi,
thanks for this great plugin. I would like to ask you if it’s possible to have the function that when I hover with the mouse on a point of a line chart I see a little box that says me the value of that point.
Thanks!
Viewing 7 replies - 1 through 7 (of 7 total)
-
The plugin doesn’t currently support this, but you can add the necessary scripts to the page yourself. See https://github.com/krzysu/flot.tooltip.
Hi, thanks for your reply. Yes, but how can I add the necessary script to the page?
I’ve already written the script that is the following:var line_data1 = { label: 'ROE', data: [[1963, 43], [1959, 48], [1956, 50], [1952, 30]], color: "#3c8dbc" }; $.plot("#roe", [line_data1], { grid: { hoverable: true, borderColor: "#f3f3f3", borderWidth: 3, tickColor: "#f3f3f3" }, series: { shadowSize: 0, lines: { show: true, lineWidth: 3 }, points: { show: true, radius: 5 } }, lines: { fill: false, color: ["#3c8dbc"] }, legend: { show: false, }, yaxis: { show: true, tickFormatter: (function formatter(y, axis) { return y + "%"}), tickDecimals: 0 }, xaxis: { show: true, tickDecimals: 0 } }); //Initialize tooltip on hover $("<div class='tooltip-inner' id='line-chart-tooltip'></div>").css({ position: "absolute", display: "none", opacity: 0.8 }).appendTo("body"); $("#roe").bind("plothover", function (event, pos, item) { if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); $("#line-chart-tooltip").html(item.series.label + " on " + Math.floor(x) + " is " + y + "%") .css({top: item.pageY + 15, left: item.pageX - 55}) .fadeIn(200); } else { $("#line-chart-tooltip").hide(); } }); /* END LINE CHART */ }); /* * Custom Label formatter * ---------------------- */ function labelFormatter(label, series) { return "<div style='font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>"; }How can I insert this code in your plugin?
Thanks for your support ??Ok, I’ve found the solution by myself.
The file to modify is the “wpflot.php” that you can find inside the “/wp-content/plugins/wp-flot” path.
Substitute the code from line 109 to line 143 with the following:
var options$number = { series: { shadowSize: 0, points: { show: {$points}, radius: 5 }, lines: { show: true, fill: {$fill}, fillColor: { colors: [ { opacity: 0.6 }, { opacity: 0.3 } ] }, steps: {$steps}, lineWidth: 3 }, }, lines: { fill: false, color: ["#3c8dbc"] }, legend: { show: {$legend}, backgroundOpacity: 0.7 }, grid: { hoverable: true, borderColor: "#f3f3f3", borderWidth: 3, tickColor: "#f3f3f3" }, yaxis: { show: true, tickFormatter: (function formatter(y, axis) { return y + "%"}), tickDecimals: 0, min: {$miny}, max: {$maxy} }, xaxis: { show: true, tickDecimals: 0, min: {$minx}, max: {$maxx} }, }; var plotarea$number = $("#plotarea$number"); var plot$number = $.plot( plotarea$number , dataseries$number, options$number ); }); //Initialize tooltip on hover $("<div class='tooltip-inner' id='line-chart-tooltip'></div>").css({ position: "absolute", display: "none", opacity: 0.8 }).appendTo("body"); $("#plotarea$number").bind("plothover", function (event, pos, item) { if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); $("#line-chart-tooltip").html(item.series.label + " on " + Math.floor(x) + " is " + y + "%") .css({top: item.pageY + 15, left: item.pageX - 55}) .fadeIn(200); } else { $("#line-chart-tooltip").hide(); } }); /* * Custom Label formatter * ---------------------- */ function labelFormatter(label, series) { return "<div style='font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>"; }Save the file and upload it on your server, overwriting the old “wpflot.php”.
That’s all.
Good morning,
considering I’ve improved your plugin, can you update it officially? I’ve improved a little bit your code since what I’ve written yesterday. Let me know if you want that I send you the “wpflot.php” file. In that case, I need your contact or let me know if I can attach it here.If the amount of code is similar to above, I think it’s easiest if you’d just paste it here. I’ll certainly look into adding this to the plugin; it would need to be made an option, instead of always though.
Sorry mate for the delay. Here it is the “wpflot.php” file, the only one I’ve modified:
<?php /* Plugin Name: WP Flot Plugin URI: https://www.youssouhaagsman.nl/wpflot/ Description: Shortcodes for Flot Version: 0.2.2 Author: Youssou Haagsman Author URI: https://www.youssouhaagsman.nl License: GPLv2 */ /* Copyright 2015 Youssou Haagsman This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ // Script load_plugin_textdomain('wpflot', false, basename( dirname( __FILE__ ) ) . '/languages' ); function flot_scripts() { $flot = get_post_meta( get_the_ID(), 'flot', true ); if($flot == 'yes' || is_home() || is_category() || is_tag() || is_archive()) { wp_register_script('flot', plugins_url( 'js/jquery.flot.all.min.js', __FILE__ ) ,array('jquery')); wp_enqueue_script('flot'); function legendstyle() { $legendstyle = <<<STYLE <style type="text/css"> .legend table { width: auto; border: 0px; } .legend tr { border: 0px; } .legend td { padding: 5px; font-size: 12px; border: 0px; } </style> STYLE; echo $legendstyle; } add_action('wp_head', 'legendstyle'); } } add_action('wp_enqueue_scripts', 'flot_scripts'); // Shortcodes function linechart_shortcode( $atts, $content ) { extract( shortcode_atts( array( 'name' => 'Chart', 'height' => '400px', 'width' => '100%', 'points' => 'true', 'fill' => 'false', 'steps' => 'false', 'maxx' => 'null', 'maxy' => 'null', 'minx' => 'null', 'miny' => 'null', 'percentage' => '', //on wordpress you can declare -> percentage="%" and it will show the % symbol on y-axis and hovering on a chart point 'legend' => 'true' ), $atts ) ); static $number = 0; $number++; $content = strip_tags($content); if (get_post_meta( get_the_ID(), 'flot', true ) !== 'yes') { update_post_meta( get_the_ID(), 'flot', 'yes'); } return <<<HTML <div id="plotarea$number" style="height: {$height}; width: {$width};"> </div> <script type="text/javascript"> jQuery(document).ready(function($){ var dataseries$number = [ $content ]; var options$number = { series: { shadowSize: 0, points: { show: {$points}, radius: 5 }, lines: { show: true, fill: {$fill}, fillColor: { colors: [ { opacity: 0.6 }, { opacity: 0.3 } ] }, steps: {$steps}, lineWidth: 3 }, }, lines: { fill: false, color: ["#3c8dbc"] }, legend: { show: {$legend}, backgroundOpacity: 0.7 }, grid: { hoverable: true, borderColor: "#f3f3f3", borderWidth: 3, tickColor: "#f3f3f3" }, yaxis: { show: true, tickFormatter: (function formatter(y, axis) { return y + "{$percentage}"}), tickDecimals: 0, min: {$miny}, max: {$maxy} }, xaxis: { show: true, tickDecimals: 0, min: {$minx}, max: {$maxx} }, }; var plotarea$number = $("#plotarea$number"); var plot$number = $.plot( plotarea$number , dataseries$number, options$number ); }); //Initialize tooltip on hover $("<div class='tooltip-inner' id='line-chart-tooltip'></div>").css({ position: "absolute", display: "none", opacity: 0.8 }).appendTo("body"); $("#plotarea$number").bind("plothover", function (event, pos, item) { if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); $("#line-chart-tooltip").html(item.series.label + " on " + Math.floor(x) + " is " + y + "{$percentage}") .css({top: item.pageY + 15, left: item.pageX - 55}) .fadeIn(200); } else { $("#line-chart-tooltip").hide(); } }); /* * Custom Label formatter * ---------------------- */ function labelFormatter(label, series) { return "<div style='font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>"; } </script> HTML; } function barchart_shortcode( $atts, $content ) { extract( shortcode_atts( array( 'name' => 'Chart', 'height' => '400px', 'width' => '100%', 'fill' => 'true', 'maxx' => 'null', 'maxy' => 'null', 'minx' => 'null', 'miny' => 'null', 'legend' => 'true', 'horizontal' => 'false' ), $atts ) ); static $number = 0; $number++; if (get_post_meta( get_the_ID(), 'flot', true ) !== 'yes') { update_post_meta( get_the_ID(), 'flot', 'yes'); } $content = strip_tags($content); return <<<HTML <div id="bararea$number" style="height: {$height}; width: {$width};"> </div> <script type="text/javascript"> jQuery(document).ready(function($){ var bardataseries$number = [ $content ]; var baroptions$number = { series: { bars: { show: true, align: "center", barWidth: 0.5, horizontal: {$horizontal} } }, legend: { show: {$legend}, backgroundOpacity: 0.7 }, grid: { backgroundColor: null }, yaxis: { min: {$miny}, max: {$maxy} }, xaxis: { min: {$minx}, max: {$maxx} }, }; var bararea$number = $("#bararea$number"); var barplot$number = $.plot( bararea$number , bardataseries$number, baroptions$number ); }); </script> HTML; } function piechart_shortcode( $atts, $content ) { extract( shortcode_atts( array( 'name' => 'Chart', 'height' => '400px', 'width' => '100%', 'legend' => 'false', 'donut' => '0', 'combine' => '0' ), $atts ) ); static $number = 0; $number++; if (get_post_meta( get_the_ID(), 'flot', true ) !== 'yes') { update_post_meta( get_the_ID(), 'flot', 'yes'); } $content = strip_tags($content); $other = __('Other','wpflot'); return <<<HTML <div id="piearea$number" style="height: {$height}; width: {$width};"> </div> <script type="text/javascript"> jQuery(document).ready(function($){ var pie_dataseries$number = [ $content ]; var options$number = { series: { pie: { show: true, innerRadius: {$donut}, combine: { color: '#999', threshold: {$combine}, label: '{$other}' }, } }, legend: { show: {$legend}, backgroundOpacity: 0.7 }, grid: { backgroundColor: null } }; var piearea$number = $("#piearea$number"); var pieplot$number = $.plot( piearea$number , pie_dataseries$number, options$number ); }); </script> HTML; } add_shortcode( 'linechart', 'linechart_shortcode' ); add_shortcode( 'piechart', 'piechart_shortcode' ); add_shortcode( 'barchart', 'barchart_shortcode' ); add_action( 'admin_init', function() { if ( ! function_exists( 'shortcode_ui_register_for_shortcode' ) ) { /* add_action( 'admin_notices', function(){ if ( current_user_can( 'activate_plugins' ) ) { echo '<div class="error message"><p>__( 'It is recommended to enable Shortcake to make adding shortcodes easier.', 'wpflot' ),</p></div>'; } }); */ return; } else { shortcode_ui_register_for_shortcode( 'linechart', array( 'label' => __( 'Linechart', 'wpflot' ), 'listItemImage' => 'dashicons-chart-line', 'inner_content' => array( 'label' => __( 'Data', 'wpflot' ), ), 'attrs' => array( array( 'label' => __( 'Name', 'wpflot' ), 'attr' => 'name', 'type' => 'text', ), array( 'label' => __( 'Height', 'wpflot' ), 'attr' => 'height', 'type' => 'text', 'meta' => array( 'placeholder' => '400px', ), ), array( 'label' => __( 'Width', 'wpflot' ), 'attr' => 'width', 'type' => 'text', 'meta' => array( 'placeholder' => '100%', ), ), array( 'label' => __( 'Points', 'wpflot' ), 'attr' => 'points', 'type' => 'checkbox', ), array( 'label' => __( 'Fill', 'wpflot' ), 'attr' => 'fill', 'type' => 'checkbox', ), array( 'label' => __( 'Steps', 'wpflot' ), 'attr' => 'steps', 'type' => 'checkbox', ), array( 'label' => __( 'Legend', 'wpflot' ), 'attr' => 'steps', 'type' => 'checkbox', ), array( 'label' => __( 'Maximum value X-axis', 'wpflot' ), 'attr' => 'maxx', 'type' => 'number', ), array( 'label' => __( 'Maximum value Y-axis', 'wpflot' ), 'attr' => 'maxy', 'type' => 'number', ), array( 'label' => __( 'Minimum value X-axis', 'wpflot' ), 'attr' => 'minx', 'type' => 'number', ), array( 'label' => __( 'Minimum value Y-axis', 'wpflot' ), 'attr' => 'miny', 'type' => 'number', ), ), ) ); shortcode_ui_register_for_shortcode( 'barchart', array( 'label' => __( 'Barchart', 'wpflot' ), 'listItemImage' => 'dashicons-chart-bar', 'inner_content' => array( 'label' => 'Data', ), 'attrs' => array( array( 'label' => __( 'Height', 'wpflot' ), 'attr' => 'height', 'type' => 'text', 'meta' => array( 'placeholder' => '400px', ), ), array( 'label' => __( 'Width', 'wpflot' ), 'attr' => 'width', 'type' => 'text', 'meta' => array( 'placeholder' => '100%', ), ), array( 'label' => __( 'Horizontal', 'wpflot' ), 'attr' => 'horizontal', 'type' => 'checkbox', ), array( 'label' => __( 'Legend', 'wpflot' ), 'attr' => 'steps', 'type' => 'checkbox', ), array( 'label' => __( 'Maximum value X-axis', 'wpflot' ), 'attr' => 'maxx', 'type' => 'number', ), array( 'label' => __( 'Maximum value Y-axis', 'wpflot' ), 'attr' => 'maxy', 'type' => 'number', ), array( 'label' => __( 'Minimum value X-axis', 'wpflot' ), 'attr' => 'minx', 'type' => 'number', ), array( 'label' => __( 'Minimum value Y-axis', 'wpflot' ), 'attr' => 'miny', 'type' => 'number', ), ), ) ); shortcode_ui_register_for_shortcode( 'piechart', array( 'label' => __( 'Piechart', 'wpflot' ), 'listItemImage' => 'dashicons-chart-pie', 'inner_content' => array('label' => __( 'Data', 'wpflot' )), 'attrs' => array( array( 'label' => __( 'Height', 'wpflot' ), 'attr' => 'height', 'type' => 'text', 'meta' => array( 'placeholder' => '400px', ), ), array( 'label' => __( 'Width', 'wpflot' ), 'attr' => 'width', 'type' => 'text', 'meta' => array( 'placeholder' => '100%', ), ), array( 'label' => __( 'Legend', 'wpflot' ), 'attr' => 'steps', 'type' => 'checkbox', ), array( 'label' => __( 'Doughnut hole', 'wpflot' ), 'attr' => 'donut', 'type' => 'number', 'meta' => array( 'placeholder' => '0', ), 'description' => __( 'The size of the doughnut hole, as a number between 0 and 1.', 'wpflot' ) ), ), ) ); } } ); add_filter( 'no_texturize_shortcodes', 'wpf_no_wptexturize' ); function wpf_no_wptexturize($shortcodes){ $shortcodes = array('linechart', 'piechart', 'barchart'); return $shortcodes; }; ?>Thanks, I’ll look into it.
Viewing 7 replies - 1 through 7 (of 7 total)
- The topic ‘Hovering on points shows point value’ is closed to new replies.
