d3:Adding Axis like a Box - javascript

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

Related

Make Tooltips not overlap in amCharts Scatterplot

I'd like to arrange tooltips to NOT overlap AND always be visible on a amcharts4 scatterplot chart.
The documentation reference
https://www.amcharts.com/docs/v4/concepts/tooltips/#Making_cursor_arrange_tooltips
A sample implementation showing that the tooltipText is placed on the series is not providing the needed effect:
https://codepen.io/whoweez/pen/NWqoMvm
The result needed is something like this:
https://drive.google.com/file/d/1OL5KR83MoNJqAck710EW_yoxfSbkr7EM/view?usp=sharing

Stacked highcharts on the same graph, with a new y axis each time?

I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this
You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/
You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.

How can I draw a custom horizontal line with jqplot?

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

How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?

I'm currently using a the NVD3 discreteBarChart but I have a lot of data and the labels on the X axis, which are dates in my application, are encroaching upon each other like this : ). This doesn't happen with a multiBar or a linePlusBar chart, where the labels are automatically adapted :
How can I prevent the lablels on the discreteBar chart to impinge on the others?
Thanks for your answers!
Little late to answer, but to get similar results but using multi-barchart as mentioned by Lars , you can use following command to get a similar graph (i.e hide "stacked" and "grouped", as well as legend buttons).
n1$chart(showControls = FALSE, showLegend = FALSE)

jqplot start graph axis labelling from top

Want a simple fix for jqplot axis display. I am using Bubble charts for chart display, and CategoryAxisRenderer for axis.
All I want is the axes to display in top-down fashion, rather than the default bottom-up one. Meaning, the x axis is displayed on top of the chart increasing from left to right, and the y axis starts from the top increasing from top to bottom!!
Have looked in for various in-built jqplot options but to no luck. I am afraid that the solution lies in altering the css definitions for jqplot axis, but i do not want that, as it would consume huge amounts of time just to understand someone else's css. Please if someone could help!
Have got my solution finally.
Reversed the array that had to be printed row wise, hence both chart and the y axis came up correctly.
The second x axis , did not solve my problem. Instead for the particular chart id , modified the the css class jqplot-xaxis and that did the trick.
myBubbleChartId .jqplot-xaxis{
position : absolute;
top : -20px !important;
}

Categories

Resources