Always display Tooltip in CanvasJS, regardless of mousehover - javascript

I am currently working on a user input customizable pie chart web app through Javascript as a small side project, and currently stuck on trying to keep tooltips enabled.
Currently:
width: 800,
height:800,
tooltipContent: display,
animationEnabled: true,
title: {
text: "ss"
},
legend: {
maxWidth: 800,
itemWidth: 800
},
doesn't seem to be cutting it.
Any help would be greatly appreciated.

You can achieve it by setting external toolTip on mouseover of dataSeries.
please check this JSFiddle
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id ="tooltip" style= "width: 7%; padding: 5px; border: 2px solid rgb(82, 81, 78); background: rgba(255, 255, 255, 0.9); border-radius: 5px; user-select: none;">No data</div>
<script>
var toolTip = document.getElementById("tooltip");
function onMouseover(e){
toolTip.innerHTML = e.dataPoint.x + " : " + e.dataPoint.y ;
}
</script>

Related

how to show tooltip on piechart when hovering on legends

i am using prime faces pie chart and i have pie chart, tooltip on hovering piechart and legends.
i am trying to develop custom legends like if i hover or click on legends a tool tip should display on corresponding pie chart part.
since i am new to plots am not able to find a solution. please help me how to add tool tip effect for legends
Note: tooltip will display hovering piechart but need hovering on legends
piechart:
PrimeFaces Code:
<p:pieChart id="countries" value="#{chartController.pieChartModel}" extender="toolExt" seriesColors="33CC66,FFCC00,0000CC,FF0099,00CCCC,660099,00FF00,FF6600,003300,00FFFF" style="width:440px;height:296px;background-color: white; border: 2px inset #8B8378; padding: 2px; -moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-box-shadow: 0 3px 9px #666;" >
javascript for extender:
Note: extender property used in piechart tag to add custom data
<script>
function toolExt() {
this.cfg.highlighter = {
show:true,
tooltipLocation: 'se',
tooltipAxes: 'pieref',
tooltipAxisX: 20000,
tooltipAxisY: 20000,
useAxesFormatters: false,
formatString:'Accumulated Cost to %s: %s',
},
this.cfg.legend = {
show : true,
fontSize: '100px',
rowSpacing: '1px',
textColor: '000000',
},
this.cfg.seriesDefaults={
renderer: jQuery.jqplot.PieRenderer,
rendererOptions : {
sliceMargin: 3,
padding : 1,
diameter : 170,
}
},
this.cfg.grid = {
drawBorder: false,
shadow: false,
background: "white"
};
this.cfg.redraw;
}
</script>
java code
Note: i used sample code, in actual code data comefrom db and it will set upto 10 series
public class ChartController
{
private PieChartModel pieChartModel;
public ChartController()
{
pieChartModel = new PieChartModel();
pieChartModel.set("JAPAN", 102);
pieChartModel.set("AFGANISTAN", 36);
pieChartModel.set("UNITED STATE", 33.6);
pieChartModel.set("PAKISTAN", 20.5);
}
public PieChartModel getPieChartModel()
{
return pieChartModel;
}
}
i tried renderOptions but it didn't worked
please help me how to display tool-tip on piechart while mouse hover/clicking on legends.
Thanks
using amcharts able to render tool tip using legends.
Java Script Code
roboCallCountryCost.js
AmCharts.ready(function() {
var costCountriesData = document.getElementById('roboCallDashboard:CCpieval').value;
var CCchart = AmCharts.makeChart("CCpiediv", {
"type": "pie",
"theme": "none",
"labelsEnabled":"false",
"radius":100,
"hideBalloonTime":60,
"fontSize":10,
"marginBottom":5,
"marginTop":5,
"pullOutDuration": 0,
"pullOutRadius": 0,
"legend": {
"markerType": "square",
"position": "right",
"marginLeft": 30,
"autoMargins": true,
"markerDisabledColor":"#00CCFF",
"markerLabelGap":5,
"markerSize":13,
"verticalGap":2,
"horizontalGap":2,
"spacing":5,
},
"dataProvider":eval(costCountriesData),
"valueField": "countryCost",
"titleField": "countryName",
"balloonText": "<b><span style='font-size:14px'>Accumulated Cost to [[title]]: [[value]]</span></b>",
colors:["#33CC66","#FFCC00","#0000CC","#FF0099","#00CCCC","#660099","#00FF00","#FF6600","#003300","#00FFFF"],
labelsEnabled:false,
});
});
"PrimeFaces Code:"
<h:form id="roboCallDashboard">
<script src="amcharts.js" type="text/javascript"></script>
<script src="pie.js" type="text/javascript"></script>
<script src="roboCallCountryCost.js" type="text/javascript"></script>
<h:panelGrid columns="1" width="100%" styleClass="dashboardContentTable" headerClass="dashboardTableHeader" style="height:337px">
<div id="CCpiediv"/>
<h:inputHidden id="CCpieval" value="{chartController.pieChartModel}" />
</h:panelGrid>
</h:form>
CSS:
#CCpiediv {
width : 440px;
height : 296px;
border: 2px inset #8B8378;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 9px #666;
-moz--box-shadow: 0 3px 9px #666;
-o-box-shadow: 0 3px 9px #666;
box-shadow: 0 3px 9px #666;
background-color: white;
}
.amChartsLegend {
max-width: 130px;
overflow-x: scroll !important;
top: 2px !important;
height: 230px !important;
}
JAVA Code
ChartController.java
public String getPieChartModel() {
StringBuilder buf = new StringBuilder("[");
buf.append("{");
buf.append("countryName: ").append("\""+"AFGANISTAN"+"\"").append(",");
buf.append("countryCost: ").append("102").append(",");
buf.append("},");
buf.append("{");
buf.append("countryName: ").append("\""+"JAPAN"+"\"").append(",");
buf.append("countryCost: ").append("36").append(",");
buf.append("},");
buf.append("{");
buf.append("countryName: ").append("\""+"UNITED STATE"+"\"").append(",");
buf.append("countryCost: ").append("33.6").append(",");
buf.append("},");
buf.append("{");
buf.append("countryName: ").append("\""+"PAKISTAN"+"\"").append(",");
buf.append("countryCost: ").append("20.5").append(",");
buf.append("},");
buf.append("]");
return buf.toString();
}

Flot chart: legend and font

I have configured a bar chart using the jQuery Flot library. This is the code:
<style>
.flot-chart-bar {
height: 300px;
}
.flc-bar {
font-size: 2px;
border: 1px grey solid;
}
<div class="card profilestats" style="color: #fff !important;">
<div class="card-content" style="background-color: #bdbdbd !important;min-height:320px;">
<div id="bar-tipoReclamo" class="flot-chart-bar"></div>
<br>
<div class="flc-bar" style="background-color: white; "></div>
</div>
<div class="card-action" style="background-color: #757575 !important;;">
<span>Distribuzione Tipi di Reclamo negli ultimi 3 anni</span>
</div>
And this is the bar:
$.plot($("#bar-tipoReclamo"), barData, {
series: {
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
valueLabels: {
show: true
},
xaxis: {
ticks: [[0,currentYear-2],[1,currentYear-1],[2,currentYear]]
},
legend: {
container: '.flc-bar',
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts: {
content: " %y,%s " ,
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Now the question is pretty simple: how can i reduce the font size of the words inside the legend? I already tried using CSS and using some of Legend attributes that i found online but nothing seems to work.
Bar with Legend
I want to reduce the font of the words inside the white legend under the bar.
The CSS you have should work, but font-size: 2px; is probably not what you want.
See this fiddle for a full example based on your code where the font-size is specified in the CSS.

Round slider textbox always visable

I am using http://roundsliderui.com/demos.html round slider library. I want to show the editable textbox always show not hide. Thank you
Understand, you should supply the code and can get help or suggestions from people here. I took the example you provided and made some changes.
Here is a Working Example: http://jsfiddle.net/Twisty/Lorej7up/
HTML
<div class="slider-wrapper">
<div id="slider">
</div>
<input type="text" id="myToolTip" class="rs-input rs-tooltip-text" style="height: 27px; width: 32px;" />
</div>
CSS
.slider-wrapper {
position: relative;
}
.slider-wrapper input.rs-input {
position: absolute;
top: 95px;
left: 93px;
z-index: 100;
}
jQuery
function updateToolTip() {
$("#myToolTip").val($("#slider").roundSlider("option", "value"));
}
$(function() {
$("#slider").roundSlider({
sliderType: "min-range",
radius: 110,
width: 10,
startAngle: 90,
value: "82",
showTooltip: false,
editableTooltip: false,
drag: updateToolTip,
change: updateToolTip
});
$("#myToolTip").val($("#slider").roundSlider("option", "value"));
$("#myToolTip").change(function() {
$("#slider").roundSlider("option", "value", $(this).val());
});
});

FAQ Accordion Style not expandable and clickable

I have been trying to make a copy of a FAQ Accordion style like this one
here.
The problems are that the first question is collapsed and when I click on the other questions they wont open nor respond to any of my clicks. What should i do to make this correct? I believe something is wrong with my JQuery.
HTML CODE
<div class="accordion-header active-header">Q: Is this free?</div>
<div class="accordion-content open-content" style="display: block;">
<p>A: Yes, uploading and downloading is 100% Free for all users. We offer PRO accounts which allows for greater flexibility with uploading/downloading.</p>
</div>
<div class="accordion-header inactive-header">Q: Will my files be removed?</div>
<div class="accordion-content">
<p>A: Free/non accounts files are kept for 90 days. PRO accounts files are kept for unlimited days.</p>
</div>
<div class="accordion-header inactive-header">Q: How many files can I upload?</div>
<div class="accordion-content">
<p>A: You can upload as many files as you want, as long as each one adheres to the Terms of Service and the maximum file upload size.</p>
</div>
<div class="accordion-header inactive-header">Q: Which files types am I allowed to upload?</div>
<div class="accordion-content">
<p>A: You may upload the following types of files: Any.</p>
</div>
<div class="accordion-header inactive-header">Q: Are there any restrictions to the size of my uploaded files?</div>
<div class="accordion-content">
<p>A: Each file you upload must be less than 1.00 GB in size for free/non accounts or less than 10.00 GB in size for PRO accounts. If it is greater than that amount, your file will be rejected.</p>
</div>
<div class="accordion-header inactive-header">Q: Can I upload music or videos?</div>
<div class="accordion-content">
<p>A: Yes. Music and video hosting is permitted as long as you own the copyright on the content and it adheres to the terms and conditions.</p>
</div>
<div class="accordion-header inactive-header">Q: There are some files on our servers which may have been subject to copyright protection, how can I notify you of them?</div>
<div class="accordion-content">
<p>A: Via our report abuse pages.</p>
</div>
<div class="accordion-header inactive-header">Q: Do files have direct links?</div>
<div class="accordion-content">
<p>A: All users are shown a download page so no direct links are available, we may introduce direct link generation in the future.</p>
</div>
CSS CODE
.accordion-header {
font-size: 18px;
background: #ebebeb;
margin: 5px 0 0 0;
padding: 14px;
border: 1px solid #D8D8D8;
cursor: pointer;
color: #8E8E8E;
text-align: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.active-header {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background: rgb(96, 168, 227);
background-repeat: no-repeat;
background-position: right 50%;
color: white;
text-shadow: 1px 1px rgb(72, 141, 197);
}
.inactive-header {
background: url(images/inactive-header.gif) #fff;
background-repeat: no-repeat;
background-position: right 50%;
}
.inactive-header:hover {
background: url(images/inactive-header.gif) #f5f5f5;
background-repeat: no-repeat;
background-position: right 50%;
}
.accordion-content {
display: none;
padding: 18px;
width: 100%;
background: #ffffff;
border: 1px solid #cccccc;
border-top: 0;
text-align: left;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
JS CODE
$(document).ready(function () {
'use strict';
$('.nav').onePageNav({
filter: ':not(.external)'
});
});
jQuery(document).ready(function ($) {
'use strict';
$('.animated').appear(function () {
var elem = $(this);
var animation = elem.data('animation');
if (!elem.hasClass('visible')) {
var animationDelay = elem.data('animation-delay');
if (animationDelay) {
setTimeout(function () {
elem.addClass(animation + " visible");
}, animationDelay);
} else {
elem.addClass(animation + " visible");
}
}
});
});
$(document).ready(function () {
'use strict';
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
function showUploaderPopup() {
jQuery('#fileUploadWrapper').modal('show', {
backdrop: 'static'
}).on('shown.bs.modal');
}
function createSlowGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
colorStart: '#CF0808',
colorStop: '#DA0202',
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-slow');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(9);
}
$(document).ready(function () {
$('.accordion-header').toggleClass('inactive-header');
$('.accordion-header').click(function () {
if ($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
} else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
function createFastGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
percentColors: [
[0.0, "#000000"],
[0.50, "#cc0000"],
[1.0, "#00cc00"]
],
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-fast');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(100);
}! function ($) {
$(function () {
var $root = $('html, body');
$('.smooth-anchor-link').click(function () {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
})
}(window.jQuery);
Here is the JSFiddle example, you may try to update it if you know the correct solution :)
PS:
I know there are other similar questions here but I tried all of them none solved my problem.
Your code throws an error Uncaught TypeError: undefined is not a function which is caused by onePageNav() and appear(), these are not official javascript/jQuery functions. If you copied them from somewhere else, they are most likely external plugin functions.
Simply removing these 2 functions from your javascript fixes your clicking issue. JSFiddle link
Please note that you also do not need to use $(document).ready(function () in JSFiddle, it does this automatically.
When trying to replicate something, try to build it yourself from scratch. You will not learn anything from just copying the entire thing. Try to write your own functions instead, so you can learn how everything works. The jQuery documentations should help.
If you are interested in learning how code in Javascript and/or jQuery, try the following sites:
CodeAcademy - General knowledge basics of several languages.
Tuts+ - Tutorials on more specific topics.
KhanAcademy
Mozilla Docs

JQueryUI window not covering all content elements

I have a task at work where I must implement a simple browser-based chat system for an intranet. Backend is ready, and now I'm trying to create the UI part but it's giving me a big headache, and been banging my head against the desk for hours because of this :(
Here's my JSFiddle: http://jsfiddle.net/2PMvM/ (it uses JQuery + JQueryUI - 1.x)
The HTML, semantically, looks right, but it doesn't work as good as it looks. The idea is that the window (red border div) should contain all of its elements. I don't know why the list's horizontal scrollbar and then my textarea get out of the window, as if there's some offset I'm not taking into account?
I'm trying to do this with the least JS possible, but if the CSS way is too complicated, I'm willing to take a JS solution then.
What could be wrong though?. Thanks in advance :)
--- SO requires me to put the code, so here it goes:
Note: be sure to include this JS: https://github.com/AndrewDryga/jQuery.Textarea.Autoresize/raw/master/js/jquery.textarea.autoresize.js because it is required so my textarea autosizes when it gets more text. The window should contain the textarea even if it resizes. Seems like CSS could do it, but no?
IT IS SOLVED!! Thanks to #Trevor: Here's the updated code + Fiddle HERE. Thanks!
HTML:
<div class="window">
<div style="height: 20px;" class="wndHandle">Some username :D</div>
<div class="content" id="chatDiv" style="background:#fff;overflow: scroll;">
<ul class="ulChat">
<li class="msg in">Test message for testing 1</li>
<li class="msg out">Test message for testing 2</li>
<li class="msg out">Test message for testing 3</li>
<li class="msg in">Test message for testing 4</li>
</ul>
</div>
<div class="footer">
<textarea style="width: 100%; resize: none; overflow-x: hidden;" rows="1" cols="1"></textarea>
</div>
</div>
CSS:
.ui-resizable-handle
{
background: #f5dc58; border: 1px solid #FFF;
width: 9px; height: 9px;
z-index: 2;
}
.ui-resizable-se { right: -5px; bottom: -5px; }
.window
{
position: absolute;
display: inline-block;
width: 150px;
height: 200px;
border: 1px solid #bb0000;
}
.wndHandle {
cursor: move;
font-size: 9pt;
background: #888;
color: #fff;
padding-left: 1px;
}
Javascript:
var refresh = function() {
var objWindow = $('.window');
var objHandle = objWindow.find('.wndHandle');
var objContent = objWindow.find('.content');
var objFooter = objWindow.find('.footer');
var objResize = objWindow.find(".ui-resizable-handle.ui-resizable-se");
objResize.removeClass("ui-resizable-autohide");
objContent.height(
objWindow.innerHeight() -
objHandle.outerHeight() -
(
(objFooter.length == 0) ?
(objResize.length == 0) ? 0 : objResize.outerHeight()
: objFooter.outerHeight()
)
);
}
$('.window').draggable({ handle: '.wndHandle' }).resizable({
handles: 'se',
minWidth: 150,
minHeight: 100,
resize: function( event, ui ) {
refresh();
}
});
$('textarea').autoresize({
maxHeight: 80,
onResize: function () {
refresh();
}
});
refresh();
Here is a solution using jQuery to adjust the height
HTML - added ID
...
<div id="chatDiv" style="background:#fff;overflow: scroll;">
...
jQuery
$('.window').draggable({ handle: '.wndHandle' }).resizable({
handles: 'se',
minWidth: 150,
minHeight: 100,
resize: function( event, ui ) {
$('#chatDiv').height($('.window').height()-38);
}
});
$('#chatDiv').height($('.window').height()-38);
$('textarea').autoresize();
Fiddle

Categories

Resources