Help with NVD3 graphs - adding 'markers'

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.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
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...
projectsAuthor Commented:
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.
projectsAuthor Commented:
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.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Kyle HamiltonData ScientistCommented:

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.
projectsAuthor Commented:
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.
Kyle HamiltonData ScientistCommented:
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?
????  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?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
projectsAuthor Commented:
@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.
projectsAuthor Commented:
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...
Kyle HamiltonData ScientistCommented:
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.
projectsAuthor Commented:
In fact, I will award to Slick812 who actually provides information, leads, etc.
@ 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.
projectsAuthor Commented:
Your answer is the only one which helped us find one answer at least. Still looking for the next.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.