Is Slider possible in sencha charts? - javascript

As my requirements is to show the slider in the line charts using sencha touch. Is it possible to show the slider in line charts?
In ExtJs examples, slider is there for Area charts and they used the slider in track mouse within interactions.But am developing application for mobiles, so for mobile we cannot have track mouse option.
I am referring to the example Area - Browser Stats, bundled with touch charts 1.0.0. In our mobile application, the requirement in line chart is that, when user tap and drags on line, it should display/update respective marker values on a slider kind of control, which moves on top of line chart along with user's finger.
How can i keep track of line chart marker values, when user moves/drags his finger on a line (in line chart)?
Is it possible to display a vertical line on x-axis (parallel to y-axis), which moves along with user's finger and displays respective marker value on top of that vertical line?

Latest sencha touch 2.1 comes with chart support. In that within your chart object specify this config
{
type: 'iteminfo',
listeners: [
{
fn: function(me, item, panel) { //item.record.get('X') will get you the axes value
panel.setHtml('Text you want to display');
},
event: 'show'
}
]}
Hope it helps... Although it wont drag as you require you can display the value when user taps on a marker...

Related

Can't use Nivo tooltip or crosshair draggability on mobile

I'm trying to create a line chart that uses crosshairs and tooltip using Nivo. I was able to get everything working great on desktop, but on mobile, when I try to drag across the graph with my finger, nothing happens. The only time the crosshair and tooltip comes up is when I tap.
This draggable functionality was working with react-vis, but I needed to move away from that for various reasons.
Any recommendations or help?

bug with mouse release event for brush in d3 graph

I am trying to use
d3.js Multiple Area Chart for representing a collection of data. The graph building part was completed successfully. I've created a brush for timeline dragging and the bug is that, I guess, the mousedown event is not recognised by the brush. When I click on the context area (brush), I don't have to drag and release the mouse to select an area. After clicking the selection of area goes to left and right automatically depending on the direction my mouse moves. Is that some kind of bug or due to some changes that I made in the code?

Drawing line over picture - Javascript?

I have some graphs on my page. When the user drags his cursor over the picture, I'd like to show a horizontal line over the graph.
The one above is the starting point and the latter shows what should happen when the user points his cursor over the graph. The line should stay on the same level with the cursor, when it's over the image.
Is this possible with Javascript, for example?
It is, you need e.g. a div box positioned at cursers Y value with 1px green border. Position has to be set to absolute. But you can't paint directly in the image.
You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.
Take this as an example to develop:
http://mpf.vis.ywng.cloudbees.net/
(you can drag the yellow bar, and click the legend; for source code, click fork me on github)

Cant move the screen if i swipe on the items in the grid - metro style application

I have just created a grid application using the template provided in Visual Studio 11.
If I swipe in the area that does not have any content (area outside listview) the screen moves, as I expected, in the swipe direction.
My problem is, if the user swipes on the area which contain items in the list view, nothing will happen.
How can i make the swipe functionality similar on the entire screen?
it worked fine as i expected when i added some more data-win-options to the list view..
Here is my final data-win options
data-win-options="{selectionMode:'none',swipeBehavior:'none',tapBehaviour:'invoke'}"

highcharts , Hide a chart

My GWT application consists of a "Dashboard" that has a few charts . I need to be able to hide and show charts as and when necessary.
As you can see in the jsfiddle below, i was able to hide the chart, but the invisible chart eats up mouse events(when the mouse hovers over the invisible chart the tooltips are still displayed).I need to stack another canvas on top of the chart when the chart is hidden.But since the chart is taking up the mouse events , my canvas cannot receive any. Any ideas as to how to fix this ?
http://jsfiddle.net/archerabi/vnBsx/1/
I think it's because you're only hiding the legend instead of the whole container. I changed .highcharts-legend to .highcharts-container and I think it solved that issue. See here

Categories

Resources