The pink line is what I'd like to add, to emphazise a certain percentage value. Is it possible with jqplot and how would this be achieved?
You should use canvasOverlay for jqplot to draw custom lines or other objects on your graph.
Please follow the link and here you can learn about how to use canvasOverlay.
http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html
Related
to visualize data I am using a heatmap from the plotly.js library. After rendering the heatmap I want to be able to dynamically change the axis limits. So far I manage to do that for the z-axis (color) but not for the x- or y-axes.
Here is what I try:
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
data[0].zmin=0;
data[0].zmax=10;
Plotly.redraw('myDiv');
Sadly only the z-axis works. You can check an example here: https://codepen.io/brockerdocker/pen/QWgvLGx
Here is what I get (only z-limits changed):
And here is what I would like to get (also x- and y- limts changed):
However this 2nd heatmap I can only achieve if I specify x- and y-ranges before I call Plotly.newPlot('myDiv', data, layout);. Once I generated the heatmap it seems that I can't change the ranges anymore.
So any idea how I could still change the ranges after having generated the heatmap would be great.
I just found the solution:
In order to being able to set a dedicated range for the x- and y-axes one first has to set 'autorange' to false:
layout.xaxis.autorange=false;
layout.yaxis.autorange=false;
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
Plotly.redraw('myDiv');
So that should work.
I have d3 graph with xaxis and Y axis.I want to add axis to the top and right to make it look like a box.
Something like This.
You could go through this article for adding multiple axes. You should create new axis generators and give the orient as 'right' and top and call them finally.
http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
EDIT:
I have made a simple line chart with your requirements. Have a look at https://jsfiddle.net/j0kaLf59/
Also as mentioned in the comments, you could just add two line elements. Have a look at this fiddle https://jsfiddle.net/a6o2hkfq/
Reference:
Create a D3 axis without tick labels
http://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js
I would like to add annotations to an SVG bar chart written in D3.
I want to add lines and text to the chart, like the below:
My question is: is there a best practice for this or general pattern?
My assumption would be to use a .each method following the data .enter() method. Using a conditional operator, should then be possible to call a function that inserts rendered line paths and text.
There are a couple out-of-the-box options that can help:
Swoopy Arrows
Swoopy Drag
D3-ring-note
Poly-label
I am using Highcharts to render a line chart (http://www.highcharts.com/demo/line-basic).
Every line in my chart has the same color and different markers on the end. Now what I want is when I hover over a line to change it's color.
you can find mouse events in plotOptions there you can manipulate the colors
this.chart.series[index].update({color:'color'});
this piece of code will be helpful.
here is a working example http://jsfiddle.net/vytEE/
hope this will help you
Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines
You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.
Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.
g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....