I've just started exploring using svgs within rails. I want to dynamically update a gagejs with the created_at column on my Comment model.
Is this possible? For example, if the user hasn't created a comment in x amount of time the gage drops randomly between a certain range. It sounds like a fun problem to solve, i just would like to know that it is indeed solvable.
Thank you.
You can use setTimeout to run something after a delay and DOM to update things dynamically. The links give you some examples of each so you'd just need to tie them together.
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.
Any help would be appreciated -- I just started rails a few weeks ago and I'm pretty lost right now. So I made an app where people can submit questions, and those questions get randomized and displayed one at a time. I implemented this in a pretty roundabout way. I'm going to lay out what I did explicitly just in case.
I created a Question Model as well as a Question controller with new and create actions -- I put a form to submit the question in the view associated with the new action. To display the questions, I used javascript. I first used embedded ruby within the page to iterate through all the questions in the database. I then put them all in their own <li> and set the class of that to have a display: none. Then I used javascript to grab the class of the <li> tag and pushed all the questions onto an array.
Then, I just used javascript to display the question one at a time by updating a div element's html over and over again. Now, I want to add a simple rating system (like an +1 or -1 thing). I want to take people's ratings of the question and average them out. But I don't really know how to implement this. I THINK that I should have a ratings model that belongs_to the question model (which has_many ratings). There should be a ratings controller with an edit and update action that changes the score every time someone rates a question.
The problem is I don't know how to exactly implement this given what I've already done so far. A big problem for me is having the rating of the question linked to the question itself when I just used javascript to display the questions. Any suggestions? Apologies for the essay.
First of all, you should clarify what you mean by using JS to display your questions. It sounds like what you're doing is more or less right, if indeed you need to dynamically update the page through time, but it also potentially sounds like you just want to show a list of questions, which you can do with just HTML.
Second, you should decide whether or not you really need an extra Ratings model. It could be useful so that you can track things like when ratings come in, who made which ratings, and how it changes over time; but if you really just want to know the rating at any given time, you can just have an integer rating column on your questions.
Third, displaying your ratings just involves grabbing more info from the questions when you display them. Assuming you have an #question object in the view, and you were displaying its text like #question.text, you can do the same with the rating by doing #question.rating, or, if you go the model route, something like #question.ratings.count. From there if you still want to use JS to update the value you need to either just make a string or convert the entire object into JSON so that you can handle it in JS.
Finally, you mention needing a Ratings controller. That's fine, but recognize that you're going to need AJAX on your page to send events to that controller so that you can tie clicks (for voting) to actual database changes.
I'm working on creating a function that can help me dynamically create something like this: Emotion Wheel
That is a manual mock up of what I'm trying to create dynamically. I want to pass into the function the number of axis and the number of "nodes" per half-axis. My biggest issue is figuring out placement and how to work that out. I'm still working on some rough draft stuff, but I was curious if there was something I was missing/hint on making it easier, or if I'd essentially just need to break down and dig up my Trig knowledge and come up with something from there.
I'm new to Highcharts and I need to create one for reporting purposes. So creating one is simple but seems like the one they asked is not very simple at all. It should be something like a streaming graph where if something comes in it will start plotting until it is done.
So the scenario is like this.
It needs to be a column chart/columnrange type.
The x-axis will be the time. And should be moving from right to left. In 1 second or 2 seconds interval. Doesn't really matter.
So if the data comes in, let's say a call comes in. The time it comes it should start ploting/Drawing the bar until the call is done.
And it should be able to see the stock. Pretty much like the one in here http://www.highcharts.com/stock/demo/ where you can select a range and zoom in to that range.
I hope I'm making my scenario clear enough. Any reply is appreciated.
Best
Because you haven't provided any code to go with, the response here is going to be more of a guidance for you to do further research:
Select chart type to be a column
N/A
Since you're using jquery, if the data is coming in a json format - check out $.getJSON otherwise check out $.ajax or similar functions for you to get the data dynamically. You will then need to go through Series.addPoint()
Was already asked on Stackoverflow
I think this example is pretty much what you wan to achieve. Only change series type to 'column', see: http://www.highcharts.com/studies/live-server.htm
I previously asked this question a few days ago, but I do not think anyone besides paxRoman actually figured out what I was asking, as it was hard to describe without an example.
We did however manage to figure out what might be my problem, and I managed to put the code up on bl.ocks.org so you can see an example of what I mean!
Here is the example: http://bl.ocks.org/3020018
Each time the data is refreshed (in this example, just read from a json file), all the nodes are re-created and re-added to the drawing.
What I want to happen
I want the nodes to update without moving at all.
If a new node exists in the new array, it should just appear like they all do now, if something exists in the previous array but not in the new, it should simply disappear.
As you see in the example, that is not what is happening and I have not been able to figure out why for the past week.
So my question is:
What am I actually doing wrong? Is it my lack of links? What is the problem? The two of us spent over an hour looking at this yesterday and could not make sense of it, I have spent a good week on it now without much progress :/
My old question/post is still up, but it's badly formulated and I had no example to show.
Thanks for helping me :)
So, I am pretty sure I have solved most of my problems!
It came down to how I was adding/modifying the nodes when updating the data. I completely forgot about x/y and similar attributes since I did not set them myself, so I was adding "new" objects every time I updated the data, even if they weren't actually new.
With some jQuery magic using $.extend() I have sort of gotten it working, but it's still slightly moving/pulsing whenever I update the data.
I updated the gist to show the changes. http://bl.ocks.org/3020018
I would still like to remove that little pulsation too, so let me know if you have any ideas :)
Have you tried setting the friction parameter (where you have the linkDistance and charge set)? Setting it to 0.9 will speed up finding the final position as I think it defaults to 1 if not set. Its simply a case of adding
.friction(0.9) // or any suitable value closer to 0 - have a play!
Hope that helps