I'm trying to add a margin to my chart from the right, so that the final point is not chopped as shown here:
last point
Code demo: codepen
Solutions I've tried so far:
Setting the offset, which works but it has too much of a margin, to the point where it's not readable on mobilephones
Setting the bounds: 'ticks' option, which works, but when the data is spread among a small timeline, the graph is super crunched up
The following solution seems like the golden answer, however it is not suitable for v2.7.3
Any help is appreciated, Thanks!
Related
Chart.js 2.6.0
Expected Output
I have a problem to solve, I needed to generate this chart out of data:
I somehow managed to generate this chart.
Problems
I am searching for best way to detect summit/peak of data-mountains so that I could put a point(arc) at the top.
Is there a way to put labels in x-axis like in the picture above? I mean there is label after every 21 seconds.
Code so far
Gist: https://gist.github.com/shivabhusal/efb48db79128ffd926cc25960a1d875c
I overrode the draw function of Chart.js and drew lines and points on my own.
Any help will be appreciated, thanks.
Note: My data is not guaranteed to be pointy at the summit; sometimes it can get plateau.
Necessary CodePen is https://codepen.io/shivabhusal/pen/LjWyMe?editors=0010
I'm taking a look at this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/
I'd like to do a very similar chart but it's not working out how I want it to. My current fiddler is this: (see edit below!)
The main functional differece is in the first fiddler, he's using a range, whereas I'm using just actual values (and timestamps).
What's not working for me:
The labels are jacked up. If I try to mouse over a point on mine it's way off; it seems to be 'stuck' on the left. If you try to mouse over you should see the same issue.
I can't zoom in. On his chart you can't zoom in either, but on another chart I was messing around with, it seems like all I needed to do to add zooming was put in:
chart: {
zoomType: 'x'
},
But that doesn't seem to be working here.
The points are so big that the bottom part in green looks too 'blobby'. How can I just remove those point markers?
In summary, how can I have this map have just lines with no blobs, with zooming, and labels that follow your mouse?
EDIT: I have a new version, where the labels work and the blobbiness is removed. However the zoom still doesn't work. How can I enable the zoom?
http://jsfiddle.net/qprmjm67/
Turns out that there's a much easier way to do this, using zones.
stackoverflow makes me put code to put a link. So I'm typing fake code here.
http://jsfiddle.net/2f1c659L/
I am using the Google Visualization API to generate some pretty simple bar charts. The only slight complication is that the labels can be very long. The client is fine with them truncating but wants to give the chart a little more space.
Try as I might, I cannot find a way to increase the distance from the labels to the chart area! The irritating things is that if the labels are all short, the padding is fine; as soon as they get long, they all right align right up to the chart before truncating.
I've tried various chartArea.width / chartArea.left combinations, no joy; tried adding padding and margins to the vAxis.textStyle in the hope that the documentation is just incomplete; no joy.
I cannot believe that with all the other trillions of configuration options there is no way to increase label padding!
Fiddle:
http://jsfiddle.net/9v6os5x6/2/
EDIT: What it looks like it is doing is either calculating a decent padding for labels that fit and then not compensating for the ellipsis, or leaving a space that is exactly one ellipsis wide when drawing non-truncated labels, because if you set all labels to be short then just increase one, what it looks like it is doing is filling the gap of the truncated one with the ellipsis, then aligning all the others.
This is much easier to see by fiddling with the fiddle than it is to explain in words :)
Is it possible to get the X-axis left aligned when using Google Charts?
The chart will look better as there are more data points available (weekly updates), but it looks like crap when it's centered like it is by default.
I've been searching around without results.
Edit:
I guess this question is basically the same: How to get google charts X-Axis points starting at the left most point, but the accepted solution isn't worth it in my case. Anyone who knows of a better solution?
Turns out it's not possible without faking data points.
I have a Google line chart, I set 'curveType': 'function' so the graph is curved and has a nice appearance. My problem is that when a data point has a value of 0, followed by a following high value, the chart dips below 0 so that the curve can fit correctly. This also causes the vAxis to have a minRange of -2000, this isn't possible for my data (number of downloads over time).
I've tried to solve this by setting 'minValue': 0 and 'viewWindowMode': 'maximized' on the vAxis, but it hasn't solved the problem completely.
I have attached an image that will explain my problem a lot better than I can with words.
If anyone knows a solution to this, without me having to go back to straight lines, it would be much appreciated. Thanks
The curve may continue to dip below 0 no matter what you do, but you can crop the view so the lowest point of the displayed graph is at 0. You can do that with the vAxis.viewWindow.min property:
lineChart.draw(data,
{
curveType: "function",
vAxis: {viewWindow: {min:0} }
}
);
See the LineChart documentation for information on vAxis.viewWindow.min and other configuration options.
Just a quick update on this. I realised that my data work not be suitable for a curved graph anyway, as it is discrete data and not continuous. I had to switch back to straight lines, which removed my problem. Not an ideal solution, I know, but it is one that worked for me.
You could try another charting library. I often use flot for simple graphs, and raphael graphs for more complicated things (slightly harder to manipulate, and looks a bit more clunky to me)
gRaphael: http://g.raphaeljs.com/
Flot: http://www.flotcharts.org/