I'm trying to add labels to different sections of a line graph using d3.js. I'm working with a dataset that needs to be labelled by the end user by assigning labels to different section of the graph. My current under use case is to build something like the following:
While I am able to create the line graph, and can guess that the areas can be added to the graph as brushes, I'm unable to get started with regard it.
Related
I have created a layout algorithm for graph visualization so that y position of each node corresponds to time and the graph starts from the top (t=0) and grows dawnwards. I also draw edges with bazier forms I made. Also the color of the edges vary throughout the edge. I need the layout/look to remain the same. Currently, I am using pycairo for drawing the graph that generates a CSV file (potentially, I can create other formats such as PDF,PNG too). My goal is to make the visualization interactive, for example to be able to click on specific nodes and get the data related to that node back. I couldn't figure out how to do this in python. Now, I want to do this in JavaScript and D3.js.
My question is how can I make the CSV output interactive? For example, when clicking on a node, it should return its y position (which represents time), and some other attributes. I also want to be able to jump to a certain y position in a graph given user's input.
It would also be helpful to give me some clues on how to think about this problem.
This is a screenshot of what the final result looks like. The horizontal lines are really not important
I'm using angular nv-d3 and while making a chart, I'd like to have a specific point on the graph be highlighted.
My graph looks like:
I'm getting the data by consuming a rest response, my graphs will have 1 to 3 lines, and the each line is guaranteed to have the date point that I will be highlighting.
I could also live with just having a straight vertical line through that date, I just want a way to differentiate that specific date in the rest of the chart.
Couldn't find anything in the docs about this, and most of the methods I've found to do this use d3.select and jQuery, but I'm not sure if that will work with angular.
I've a graph that is being rendered from some points I have in my database.
If I take all the points from the database and place them in the highcharts object, it sometimes "breakes" a random place on the graph and make a straight horisontal line.
Does anyone know any solution for this?
Here is a picture of the graph:
I'm trying to link two D3 plots so that selecting part of the histogram on the right, causes a certain scatter plot to display on the left.
This is my attempt.
My current question is why the right plot isn't rendering, which I think goes back to how to create and refer to multiple SVG tags in d3.
D3 has SVG controls for this type of situation. What you are looking for is a brush with context.
Here are the API docs:
https://github.com/mbostock/d3/wiki/SVG-Controls
And here are two great examples:
http://bl.ocks.org/mbostock/4063663
http://bl.ocks.org/mbostock/1667367
I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?
Yes, this can be done with xAxis[i].addPlotBand().