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.
Related
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
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.
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!
I have a simple DC.js bar chart. I have it set up so you can click on an element and it gets filtered. This is standard behavior. It remains lit up, and the others go dark. You can then select other elements and have them added to the filter.
I'm looking for a way to replicate that functionality without clicking on the element. So like, i click a link outside the chart and the chart acts like I just clicked on some element.
Has anyone seen this done before?
Thanks,
Edit:
The reason I'm trying to do this is for accessibility. There's no way for keyboard users to interact as far as I can tell.
A hacky way to do it is to use chart.select to get a d3 selection of the element you want, and then fire an artificial click event as described here:
How to invoke "click" event programmatically in d3?
A better way is to do what the base chart onClick does:
_chart.filter(filter);
_chart.redrawGroup();
https://github.com/dc-js/dc.js/blob/master/src/base-mixin.js#L610
where filter is the key you want to filter on.
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.