Since I'm updating my application from Ext JS 4.2.1 to Ext JS 5.1, I took the chance to upgrade my old charts to the shiny new sencha charts. I've been trying to set up an interactable stacked bar chart that looks like this
Users should be able to click on the bars or on the labels on the left to check out the details.
I've managed to capture mouse events on the chart bars (using the chartitemevents plugin), but I'm stuck trying to capture click events on the labels.
I've tried using the spriteevents plugin on the chart, but on 5.1 it simply doesn't work, and it's broken on the 5.1.1 nightly builds (you always get the background sprite no matter what). Even if it did work, getting the correct sprite would only get me halfway there as I would have no clue about which series does that label belong to.
Here's a fiddle with an example of the situation: https://fiddle.sencha.com/#fiddle/hjm
Does anyone know of a way to do this?
As and added bonus, it would be great if it was possible to capture onmouseover and onmouseout events too, so I could change the cursor to pointer whenever a label is hovered.
i just created a plugin for axis click: Sencha Forums
Ask me anything if the plugin usage is not clear.
Related
I'm using reactJs to develop the frontend, is it possible to make annotations on graphs created by echart? For example, I can left-click anywhere on a line chart to make a quick note of that point or I can a range on a graph and make a note of that range.
If I understand you correctly, you want to build an interface that allows users to left-click somewhere on the chart and add their own annotations (rather simply coding in annotations as a developer, and having them be static)?
In broad strokes, here's how I would build this:
Register click event handlers on the chart, so you can detect where the user clicked.
Build custom UI in react that can overlay on the chart, provide text input and "add"/"cancel" buttons, using the information from the click event to figure out where to draw it and to what element the annotation should be attached to.
When the user clicks "add", make a call to the showTip API (see docs) to a tooltip in the right location (from step 1) with the text the user provided.
(It looks like there is a github issue where folks are asking for this feature to be built-in - and some discussion of how to build it yourself, and a simple example that illustrates how to do step 3 above which you might find useful)
I’m working on a Native Mobile App, which is being built inside the Mendix Platform. And I'm trying to figure out how to trigger a scroll-to-bottom behavior automatically.
My situation is:
I have a form with a lot of fields, and some with conditional visibility. Which means that they will appear if the user selects some specific options, in radio-buttons.
But some of them will be out of the visible area when the user clicks the related radio-button, and the field becomes visible (as it is located at the bottom of the form).
I trying to find a way to force the scroll to the bottom when these new fields become visible (from the user click in radio-button above).
Any suggestion on how to achieve this?
In the Mendix market place there is a native widget that seems to be able to do what you need to achieve: https://marketplace.mendix.com/link/component/116738
The last update was in May this year for Mendix 9.1 and there is a version for Mendix 8.17 as well.
Hope this provides a solution.
I am working with AnyChart Sankey charts, and trying to to get information for a particular clicked flow or node (i.e. the from and to nodes if a flow is clicked, or the node name if a node is clicked) in the Sankey chart which I need for a specific drilldown function. This is easily doable for other charts using pointClick.
Getting pointClick events on other charts is quite straight forward using chart.listen('pointClick', function(e) {});.
This, however doesn't work on Sankey charts. The pointClick event is never registered.
Is there any way to do what I am trying to do for Sankey charts?
The current version of the library v8.8.0 (summer 2020) doesn't pointClick event due to the specific architecture of the chart. But there's a workaround that implements the required interactivity. For details, check the sample of a Sankey with custom interactivity.
I have an ionic 1 app that uses $cordovaCamera to retrieve a photo from the user. Oddly, after the camera is opened (doesn't matter whether the user takes a picture, cancels, or picks one from library) the app renders incorrectly once it's closed. The status bar overlays the top of the view, and the bottom of the view overflows off the viewport. However, if you re-orient the device (go from portrait to landscape) it will fix itself.
Is there any way to force the app to repaint manually?
Extra info regarding the bug itself: I created a new ionic 1 app separately and copied the camera code over exactly and it does not have the same problem. Same versions of ionic, angular, ngCordova, and the camera plugin. So I believe the actual rendering problem is specific to my app. However, after a full day of messing around I can't figure out for the life of me what's happening.
We had the same issue with the cordova-plugin-statusbar version: 2.2.1
The solution was pretty simple. We downgraded this dependency to version 2.2.0 and everything worked as expected again.
To use an exact version of a cordova plugin, specify it in the config.xml of your project as in example below:
<plugin name="cordova-plugin-statusbar" spec="2.2.0"/>
Don't forget to remove ./platforms and ./plugins folders and to run cordova prepare after downgrading the plugin versions.
take a look at this plugin:
cordova-plugin-hidden-statusbar-overlay
just install it, and after calling the camera, run this code:
window.plugin.statusbarOverlay.hide();
The answer ended up being pretty easy: REMOVE the status bar plugin.
I was under the impression that the status bar plugin was needed to make it appear at all but this is not the case. The StatusBar plugin only lets you style it - but since iOS 9 you can only choose from 2 options anyway.
Remove the status bar plugin completely. Don't forget to edit your bower.json, config.xml, the initialization code in your ionic app that sets StatusBar defaults, etc.
Add padding or margin to the top of your app when the body element has the class platform-ios. Per the Apple Developer Docs:
Obscure content under the status bar. By default, the background of the status bar is transparent, allowing content beneath to show through. Keep the status bar readable and don’t imply that content behind it is interactive. There are several common techniques for doing this:
1) Use a navigation bar in your app, which automatically displays a status bar background and ensures that content doesn’t appear under the status bar.
2) Display a custom image, such as a gradient or solid color, behind the status bar.
3) Apply a blur to the content behind the status bar.
What you should end up with is the exact same appearance without the plugin.
My Application get live data from server, which includes number of operations executed and time at which it executed.
Now I am trying to implement a bar chart out of it which looks like splunk event chart which displays bars for every minute and should allow user to zoom in and zoom out.
I tried extjs stackedBarchart but it didnt looked like the one which i want to use.
Any ideas?
Appreciate your help! Thanks