I have been working with highcharts for a while now. I understand that we can draw plot bands like this
I need to get this customized like the one in the chart below, any pointers on how we could do it?
You need to use renderer (path with z option, which end shape)
http://api.highcharts.com/highcharts#Renderer
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
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
I am new to D3 and learning it. I am trying to build a curved line chart. That is i want to bend the line chart inside a half circle. It will be helpful if any one can tell me how to approach this in D3.
Something as shown in the link below:
http://www.cs.toronto.edu/~jianzhao/snapshots/kronominer.jpg
This is very similar to drawing a line chart in Cartesian coordinates, but using D3's radial line function rather than the regular line function. Your line's x coordinate becomes the angle, and the y coordinate the radial distance.
var line = d3.svg.line.radial()
.radius(function(d){return r(d.y);})
.angle(function(d){return theta(d.x);});
This Fiddle shows a simple example with sample data.
Its called a Sunbusrt Chart, here is a few links to get you started.
Sunburst Partition By Mike Bostock here
Sequences sunburst By kerryrodden here
Hope it helps
I like to bring a chart as shown
By using rapheal. Its very tough for me to learn it. show me some live example with code to draw verticalbar graph.
My data values
x-axis {1,2,3,4,5} This is an id of question
y-axis {10,20,30,40,7} This represent number of visits of question
I need bar graph with x,y values in plot and label for each axis and for graph
The most basic implementation would be:
var r = Raphael("holder"),
data = [[10], [105], [30]];
r.g.barchart(0, 0, width, height, data);
Then you can manipulate it with raphael.js.
Note. g.raphael can be found here: http://g.raphaeljs.com/