Solved

Help with NVD3 graphs - adding 'markers'

Posted on 2014-12-10
17
733 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
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...
0
 

Author Comment

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

Author Comment

by:projects
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.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40502448
@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
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.
0
 
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?
0
 
LVL 33

Accepted Solution

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

Author Comment

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

Author Comment

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

Expert Comment

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

Author Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Where can I find... 1 34
Easy responsive table out of existing table 28 55
move expression web site to a new server 13 34
Select only the top record in a left join 13 37
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 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