I am working on a project and use c3 js library (don't use d3 js)
And now I'm having a problem, that is when using c3 js, the x-axis of the graph will default to the bottom, but the design they want it to be above, so how do I handle it?
Any help on how to achieve this would be greatly appreciated.
Thanks every body
Can you set the axis min and Max to limit the displayed area? https://c3js.org/reference.html#api-axis-min
chart.axis.min({
x: -10,
y: 1000,
y2: 100
});
chart.axis.max({
x: 100,
y: 1000,
y2: 10000
});
Related
I have this plunker (https://next.plnkr.co/edit/17t5ujwC71IK3PCi) which shows d3 graph of nodes grouped together based on group ID. Graph appears fine but I need to make sure that the groups never overlap each other (as shown below where orange, blue and lightblue are different groups but they are appearing on top of each other).
Dragging them causes the graph to endlessly move (which is another issue) and doesn't always fix the overlapping issue. I saw another example (http://bl.ocks.org/GerHobbelt/3071239) which is a bit better but its made with d3.v2. It has quite some good space between each group which makes it easier to analyze.
I thought setting charge to a negative value will do the magic but setting it like .force('charge', d3.forceManyBody().strength(-30)) didn't help at all.
Problem:
Now, trying to make the groups distant apart by coding something like following from the d3.v2 example I mentioned above but having hard time cooking something similar for my d3.v4. Any good suggestions on how to dynamically keep all groups away from each other?
I ended up following https://bl.ocks.org/emeeks/302096884d5fbc1817062492605b50dd to use forceX and forceY for positioning same group nodes together - away from other groups. Problem with it is that group positions are hardcoded as following:
this.grpPositions = {
'1': {x: 100, y: 100},
'2': {x: 900, y: 200},
'3': {x: 700, y: 400},
'4': {x: 200, y: 400},
'5': {x: 500, y: 400},
'6': {x: 600, y: 500}
};
I will have to come up with some good algorithm to dynamically generate far apart group x, y co-ordinates based on total number of groups and available width and height of given SVG.
If you have a better way of doing it via d3, please feel free to post your answer and I will accept it.
I have 3 axes (velue-axis)
Can one axis be displayed on the left
Other two axes to display on the right?
http://demos.telerik.com/kendo-ui/line-charts/multiple-axes
(In this example, the axis is located on the right, but I do not know how to configure it)
Thanks.
Granted this isn't entirely clear when you first look at the demo. The important thing to look at is this section:
categoryAxis: {
categories: [],
axisCrossingValues:[]//This is the fella you are looking for.
}
I have tweaked the demo slightly to show you one of the axis in the middle of the chart. http://dojo.telerik.com/ASidu
The number is simply the position column on the chart that the axis should be rendered. By default if this in't set then all axis should be on the left hand side as normal. but if we start applying a number greater than 0 then the axis will shift. So in the example we have 3 value axis set up:
valueAxes: [{
name: "rain",
color: "#007eff",
min: 0,
max: 60
}, {
name: "wind",
color: "#73c100",
min: 0,
max: 60
}, {
name: "temp",
min: -30,
max: 30
}],
so if we look at them from crossing the y-axis (i.e. the bottom axis) we have 31 columns available to us 1- 31 so in my tweak I have applied this to the crossingAxis:
axisCrossingValues: [32, 15, 0]
This is effectively telling each of the value axes where they should be positioned:
so:
"rain" should be at position 32
"wind" should be at position 15
"temp" should be at position 0
So the order in which you add your value axes will determine which setting they take based on the order you include them.
Hopefully that helps clear things up for you. If you need any more info let me know and I will update accordingly
I'm using Rickshaw graphs and I have a line graph working just fine. However, I would like to make the plot points visible by increasing their size. Is there a way to do this?
Here is my code:
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: window.innerWidth - 180,
height: 300,
renderer: 'line',
interpolation: 'linear',
min: 0,
max: 100,
series: graphLines
});
I tried using graph.renderer.dotSize = 16;, but it doesn't seem to work on line graphs, only scatter plots.
One thing I've done in the past is use the 'multi' option and create one line graph with a scatter plot on top of it to simulate the lines
I need Y axis ticks format in multiples of 500's
What I have is
http://i60.tinypic.com/104500w.jpg
What I need is
http://i58.tinypic.com/bfhod5.jpg
Solved.
I added the below property to the graph:
vAxis:{ticks: [0, 500, 1000, 1500, 2000, 2500, 3000, 3500]}
I guess this is a very basic question.
I have a graph which I created in MATLAB. This is a graph of Power (y-axis) versus Frequency (x-axis).
The range of my x-axis is from 0 to 1000. Now here is my problem. I want to draw a line from specific points on the x-axis to the graph. For example, for points 40, 400, 950.
By using set(gca, 'XTick', [40 400 950]); I am able to mark these particular points. But I want to make it more visible by drawing straight vertical lines from these points.
Any help will be greatly appreciated. Thank you.
Use plot with endpoints with the same x value and different y values. (and don't forget to use myaa to beautify the output).
x = 0:0.1:2*pi;
y = sin(x);
plot(x,y);
hold on;
plot([0.6 0.6], [-1 1], 'Color', [0.7 0.7 0.7], 'LineWidth', 2);
plot([3.6 3.6], [-1 1], 'Color', [0.7 0.7 0.7], 'LineWidth', 2);
If you do this often I would recommend you a great submission from the FileExchange:
hline and vline
Just do:
vline([40 400 950])
Read the function documentation, if you want the line to have different properties than default.
I typically do this using something like this (is powers is a row vector).
powers = randn(1,1000)+40;
plot([1;1]*[40 400 950], [[0 0 0]; [powers([40 400 950])]],'k-')