I'm working on makin a graph like this in highcharts:
But I have problems making the green red yellow background colors based on y and x axis.
This is an example I have found but it's only based on the y axis: jsfiddle.net/tK7ux
And I want to use plotBands on both X and Y at the same time, if possible.
Maybe there is another way than using plotBands ? i have also looked at Renderer functions and making an rectangle, but the problem was that it is the position not is based on the Y and X axis.
Related
I am using Dygraph to show students attendance. I am highlighting the area with low attendance in specific month. I am using this example from dygraph site.
In this chart, highlighted area is from top to bottom yellow. Is it possible to highlight area below series line only not top to bottom?
Updated -
Is it possible to add multiple background colour according to Y axis value I mean at Y axis value 0 to 30 background will be red , 30 to 60 yellow & 60 to 100 green ?
Yes it is possible to add multiple background colour according to Y axis value. Below you have the code necessary and a jsfiddle where you can see how to do it.
function highlightYaxesWithColour(y_start, y_end, color) {
var canvas_bottom = g.toDomYCoord(y_start);
var canvas_top = g.toDomYCoord(y_end);
var canvas_height = canvas_top - canvas_bottom;
canvas.fillStyle = color;
canvas.fillRect(area.x, canvas_bottom, area.w, canvas_height);
}
http://jsfiddle.net/Lucidio/2rmLLdcm/
I have created a subplot with plotly.JS , x axis is shared for each graph as given in the below picture.
I want to show the x axis values for all graphs in the subplot instead for showing it only for graph at bottom. I achieved this using anchor attribute, but the graphs are not aligned well. Look at the below picture, here 600 of graph2 is not positioned exactly to the other two graphs.
I want all the graph to share x axis as well as show the x axis values on each graph.
I have a line chart in D3 as seen here:
I am attempting to extend the x-axis to be the same size as the y-axis tick width. Currently I am setting the ranges as follows:
// set the ranges
var x = d3.scaleTime().range([20, width - 20]);
var y = d3.scaleLinear().range([height, 0]);
This achieves my desired effect of pushing the plot in from the left and right sides but does not extend the x-axis. I'm sure there has to be a way to add padding to the plot without changing the ranges but I can't seem to figure out how?
There's no easy way to add padding to a linear scale.
However, in your case, since your x axis is presenting categorical data (days of the week), you can use a d3.scalePoint and configure its outer padding with the padding function.
I'm trying to highlight a single cell datalabel based on x and y coordinates of heatmap. refer this fiddle, where it is implemented as i'm using it inside jasper this approach is not working properly. Can any one show me how to do it using formatter.
series:{
data: data,
dataLabels: {
/*formatter:function(){ i'm having x and y cordinates and i wanted to plot the lable color and it should be surrounded with a square as given in sample fiddle*/}}
TIA
I'm trying to display axis for a grid based chart (heat map) to display correctly. I can get them into the right alignment (centered with each grid whether it be row or column), but they are on top of the grid where I want to have them displayed outside of the grids.
Here's what I have so far: http://jsbin.com/hihepo/8
Provide some margins around and translate your chart's g wrapper. You have margins defined, but they are never used, so you chart stretches until svg element borders and there's no more space around.
Use .orient('left') for y axis and .orient('bottom') for x axis orientation. See docs for orient method.
Adjust the transform and text-anchor of your x axis labels (or change the translation of their g wrapper).
Here's a demo for x axis labels.