Removing controls on a Javascript page and placing in another div - javascript

I want to implement highcharts into my application.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick/
I want to remove the zoom controls (like 1m, 3m, 6m, YTD, 1y, All) from the chart and place them out of the container div. But i don't want those controls inside the chart. I want to place those controls at the top of the page.
Please can any one help me to solve this issue.
Thanks in advance

The short answer is that it is possible to do what you are looking. You will simply need to make use of the built-in functions of the API as one of the developers mentioned here:
http://highslide.com/forum/viewtopic.php?f=9&t=10915&p=49390&hilit=external+controls#p49463
Basically you make a chart w/out the actual controls and then create the necessary code to manipulate the content of the chart accordingly.

Related

XPages client side: listen to and trigger an event (pure CSJS)

I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.

Making ng-donut clickable AngularJs

I am pretty new to this. I am using https://github.com/Wildhoney/ngDonut to create donut on my website. I am able to get it up and running now my next step is to make it clickable. Lets take this example http://ng-donut.herokuapp.com/
Suppose if I want to make it in a way when a user click on the donut partition the it becomes highlighted with corresponding row on the left hand side pane. I am not sure how to achieve it.
Can anyone throw some light on it?
Thanks in advance.
If you don't want to fork and modify the project they have https://github.com/Wildhoney/ngDonut#mouse-events
Using the click handler and the model object I imagine you can find the corresponding row and set a property on it that causes it to be highlighted (ng-class). For the pie itself to highlight you may be able to make use of the colours property mentioned in the README.md there.
If that doesn't work out would need to fork the project and take a look at where it's using those colours to draw the pie with D3 and have it modify them based on the last one that was clicked on.

D3 data binding with slider and play/pause

I am looking to implement a map with a 'play/pause' feature that will overlay items as the time scale progresses. However, I also wanted to give users the ability to set the time themselves. Very similar to
Mike's work here
Any ideas on the best way to implement this? I would like to avoid html element sliders because of a lack of styling options (as far as filling up the bar with different colors, it gets messy overlaying SVG). There is also d3.slider (independent open source on git), but the documentation is lacking. Is using a brush handler the best option?
Thank you!

AmCharts serial chart trend-line click

I am using javascript amcharts v3 to generate trend like interface element. I use trendline class to create trend lines that mark certain events. I would like to handle trendline click event but there seems to be no way of doing it.
Has anyone come across this type of problem or do you have any idea how to work around this?
For trend line example I use this page. There is jsfiddle link in it.
Thank you for the time you spend reading my question.
Edit: JSfiddle example - > here
Not the most elegant solution (i.e. it uses the generated content rather than hooking neatly into the framework), but I have done the following to catch a click event.
$('#chartdiv').on('click', 'svg path[fill="#00CC00"]', function(){alert('hello');})
Which will bind a click to the chartdiv and then filter on all svg path objects that are the colour of the trendline, triggering the code if it matches.

dynamic speedmeter javascript or jquery plugin

I want to have dynamic ajax plugin to show a speedmeter on the page.
One Idea is that I set a background and rotate the needle.
Anyone knows about a related plugin?
Here are some for your reference
http://bernii.github.com/gauge.js/
https://github.com/vjt/canvas-speedometer
And lots of more at Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)

Categories

Resources