Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    styling a tooltip title attribute for a div generating a bar for a bar chart

    I hope this is the right place to post this. This question involves JavaScript and CSS.

    I have a line of JavaScript that generates bar chart bars dynamically. Positioning of the bar is inline using variables passed in to the block containing the JavaScript code. See next. bX, bY, bW, bH, bC, bT are the x and y coordinates of the bar, the width and height, the color, and the tooltip.

    function doBar(bX,bY,bW,bH,bC,bT) {
    return '<div style="position:absolute;left:'+bX+'px;top:'+bY+'px;width:'+bW+'px;height:'+bH+'px;clip:rect(0px,'+b W+'px,'+bH+'px,0px);background-color:'+bC+';cursor:crosshair;"
    onclick="alert(this.title);" title="'+bT+'"></div>';
    }

    This works as intended. But I would like to style the title attribute a little more. I have tried several things resulting in the title disappearing or being in the bar. I've been putting the CSS in the header of the module that includes and uses the JavaScript above that generates the bar charts. Any help is appreciated.

    Thanks
    ct

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,782
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    I have added a whole bunch of things to your doBar. I think you need to gives us more. Like the HTML and how your calling the js and what are you trying to add that isn't working.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    279
    Thanks
    5
    Thanked 46 Times in 46 Posts
    Quote Originally Posted by Craig Tussey View Post
    But I would like to style the title attribute a little more.
    you can't style the native "tooltip"

    you can replace it with custom

    onhover code
    Quote Originally Posted by Craig Tussey View Post

    I hope this is the right place to post this.
    This should be in HTML & CSS fotum
    Last edited by Shaka Zorba; Sep 12th, 2018 at 11:32 AM.
    we are all immigrants who face immanent deportation back to heaven

  4. #4
    New Coder
    Join Date
    Dec 2013
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for responding. I'll try to answer as you ask. If my explanation leaves something out, please ask. My platform is Windows, Apache, HTML, CSS, JavaScript, and PerlCGI.

    What I'm trying to do and can't so far is style the title ( content: attr(title) - bT) attribute in the doBar function as a more effective tooltip or replace it to style it. Except for the styling, this process works as intended at this time. My approach has been to add a class to the div in the doBar function and put the CSS in the <head> <style> area of the main program that brings the JavaScript API in. I tried the WW3 tooltip styling example and others I found after my own attempts did not work. Everything I've tried either leaves the native tooltip as is, makes it disappear, or puts the tip in the bar.

    First is a link that will show what the doBar function and the rest of the module does. It runs off a server at my home. If the link is not available, please try again. I have 5G instability in my area.

    http://steepusa.no-ip.info/scx/genam...ildren4%2Eview

    What you see in the link is content driven. This module is a design to shown any significant segment decomposition of any measure in a large structured, measure pattern representing an the effort to improve situations of investment and work like a union of countries, a nation, a state, city, county, or really any organization with a result/outcome measure base. The link produces 2 bar chart variations (value/rate) using the snippet above.

    The program structure is quite simple and generated dynamically in Perl/CGI.

    Define data linkages
    prepare name space
    bring in parameters.

    do content preparation

    transition to client
    define header including styles and JavaScript APIs - the JavaScript that doBar resides in is brought in with <script type='text/JavaScript' src='../stage/somename.js?p=3'></script>

    define body - in the body, the JavaScript API is invoked in an inline <script> block interspersed with Perl/CGI that generates the API inputs. Se below.

    Perl here - generate banner and banner content

    print" <script type='text/javascript' language='javascript'>
    var myGraph = new MWJ_graph(360,300,$kbc,$lgnd,$chrorent,\"#$whitegraphbg\")\n";

    Perl here


    print" myGraph.addDataSet('$colors[$j]','$facs[$j]',$valstrngs[$j],'$dup')\n";


    perl here


    print" myGraph.setTitles('','&nbsp&nbsp&nbsp&nbsp&nbsp$yearx','$dim ');\n";
    print" myGraph.setYAxis($incs);\n";

    Perl here

    print" myGraph.setXAxis($yrstrng);

    myGraph.buildGraph();
    </script>\n";

    myGraph.buildGraph() builds the graph using the inputs retrieved and prepared in the front end work and further formatted for input to the JavaScript API.

    Then the rest of the UI including the note, data references, on screen analysis if chosen (6 analysis forms are available).
    Last edited by Craig Tussey; Sep 13th, 2018 at 12:10 PM.

  5. #5
    New Coder
    Join Date
    Dec 2013
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sunfighter, please let me hear from you. And Shaka, I thought this post was sort of in between the 2 forums, but getting the CSS to apply in the JavaScript is the problem more than the CSS I think. I'll move it if I'm in the wrong place and can figure out how to move it.

    I made another post in the HTML / CSS forum that perhaps belongs here. It concerns the behavior of the browser Back button before and after a browser Refresh and the behavior of the collective page history of a page with up to 5 embedded <iframes> (or <object>) HTML elements that can have many links that add to the whole page history. It does not involve CSS, but does seem like the implementation of the HTML in the 6 browsers I test in (Chrome, Edge, FF, IE, O, and Safari). The MS browsers do it as I would expect. The other 4 don't.

    I'll try to respond in any way I should on the placement of my posts.
    Last edited by Craig Tussey; Sep 13th, 2018 at 01:05 PM.

  6. #6
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,782
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    It does not involve CSS, but does seem like the implementation of the HTML in the 6 browsers I test in (Chrome, Edge, FF, IE, O, and Safari). The MS browsers do it as I would expect. The other 4 don't.
    Sounds like the mother watching a military parade and she says "Look, everyone's out of step but our Johnny."

    Really can't help you with out code. Post the entire HTML/CSS here or supply a link to your website.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  7. #7
    New Coder
    Join Date
    Dec 2013
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sunfighter, I did supply a link 2 posts above.

  8. #8
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,782
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    doesn't work
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  9. #9
    New Coder
    Join Date
    Dec 2013
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It came right up for me. I do use a VPN to get a reasonably priced static (dedicated) IP address. I don't need the encryption, but it comes with it. The idea is open source.
    Last edited by Craig Tussey; Sep 14th, 2018 at 11:36 AM.

  10. #10
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,126
    Thanks
    4
    Thanked 455 Times in 444 Posts
    I'm wondering why you're sending all that style inlined in it. The only style you should have to inline is the height. (assuming this is a height based bar graph).

    Code:
    function bar(percent, title) {
    	return '\
    		<div>\
    			<div style="height:' + percent + '%">' + percent + '%</div>\
    			<span>' + title + '</span>\
    		</div>';
    }
    Use CSS to turn the span into the tooltip when the parent DIV is hovered.

    If you had an example of the data and visualization, I could probably dial this in better.

    Also it's suspect you're doing this as markup since this is JavaScript -- is this server-side or client side? If the latter that should really be done more along the lines of:

    Code:
    function attachBar(graph, percent, title) {
    	var
    		outer = graph.appendChild(document.createElement('div')),
    		inner = outer.appendChild(document.createElement('div')),
    		tooltip = outer.appendChild(document.createElement('span'));
    	
    	percent += '%';
    	inner.appendChild(document.createTextNode(inner.style.height = percent));
    	tooltip.appendChild(document.createTextNode(title));
    }
    So you aren't getting the parser involved with outmoded innerHTML style garbage. (again that depends on if this is client-side or server-side code)

    Any of the rest of that style likely belongs static in the stylesheet; though I'd have to see the intended result and a full data set to say for sure.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  11. #11
    New Coder
    Join Date
    Dec 2013
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    deathshadow,

    I send the height and width in because the number of bars depends on the number of significant segments which depends on the data. The design supports all significant segment organizations across an enterprise, like a state. The result/outcomemeasure base for a state is substantial. Each measure in each area of investment and work can have several significant segment organizations. The plot area is fixed so the width of the bar decreases as the number of bars increases. Below is the link from 6 posts above. I do use a VPN to get a reasonably priced static (dedicated) IP address. I don't need the encryption, but it comes with it. I hope you can see it. Its executing off an Apache server at my home in N. Madison County, KY. This 'all significant segment organizations' has practical limits of course. The line graph is available for up to 8 segments (as defined) to compare segment trends. This 8 number is changeable in a central implementation file.

    http://steepusa.no-ip.info/scx/genam...ildren4%2Eview

    It is client side.

    I have gotten a tooltip up. I was the problem of course. I was hoping I could style the native title tooltip Shaka. The new tip doesn't position like the title tooltip, but its a start. I would like it to position around the cursor. I do lose the bar area hover coloring to red that the title attribute gave me. The red bar coloring doesn't track the position of the cursor. I want to keep that if I can. I'll have to play with your second suggestion. The link above shows the native tooltip and onclick alert, the styled tooltip, and area coloring. Notice the '<<<' in the tip. My reason for wanting to style the tooltip was to introduce color for bar, tooltip, legend entry association. As you can see the color of the bar being pointed at becomes the color of the styled tooltip background. I'm going to have to work with the bar and style colors and position.

    Thanks for the help deathshadow.

    And sunfighter, I hope you were able to get the facility up. The inspection facilities built into some of browsers (i know you know) would give a better look at the HTML than I can give in a post. And please let me learn from how you re-imagined the dBar function.

    Thanks for talking with me everyone.
    Last edited by Craig Tussey; Sep 15th, 2018 at 02:04 AM.

  12. #12
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,782
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    No, the link does not work for me. Looks like DS has decided to take this over so I'll just wait and see if he does and go from there. You might redo the link just in case.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  13. #13
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,126
    Thanks
    4
    Thanked 455 Times in 444 Posts
    Yeah, that link is dead here.

    This site can’t be reached
    steepusa.no-ip.info took too long to respond.

    Even if you have to set the width manually, generally for any sort of bar chart the positioning should be able to be handled by flow.

    Let's set aside whatever server side language you are working in, and just focus on getting the markup and data doing what you want. Let's do a simple 5 bar graph and we'll assume the background, height, and width need to be set on the fly.

    For starters lets talk semantics, what the content IS. A bar chart is usually just a list of data, as such the correct syntactical/grammatical/structural semantic tags are UL/LI. Let us start there before we worry about making a bar graph out of it.

    Code:
    <ul class="barChart">
    	<li>15% SNAFU</li>
    	<li>32% TARFU</li>
    	<li>18% FUBAR</li>
    	<li>15% SUSFU</li>
    	<li>20% BOHICA</li>
    </ul>
    This provides useful information to non-visual users. We then enhance it with style. An empty DIV for the bar graph, and a SPAN around the text we can use to create our own tooltip-like behavior.

    Code:
    <ul class="barChart">
    	<li style="width:20%">
    		<div style="height:46.875%; background:orange;"></div>
    		<span>15% SNAFU</span>
    	</li>
    	<li style="width:20%">
    		<div style="height:100%; background:grey"></div>
    		<span>32% TARFU</span>
    	</li>
    	<li style="width:20%">
    		<div style="height:56.25%; background:blue"></div>
    		<span>18% FUBAR</span>
    	</li>
    	<li style="width:20%">
    		<div style="height:46.875%; background:green"></div>
    		<span>15% SUSFU</span>
    	</li>
    	<li style="width:20%">
    		<div style="height:62.5%; background:red"></div>
    		<span>20% BOHICA</span>
    	</li>
    </ul>
    Normally I would rail against using STYLE in this manner at all, but this style is helping to convey meaning one of the VERY FEW times the use of the style attribute is acceptable.

    Those heights are based on the idea of the largest one being 100% of the height, so that's 100% / 32% == 3.125, so we multiply all our other percentages by that.

    EVERYTHING else can/should be handled from the stylesheet. Something like this:


    Code:
    .barChart {
    	max-width:32em;
    	height:10em;
    	padding:0.5em;
    	margin:0 auto;
    	list-style:none;
    	border:0.2em solid #CCC;
    }
    
    .barChart li {
    	position:relative;
    	z-index:1;
    	float:left;
    	height:100%;
    }
    
    .barChart li:last {
    	margin-right:-3px; /* compensate for browser % errors */
    }
    
    .barChart li div {
    	position:absolute;
    	left:5%;
    	bottom:0;
    	width:90%;
    }
    
    .barChart span {
    	/*
    		we want to hide these offscreen instead of display:none as some
    		search engines and screen readers will ignore their text otherwise!
    		
    		Remember, search engines don't have eyeballs!
    	*/
    	position:absolute;
    	left:-999em;
    	top:100%;
    	padding:0.5em 1em;
    	white-space:pre;
    	background:#DDD;
    	border-radius:1em;
    	box-shadow:
    		0 0 1px 1px rgba(0,0,0,0.5),
    		0 0.25em 0.25em rgba(0,0,0,0.3);
    	transform:translate(-50%, 0.25em);
    }
    
    .barChart li:hover {
    	z-index:999; /* depth sort over sibling li */
    }
    
    .barChart li:hover span {
    	left:50%;
    }
    
    .barChart span:before {
    	content:"";
    	position:absolute;
    	top:-1em;
    	left:50%;
    	margin-left:-1em;
    	width:0;
    	height:0;
    	border-style:solid;
    	border-width:0 1em 1em;
    	border-color:transparent transparent #DDD;
    }
    Live demo here:

    Index of /for_others/Craig_Tussey/ - CutCodeDown

    That's generally what your scripting should be generating. We COULD make this even more versatile by using the CSS grid layout module so then you don't even have to code the widths, but that would involve

    The result is that your 'tooltip' can be styled however you like, the resultant graph is dynamic and be can be set to dynamically scale to the page's needs without editing the script, etc, etc... none of that pixel metric asshattery needed. Let the stylesheet do as much of your heavy lifting for you as you can!

    Assuming this is even the type of graph you meant, we've still seen neither your data nor your visuals. Maybe you could just make a codepen of it? Put a picture on pinterest or some other image hosting?

    If I have time later I'll toss together some JavaScript to show how I'd generate that on the fly... though if this is static content and not updated on the fly, I would have the flat list version above (with data attributes for the counts) in the markup and then enhance it into being a chart with the scripting, manipulating it on the DOM as needed.

    I might just go ahead and do that anyways since I'm going to 'need' something similar for one of my own projects soon.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  14. #14
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    DS,

    Sorry about the delay in responding. I've been trying to understand why my links are not working. My server has been rock solid for quite awhile. The answer had to be with my server, ISP, or linkage infrastructure. It was the server. The task manager was showing 100% disk utilization and it was thrashing. The server hard drive item index had been corrupted. I hope the links above work now. They do for me.

    Thank you for example and explanation. I have looked a little at the use of UL in bar charts. Looking at your example, I think I can generated markup emulating the function of the significant segment facility I've been trying to show you. Your CSS brings it alive. I'm learning from it.

    A little about what this application design is for may help in understanding what I've built. My application is a design for modeling the process and efforts of improvement in situations of investment and work of a partnership of representative government like a state (or any organization with a measure base). The state of Kentucky was my design guide. The enterprise of Kentucky state government has an interest in improving many situations like health or K 1-12 education. Each situation, today, has a heritage of 'result/outcome' measurement, a multi-billion dollar annual investment here in Kentucky. The measure pattern contains an amazing picture of the behavior of our people and the conditions of our place. My application is the design of a 'presentation layer' to present that picture to be populated by the expert layer of people across the enterprise. A 1000 people could be involved in content population and the production of this picture. Geography (and coloration) is a variable in this design, so we could be presenting the process of improvement of America.

    A situation of investment and work is represented in my application by a 'profile of best understanding' or measure-based model, as best we know it at this time. It can change. Each measure can be looked at at the application level of organization (e.g., state), in any significant segment organization, or in intermediate (district or work organizations/maybe 20 or more in Kentucky) and base (county in Kentucky) geographical organizations. The enterprise measure base for a state like Kentucky could have 1200 measures comprising 25 situation models as an example. I found about 800 in a one pass effort spanning 2 and half years. Each measure can be broken out in many ways. And the significant segment facility that this discussion is about does this for all measures and measure significant segment decompositions.

    The significant segment facility is integrated into the whole application. Below is a link to the 1st of 3 increasingly 'flat' primary UIs I've designed and built for this application, each with the same function. This one has a matrix organization. The 2nd UI uses a JavaScript API and the 3rd is done in an iframe. All data are part of a complete system test pattern, 1 of a set only documented internally. You might have questions if you set off on your own, but you can't hurt anything. I hope its pretty intuitive with a little explanation and exposure.

    http://steepusa.no-ip.info/scx/m3.cgi

    Take the Special View link at the top right of the matrix and the 1st choice under - State Breakout -. This is the facility I want to beef up the tooltip for. You can see the native title tooltip and the new one. At the state level (this case) of aggregation, the data structure is a set of rows of year, value, and rate. The data structure for the significant segment presentation example above is a set for each year of rows of segment, value, and rate. Segment descriptions can be expanded. And for the geographical presentation, the data structure is a set for each year of rows of area, value, and rate.

    The structure of the module is simple - prepare the data selected when the visualization was setup, do a banner and banner content, 1 or 2 side by side divs depending if on or off screen analysis is done, and instructions and data reference and data link. The function in this presentation includes a value or rate, gridded bar chart for up to the most recent 5 years (usually the case), mouse over bar color change, native collective tooltip (title) with a '<<<' pointer to the data for the bar being pointed to, a legend with mouse over spark lines of the value and rate trends for the last 5 years of the legend entry and a drill down capability for a more detailed value or rate graph of th trend of the legend entry. The state/stride stuff you'll see for the rate graph will take more explanation which is available on the banner of the entry link above. A bar chart of the most recent year is available on the banner. The on screen analysis shown is tabbed with text and embedded links. Other off screen forms are available,like an ebook pattern. A line graph link is available in the instructions to aid in the examination of select significant segment trends. The presentation is totally data drive with the exception of the general UI layout.

    Its a no SQL application and the I/O is my own. It done in 3 10 line functions that work with browser dynamics and UI structure. I hope this stuff comes up.

    What I have to work out for the new tooltip are onmouseover bar color in a way other than the native title tooltip, and positioning. I was thinking a unique ID on each bar would let me do a getElementByID and set the back ground color of the bar, but I haven't got it yet. I would like to emulate the native tooltip on positioning.

    --- Its still not working --- please be patient, I would like you to see the facility.
    Last edited by craigc4; Sep 17th, 2018 at 03:10 PM.

  15. #15
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    DS,

    Here are 2 links to images of the value/rate bar graphs from a free image sharing service called postimage. Both came right up for me.

    https://i.postimg.cc/XqrQKT1N/img14.jpg

    https://i.postimg.cc/44084xnY/img13.jpg

    My server can be accessed locally but not remotely. I've reinstalled the server and rebuilt the primary drive item access index. I'm still trying to understand. Its been solid for years. When I take my firewall down, all links I've given you work.

    My server is working again. I think the links will work now.
    Last edited by craigc4; Sep 18th, 2018 at 12:19 PM.


 
Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •