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/
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
[EDIT] - Resolved: See final chart in the end.
Infomation
Some background first. I have a line chart that plots power produced by a facility in a very simple line chart. This facility has 5 machines producing this power. Sometimes, these machines have some problem or errors.
I would like to show these errors and for how long they have persisted, per machine, along with the power production chart.
The errors chart
Reading the Highcharts docs I realized that the best way to show that would be in a columnrangechart, inverting it to be a horizontal columnrangechart.
Here is an example (jsfidle):
Obs: Consider the [-6 .. 9 ] axis as a datetime axis
This chart would be read like: Machine 0 had two errors: One from -6 to -1, and another one from 0 to 2, and so on.
Where Am I now?
So, now I tried to make this work together with a line chart. And this is where I can not make it work. My columnrangechart stays in the vertical and not in the horizontal and I can figure how to flip it.
Here is the current state: (jsfiddle)
Question
Is there any way I can plot these two charts together?
[EDIT] Answer
Using #jlbriggs comment's idea, I could come up with the right chart (jsfiddle):
I have a column chart made with Highcharts and I want to add lines associated with each column showing benchmarks. I know Highcharts has a concept of plot lines, where there is one benchmark value given for the whole chart, but in my case, each column needs it's own benchmark. Here is a super simple example of how I want this to look:
I have some ideas of how I could do this, but they all seem like kind of indirect solutions. I could implement the benchmark lines as another column series, and style them so that only the top of the column shows, or as a scatter series where the "points" are actually lines, but I don't know if either of those are possible and they sound like a complicated way to do something simple. Hopefully I'm just missing an obvious feature of Highcharts.
Does anyone know how to do this? Thanks.
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've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example
Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)
There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.
Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico