Help with NVD3 graphs - adding 'markers'

Posted on 2014-12-10
Last Modified: 2015-02-05

We are using the above two graphs. In each of them, we have three series of data.
We need to add one more which is what we are calling a marker.

A marker, is where we want to show a vertical line inserted into a place with the rest of the data.

I am not really sure how else to describe this so if you have questions, please ask and I will respond.
Question by:projects
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
  • 2
  • +1
LVL 51

Expert Comment

by:Huseyin KAHRAMAN
ID: 40492110
so vogue... do you have test site? how do you use that chart? how do you populate data?
there are so many samples on the web site... what is your problem exactly? if you add 3 sets, adding 4th one should not be any issue...

Author Comment

ID: 40492286
Of course it's vague, I said it would be :)

No test site to show.
Think about a graph which shows ping stats, nothing but ping stats... every minute, a new ping stat showing min/max/avg so, using three sets as you call them.

I explain that I want to use one of the sets as a marker, so think in terms of a single vertical line that shows a starting point or some point in time between all of the rest of the data. I would insert this into the database, what ever that is, say a field called 'marker' and what ever value is needed to create a vertical bar.

This bar would show up at a certain point in the data, sticking out like a sore thumb, or, a marker if you will.

Can't make it more clear than that but if you have more specific questions, I'll try to answer them.

Author Comment

ID: 40494476
It's pretty much a delimiter that I am in need of, something which would show when data stopped coming into the graph (database) and when it restarted.

Right now, when we display pings, if no data comes in, there is no delimiter, no clear view of data stopping for a while, then starting up again.

I need some creative way of putting a marker in the graph exactly where pings stop then start back up.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40502448

you have to provide some sample code. without knowing anything about your implementation it's not really possible to answer your question.

if you can't share a link to your development site, then you need to create a minimal working version with mock data that can be shared, via jsfiddle or something similar. this may be a lot of work, but it's the only way you're going to get your question answered.

Author Comment

ID: 40503032
I'm not sure what to share, it's nothing special.
I am simply looking for a vertical line, what ever data that needs to be is what I can insert into the db.
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40503053
share your graph code.

think of it this way, if I'm working on my car, and I ask you "how do I hook up my stereo so it gets louder as I go faster?", don't you think you would need to know some details about my car to  be able to help me?

What exactly are expecting from an answer to your question if you can't provide any details about your implementation?
LVL 34

Accepted Solution

Slick812 earned 500 total points
ID: 40504995
????  greetings projects, , I have read the comments here, and I can see what and why you think you need a "marker" bar on your graph (I will think in terms of a bar graph for now). I have NOT used the Angular.js nvd3.js for graphs, but I will talk more about the GUI (user presentation), of a bar chart, as far as I can tell, you must predefine the number and color of bars for each tick, you could have a bar added that stays at zero value, for normal ticks, and then for a marker tick, have all other bars set to base line zero, and set the marker bar to the "starting point" value or 100% of bar max height (if a non-value time marker).

Another possibility, if you have only positive (above the zero-base-line) values allowed for the three bars, then for a marker tick, set all three bars to a negative value (below the zero-base-line), so if they see the bars below base line, then they know it's a marker, it says that nvd3.js can have tool-tips, so you can add a tool-tip for the marker to tell a time or other marker info.

It does not look like you will be able to use the default setting options to add any kind of over-lay "Bar" to the Line Chart graphing.

Just a note, it looks like the nvd3.js uses a -
vector image to "Draw" the graph, it may possible to access the <svg> with javascript After the graph is drawn, and then draw a line Over top of the graph that is there at the time. However this may be a somewhat difficult thing to do, if this graph is ticking (changing in real time).

If there is an Angular.js user Forum, to search and ask questions, you may can find more specific info there?

Author Comment

ID: 40507407
@Kyle Hamilton;

>share your graph code.

I am not able to post my code publicly.

think of it this way, if I'm working on my car, and I ask you "how do I hook up my stereo so it gets louder as I go faster?", don't you think you would need to know some details about my car to  be able to help me?

Open in new window

Cars all have the same basic functions and technology so if you gave me a question relating to a car, then yes, I'm sure I could give you some idea. My code is nothing special but it is not mine to post publicly.
My question is asking something fairly easy to understand by a real expert who knows and works with graphs.

As for what I expect... Look at the reply that Slick812 has given me. That is very usable, gives me leads, ideas, etc.

I don't believe someone has to post all their code to get help and that sometimes, the idea of what they need is all that needs to be asked.

Author Comment

ID: 40591668
I've requested that this question be closed as follows:

Accepted answer: 0 points for projects's comment #a40507407

for the following reason:

Admin won't let me close this question which doesn't seem like it will ever get an answer so...
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40591669
According to the asker's own comment in the "accepted" solution:
As for what I expect... Look at the reply that Slick812 has given me. That is very usable, gives me leads, ideas, etc.

I would like to recommend that Slick812's answer be accepted instead, and points be assigned.

It goes against the ethos of a volunteer community for someone to ask a question, be unwilling to do any leg work, and then deny any points to the person who spent the time and effort to accommodate them despite this attitude.

Author Comment

ID: 40591676
In fact, I will award to Slick812 who actually provides information, leads, etc.
LVL 34

Expert Comment

ID: 40591742
@ projects, , I appreciate all points,
 HOWEVER, this experts Forum is based on an "exchange", so the questioner really needs to talk back to the comments given, saying what is helpful, or a possibility, and what is Not allowed, or Not possible.
If you would have said that any of my suggestions for marker bar was a possible, I may have further suggestions or alternates, or someone else could have ideas.
as you say - "Look at the reply that Slick812 has given me",  but you never say if the "add a marker tick" was close or far away from what you were looking for.

Author Comment

ID: 40591748
Your answer is the only one which helped us find one answer at least. Still looking for the next.

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Getting selected value using Jquery 3 21
Table style position to the left 8 26
Prevent certain words from being typed in a form 6 29
Javascript: Range object 16 13
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question