Show labelsAbove only on mouseover

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Chawla on 24th August 2016
Hi,

I want to show labels above/ on the bar when i hover upon a particular bar.

please help me in this

regard.




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Modules_Metrics_Analytics_test" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>

<html xmlns="www.w3.org/1999/xhtml\">
<head runat="server">
     <title></title>
</head>
<body>
     <form id="form1" runat="server">
     <div align="left" width="600" height="275">
     <canvas id="cvs" width="500" height="250">
   <script>
       window.onload = function () {
           var bar = new RGraph.Bar({
               id: 'cvs',
               data: [12000000 , 13000000, 16000000 , 15000000, 10000600, 19000000, 19000000, 10000000, 10000000, 10000000, 13000000, 24000000],
               options: {
                   ylabels:false,
                   textSize: 6,
                 // textColor: canvasTextColor, //'rgb(222, 120, 0)'
                   textFont: 'verdana',
                   textAccessible: false,
                  // gutterTop: 0,
                   gutterLeft: 150,
                   //gutterRight:100,
                  // hmargin: 5,
              
                   labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                   //labelsAbove: [12000000 , 13000000, 16000000 , 15000000, 10000600, 19000000, 19000000, 10000000, 10000000, 10000000, 13000000, 24000000],
                   // labelsAboveAngle: -90,
                     labelsAboveColor: 'black',
                   //labelsIngraph: ['12000000' ,'13000000', '16000000' , '15000000', '10000600', '19000000', '19000000', '10000000', '10000000','10000000', '13000000', '24000000'],
                     //tooltips: ['2', '2', '2', '2', '2', '2', '2', '2', '2', '2', '2', '2', ],
                     tooltips: [
                    '<b>Winner!</b><br />John',
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                     ],
                     tooltipsEvent: onmousemove,
                   
                     tooltipsCssClass: 'bar_chart_tooltips_css'
               }

           }).draw();
           // line.ontooltip = CreateTooltipGraph;
       

           var yaxis = new RGraph.Drawing.YAxis(
               {
                  
               id: 'cvs',
               x: bar.gutterLeft,
               options: {
                   max: bar.scale2.max,
                   textSize: 6,
                   title: 'Widgets sold',
                   colors: ['black'],
                   tooltips: ['2', '2', '2', '2', '2', '2', '2', '2', '2', '2', '2', '2'],
                 // eventsMousemove: CreateTooltipGraph,
                 
               }
               }).draw();
     
       };
</script>
</canvas>
     </div>
     </form>
     <style>
  .bar_chart_tooltips_css {
     
         background-color: white;
         border: 2px solid black;
         padding: 3px;
     }
</style>
</body>
</html>
<script src="../../../JQueryScripts/RGraph.drawing.yaxis.js"></script>
     <%-- <script type="text/javascript" src="../../../JQueryScripts/jquery-1.10.2.min.js"></script>--%>
     <script src="../../../JQueryScripts/MetricsGraph.common.core.js"></script>
     <script src="../../../JQueryScripts/MetricsGraph.bar.js"></script>
     <%--<script src="../../../JQueryScripts/MetricGraph.common.key.js"></script>--%>
     <script src="../../../JQueryScripts/MetricsGraph.line.js"></script>
     <script src="../../../JQueryScripts/MetricsGraph.common.dynamic.js"></script>
<script src="../../../JQueryScripts/RGraph.common.zoom.js"></script>
     <script src="../../../JQueryScripts/jquery.Scrollbar.min.js"></script>
<script src="../../../JQueryScripts/RGraph.common.tooltips.js"></script>
     <%--<script src="../../../JQueryScripts/Dashboard.dataTables.js"></script>--%>

     <link href="../../../Style/analyticsMetrics.css" rel="stylesheet" />
<%-- <link href="../../../Style/DataTables.css" rel="stylesheet" />--%>
     <link href="../../../Style/analyticsMetricsScrollBar.css" rel="stylesheet" />
</asp:Content>


Posted by Richard on 24th August 2016
Hi there,

Well there's no onmouseover event in RGraph, but you can emulate it like this example shows. Everything you need is in the onmousemove event listener.

www.rgraph.net/tests/bar-labelsabove.html




Richard

Add a reply




« Back to message list