Support » Plugin: WP Flot » Hovering on points shows point value

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author YSH

    (@ysh)

    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.

    Plugin Author YSH

    (@ysh)

    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: http://www.youssouhaagsman.nl/wpflot/
    Description: Shortcodes for Flot
    Version: 0.2.2
    Author: Youssou Haagsman
    Author URI: http://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;
    };
    
    ?>
    Plugin Author YSH

    (@ysh)

    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.