Solved

Help with NVD3 graphs - adding 'markers'

Posted on 2014-12-10
17
670 Views
Last Modified: 2015-02-05
http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html
http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html

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.
0
Comment
Question by:projects
  • 7
  • 3
  • 2
  • +1
17 Comments
 
LVL 51

Expert Comment

by:HainKurt
Comment Utility
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...
0
 

Author Comment

by:projects
Comment Utility
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.
0
 

Author Comment

by:projects
Comment Utility
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.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
@projects,

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.
0
 

Author Comment

by:projects
Comment Utility
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.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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?
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
????  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 -
     <svg></svg>
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?
0
 

Author Comment

by:projects
Comment Utility
@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.
0
 

Author Comment

by:projects
Comment Utility
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...
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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.
0
 

Author Comment

by:projects
Comment Utility
In fact, I will award to Slick812 who actually provides information, leads, etc.
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
@ 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.
0
 

Author Comment

by:projects
Comment Utility
Your answer is the only one which helped us find one answer at least. Still looking for the next.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now