ChartJS: Show default tooltip onclick - chart.js

I have a chart.js line chart displaying properly. When you hover over the y-axis gridlines, the tooltips display as they should.
I'm trying to convert this to function on a touchscreen, so there is no hover. Is there a way to add a simple parameter to make the tooltip show on both hover and onclick?
Note, I know I could add a custom tooltip and add all of that functionality - I'm trying to see if there's just a parameter I can add as I don't need a custom tooltip.

For Chart.js v2, you can specify those events at the root level of chart options.
options: {
events: ['click']
}

Just add "click" to your tooltipEvents list when specifying the options for the chart
...
tooltipEvents: ["mousemove", "touchstart", "touchmove", "click"],
});
In the fiddle below, I've removed all other events from the list except for click to give you an idea of how it will be like on a mobile
Fiddle - http://jsfiddle.net/8uobybv3/

For ChartJS version 2.8.0, you will need to add both the click and mouseout events to make the tooltip behave the desired way.
The click event would make the tooltip to appear when point is clicked and the mouseout event would hide the tooltip when the mouse pointer is moved outside of the chart canvas area which is the desired behavior.
Note: Without adding the mouseout event the tooltip would not hide even when the mouse is moved or clicked outside the chart canvas area.
Code:
options: {
events: ["click", "mouseout"],
....
...

Related

How to force redraw ApexCharts?

I'm updating ApexCharts using updateSeries while the chart is hidden using display: none. When the series is being updated I think it is checking the width of the element that it is wrapped in. When hidden, the width is considered 0 and therefore the width of the chart is set to 0. I want to force redraw the chart when it is visible but I found nothing in the docs.
PS: The chart restores to its original size when I resize the window.
I don't know weather it will be help you or not I have same issue using with apex chart some lables and title was missing but when you resize the window it will automatically redraw the chart because apexchart have this property by default
chart: {
redrawOnWindowResize: true
}
I have try this this put chart render method inside timeout function and it works for me
setTimeout(() => {
chart.render();
},2000)
In my case, it seems like chart rending before getting style of parent component
Try this.
window.dispatchEvent(new Event('resize'));

scrollbars of a CScrollView in a CDockablePane are disabled

I've designed a toolbox control. It's inside a CDockablePane object. Since the tools inside it may need to be scrolled, I've created a CScrollView as a child of the pane and have inserted the tools inside it as children. Based on the pane size, scrollbars of the CScrollView object appear properly, but clicking on them doesn't scroll the view. It seems that they're disabled. When I use SS_NOTIFY style when creating the CScrollView, the CScrollView object receives mouse clicks, but when i don't use the style, it doesn't. But it seems that the scroll bars inside the view control don't receive clicks. When mouse hover over them, no visual effect in scroll bars appears. It seems that the scroll bars are disabled, while I've not created nor manipulate them.
What's wrong?
mouse wheel works. click on scrollbars is received by the scroll view, not by the scrollbars. inside handler, i wrote this code:
CScrollBar *pScroll = GetScrollBarCtrl(SB_VERT);
if (pScroll->GetSafeHwnd())
{
...
if is not true. this means that the scroll view has not a scroll bar, but if so, how is it shown?!
any idea?
...
since i didn't get answer, i'm going to clarify my question with a sample code:
https://dl.dropboxusercontent.com/u/4829119/930501%20-%20t3.zip
in this sample, how can i scroll my view as i do with other views like class view and file view?
the sample code screenshot:
https://www.dropbox.com/s/7pu5chpyj9hqeal/Screenshot%202014-07-23%2003.40.26.png
Did you initialize by calling SetScrollSizes? The scroll bars are enabled only when the sizeTotal is larger than the view window size.

Wrong stem position in balloon-style tooltips in report list-view

I'd like to change the default style of the list-view control's tooltips to balloon.
I first called ListView_GetToolTips() to get the HWND of the list-view's tooltips control, and then used GetWindowLongPtr()/SetWindowLongPtr() to add the TTS_BALLOON style.
I handle LVN_GETINFOTIP to customize the tooltip for the items (first column) in the list-view: the tooltip texts that appear for the first column items are actually a copy of the text of the third column. The other columns (subitems) are managed automatically by the list-view.
The balloon-style tooltips for the first column items seem OK; their stems are correctly positioned:
But the tooltips for the second column seem drawn wrongly, e.g. the balloon is drawn as if it was referred to a subitem in a row below the actual row pointed by the mouse cursor.
In the following picture, the "star" indicates the position in which the mouse cursor was when the tooltip appeared, but the tooltip's stem points to a row below, marked with an ellipse:
The strange thing is that the tooltips for the third column seem drawn correctly.
Is this a bug in the list-view control? (I'm using Windows 7.)
Or what am I missing here?
The ListView uses a tracking tooltip and positions it to unfold and reveal the hidden text in a column that's too small. It's not expecting its tooltip to be a balloon and so doesn't compensate for that.
You'd need to sub-class the tooltip itself, watch for TTM_TRACKPOSITION messages from the ListView, and adjust the coordinates.
Your second question - the shaded background comes from the system theme. You should be able to get it by calling SetWindowTheme on the tooltip (I'm not sure why the ListView disables themes for the tip).

Hover on dropdown menu

http://www.funky7inc.com/product/detroit-police
if you hover over the area where the dropdown is on "Detroit Apparel" the list pops up instead of only appearing when you hover over the nav.
any ideas how to fix this?
Sure, you only change the opacity of that <ul class="sub-menu">... So it is actually always there, only 100% seethrough... But you can still hover over it which changes the opacity back to fully visible.
I don't know how you change this (CSS:hover of Javascript or something, I tried looking but you have minified CSS) but you can solve this by not changing just the opacity but also the display:block to display:none so it is actually gone, or use javascript $(".sub-menu").hide() or .FadeIn()/fadeOut() or something similar...
It is because you are changing the opacity of the drop down list. Opacity:0 still registers mouse over event.
Instead use visibility property or display:none
When you will hide the drop down using visibility or display:none, drop down list would not register mouse over and hence the list would not show up till the time hover is on the navigation bar.
Hope this helps.

3D Pie Chart, Triggering a Tooltip on chart init

Is there anyway to trigger a mouseover event for a specific pie chart slice that will that slice's tooltip appear through the "ready" event?
My code right now is as follows:
google.visualization.events.addListener(google_chart, 'ready', function () {
google_chart.setSelection([{row: 0, column: null}]);
});
setSelection() doesn't appear to trigger the tooltip.
I am using Google charts on a mobile web app and want to avoid using legends so that the chart has the most amount of real estate possible.
I am afraid there is no way to trigger the built-in tooltip on init. However you can hook-up a custom tooltip component which triggers at startup.