amchart microline displays the chart out of boundary - javascript

I'm using amchart's Microline chart to display some values ranging from 0 to 50000 or more. But when it reaches the zero value, it displays the chart out of the boundary (As you can see in the screenshot).
How can I fix it? I've tried changing the margins but they didn't help.
amchart microline chart

Unfortunately there isn't a way to fix this due to how the AmCharts library handles smoothed lines internally. As a workaround, you can try setting your minimum to a small negative value that gives the curve enough space to not appear cut off when it curves below zero.

Related

Is there a way to scale negative y-axis tick differently from the positive in nivo

Is there a way to create a chart like the one on the image in nivo? I need to scale the negative tick values on the y-axis differently from the positive tick values. Positive tick step is much smaller, but the scale should be the same.
I tried to use the stream chart but I didn't find a solution for setting different scales. Also, the stream chart doesn't show the value from 0. So this would be more like a filled line chart where I would need to scale the positive part differently from the negative part.
Is this possible to achieve with the nivo library?

How does highstock represent the amount of point that is bigger than screen resolution?

I cannot understand the behavior of data grouping/representation in highstock (highcharts). Given questions are related, and maybe enough to answer only one of them. But I separated them to make myself clearer.
If we have 2000 points, screen resolution width is 1024px, and 'dataGrouping' is disabled. (In area chart, or line chart).
How does highstock represent those points?
Is highstock still grouping points?
If dataGrouping is enabled and groupPixelWidth is set as 1, doesn't that mean it shows 1 grouped point per pixel?
Those points just overlap.
No, if dataGrouping is disabled, points are not grouped.
Not exactly, as we can read in the API, that is the approximate pixel width of each group.
You can check the number of points in the example below and how their graphics are located.
Live example: http://jsfiddle.net/BlackLabel/mnt9gxoc/
API Reference: https://api.highcharts.com/highstock/series.column.dataGrouping.groupPixelWidth

using a d3 axis using a time scale, how do you evenly space wide gaps in time

This is for a multiline chart.
I'm displaying 20 points but in between them you might have a gap of days or weeks. This causes the axis to bump the points left and right when looking at a gap of three weeks. in general the points will be hourly, but long gaps may occur. I tried using d3.svg.axis.tickValues to set the values but it still spaces them unevenly.
You need to use a scale
d3.scale.linear().domain([..]).range([...]);
More info here : https://github.com/mbostock/d3/wiki/Quantitative-Scales

responsive axis values in d3

I am building a graph with d3, sometimes the graph has smaller numbers on the axis and sometimes the graph has larger numbers on the axis. This causes the following problem from time to time;
Notice how at the left and right hand side the svg element is done and such the entire legend doesnt get displayed. I would prefer not to play around with increasing the margins on either side because that would decrease the screen real estate.
Is there a way such that the axis are responsive with regards to the data input? Ie; when the numbers are in the thousands then a 'k' or an 'm' is added to the number ( 100000 -> 100K, 12000000 -> 12M ).
The function axis.tickFormat() allows you to do exactly that. The formats are described in the documentation for d3.format(). In your case, you need to specify something like
axis.tickFormat(d3.format("s"));

Draw vertical line when two lines cross in Highcharts

I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.

Categories