AreaChart with curveType: 'function'?

[Asela Bandara]

Hi,

I have a requirement to draw AreaChart with curved lines, but curveType: 'function' currently doesn't support or AreaChart.

Also, i tried with LineCharts which supports curveType: 'function', but then it doesn't allow to fill the chart area.

Can anyone suggest a viable solution for this?

Appreciate any feedback!

Thanks & Regards,

Bandara

[asgallant]

There is no support for this in the API.  Theoretically, if you have both a continuous axis (date, datetime, or number type) and a function which can calculate a curve for you given a series of points, then you can fake a curve by creating a series with a very large number of data points, calculated by the function.  This would give you a curved line in an AreaChart.

Implementing something like this could be a considerable effort.

[Morar Ioan]

I need help for this too. It is possible to have curveType at areaChart too?

[Daniel LaLiberte]

Hi Morar,

Sorry, we haven't implemented the curve function for the AreaChart.  It would be possible, but we are unlikely to get to it before we switch over to the newer implementation based on the Material design.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

If could be possible can you send me a email with details? I really need this.
Thanks,
Jonny

> dlali...@Google.com 5CC, Cambridge MA
> daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
>
> --
> You received this message because you are subscribed to a topic in the

> Google Groups "Google Visualization API" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/JpmhKoo2-hg/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

[Daniel LaLiberte]

I mean it would be possible if we make sufficient changes to the code to support it.  The only way you could implement this now is to interpolate points yourself, adding more rows of data to simulate what Google Charts does to smooth the line.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

So will be possible when you will release new version? Can you tell me
when will be this?
I need it to find a way.

Thanks,
Jonny

On Tue, Apr 14, 2015 at 4:03 PM, 'Daniel LaLiberte' via Google

[Morar Ioan]

Or can you help me to can set opacity area at line chart?

[Daniel LaLiberte]

We don't know at this time when we will be able to make this feature available.  The line chart does not have an area opacity option, but if it did, it would be the same as the area chart.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Can you give me then one ideea what I can do? I need to find a way to
draw area chart with curves and I think that you can give me some
ideea and how can I make it.

Thanks for answers,
Jonny

On Tue, Apr 14, 2015 at 4:57 PM, 'Daniel LaLiberte' via Google

[Morar Ioan]

Sorry for so many message. Have you for me a answer for last question?
I also have a question for "viewWindowMode". I set to 'pretty' but don't work.
I attached a image to see my problem. I want to see all ticks but not
intercalate. Exist a option for this?

Thanks,
Jonny

[Daniel LaLiberte]

Jonny,

Sorry, I don't have any more suggestion for you other than to do your own interpolation as I suggested previously. It is not an easy task, but there are algorithms out there to start from.  Check this out, for an example: http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

The viewWindowMode is 'pretty' by default for vertical axes (the target axis), so you don't need to specify it.  For the domain axis (usually the x or horizontal axis) you do need to specify it since the default is 'maximized'.    Normally, all your data points should be visible in the chart by default.  Do you have a viewWindow option set to limit it?

You did not attach any image.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Here is the image. I dont have set limitation.

On Wed, Apr 15, 2015 at 3:25 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

From the image, it looks like you are having a problem with the ticks overwriting each other.  If so, I would need to see the actual page to debug what is happening, not just an image.

I don't know what you mean by "I don't have set limitation".

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

My ticks is from a array. Because is so close this last two
dates(ticks) , text for ticks are overwriting. To send you entire code
is big. Because I take ticks from DB etc...
You have an ideea to change style? I have also this on options:
"allowContainerBoundaryTextCufoff: true ". I i remove it , then last
ticks dont appear

On Wed, Apr 15, 2015 at 3:48 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

If you could point at the web page, that would be better than sending code anyway since I couldn't use your server-side code.

To give the ticks more space, perhaps you can set the viewWindow.max to a larger value than your largest tick value.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

Morar,

Here is another idea for how to get an area chart with curved edges.  Use the intervals area feature, documented here: https://developers.google.com/chart/interactive/docs/gallery/intervals#Example6

You'll have to arrange your data such that the adjacent areas have values that match up, but this seems doable.

[Morar Ioan]

Thanks for answer. I will try this version.
I have other question at you, and I hope you can help me.
I have chart and a button to print chart. How can I make at print to
show me all items from legend not the blue arrows?

Jonny

On Mon, Apr 20, 2015 at 9:08 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

Can you attach  an image of what you are getting so I can tell what you are referring to?  I suspect you mean you have more items than will fit in the legend, and you are getting the scrolling buttons.  If so, the only way to show more items is to give them more space, by increasing the size of your chart, or by shrinking the font size of the legend.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Is posible to create my own legend? Exist a way to take colors from
slices to can use in a custom legend?

On Tue, Apr 21, 2015 at 3:45 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

You can always create your own legend, using information that you give to the charts.  You can control what colors will be used in the charts by providing a 'colors' option; otherwise, you will have to find out what colors the chart uses and match those colors.   A list of the default colors has been posted: https://groups.google.com/forum/#!msg/google-visualization-api/fmZzdKnmQC0/3KYsJ4N-IeMJ

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Thanks a lot for help. You really helped me. I have one more question.
I have problem in axis where I have value. I want to have automaticaly
format for K, M ... ex: 1M, 30K ...
I use packages: corechart. I see that in Bar packages value on axis
isautomaticaly format. But for corechart dont work. I tryed also with
displayExactValues = false but dont work. I use Area, Line, Bar,
Column and Pie. In feature I want to use Scatter also. Can you help
me? Can you give me a list with all packages? Or can you explain me
how can I make this? So on axis can see also 1M ... and 300K .. not
just one sufix at number...

Jonny

On Wed, Apr 22, 2015 at 3:40 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

You can now use a format of 'short' to format the tick values using K, M, etc.  This doesn't work for small numbers, however, e.g. 0.001 ought to be 1m.  There is also the 'scientific' format, which will give you, e.g. 1E3 for 1000, and 1E-3 for 0.001.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

I want to format for example value on yaxis on column. If i have 1000 and 1000000 to have on range 1K and also 1M, not same sufix. Is this posible?

[Daniel LaLiberte]

Yes, specifying format: 'short' will use either K or M or G or T as required.

[Morar Ioan]

This is perfect. Thanks very much. Last problem here is to put prefix
, currency symbol. Can I add it here?

On Wed, Apr 22, 2015 at 7:08 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

Unfortunately, you can't mix the special names ('short', 'scientific', and a couple more) with other formatting symbols.  Might be simplest to just add the currency to your title.  e.g. "Sales per year ($)".

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Here is an example:
http://jsfiddle.net/uLk7t6cg/18/
I have problem with fontsize. Exist a way to make text smaller? An in
example I have a formatter. Can I use something like this for axis
too? (remaining also K,M ...)

On Wed, Apr 22, 2015 at 8:54 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

There is a tooltip: { textStye: { ... } } option where you can set the fontSize.  But apparently, there is a problem using any font size changes in jsfiddle with the default option in jsfiddle of "Normalize CSS".  Uncheck that option on the left side of your screen and it will work better.  See http://jsfiddle.net/dlaliberte/uLk7t6cg/20/

You can't use the formatter to format the generated tick values, sorry. 

If you want to specify the tick values yourself, then you can format them however you want as well.  Use the vAxis: { ticks: [ ... ] } option for that.  For example: http://jsfiddle.net/dlaliberte/uLk7t6cg/21/

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

I use ticks that I get from server for time axis. I will try with
ticks also for the other axis. Thanks for all your help.

On Wed, Apr 22, 2015 at 9:33 PM, 'Daniel LaLiberte' via Google

[Morar Ioan]

Can you also help me with this? (check image)
How can I make that to have an optional guidline like a border at ChartArea?

Jonny

[Morar Ioan]

Check my previous question also please. I have one more too.
I use 'short' pattern in NumberFormat but I see that 10500 become 10K.
I want to remain 10.5K
Why? For example I have 1005000$ and using 'short' => 1M but the
difference of 5000$ is big. I want to can set my precision. This is
possible? Or exist a way to format each value in tooltip?

Jonny

[Morar Ioan]

Hy Daniel,
I need one more help. I try to use slantedText or showTextEvery on
BarChart but I see that doesn't work. You know what I can do to make
it works? On other chart this works.

Jonny

[Daniel LaLiberte]

Those options only apply to discrete axes.  Which axis of the BarChart are you trying to use the options with?

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

YAxis.

On Mon, May 4, 2015 at 3:13 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

Actually, what I said was wrong.  Those options only apply to the horizontal axis, so that's why they don't work on the vAxis.  But they do apply for continuous values as well as discrete. We'll have to fix the documentation at least.  The slanting option is not as useful for the vertical axis, but the showTextEvery option could certainly be useful, so we should fix that.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Ok. Then I will try to make a custom ticks list, and when you have new
update then I will use this options.
Thanks.

On Mon, May 4, 2015 at 3:40 PM, 'Daniel LaLiberte' via Google

[Morar Ioan]

I have other question if you can help me.
I want to draw in a div chart with legend, and in other under first
one a chart without legend. I made a method to send object for legend
with { position: 'none' } or { position: 'bottom', alignment: 'start'
} and code like:

var optionForOther = factory.chartOptions("other", footerData, period,
subPeriod, isCurved, isDonut, legendValueType, ""); ////here I get my
option with legend {position: 'bottom', alignment: 'start'}
var optionForPrintOther = factory.chartOptions("other", footerData,
period, subPeriod, isCurved, isDonut, legendValueType, "print");
//here I get my option with legend {position: 'none' }

var divForChart = document.getElementById('div-for-chart');
var chart = new google.visualization.ColumnChart(divForChart);

var divForPrintChart = document.getElementById('div-for-chart-print');
var chartPrint = new google.visualization.ColumnChart(divForPrintChart );

chart.draw(tdata, optionForOther);
chartPrint.draw(tdata, optionForPrintOther);


I have an error on first div : "Chart not drown" and in second "c is null."
Can you help me with one ideea how can I draw one with legend and one
without? I want to do it in same call. Not to recall to get data and
redraw.

Jonny

[Daniel LaLiberte]

Jonny,

The message "c is null" sounds like you found a bug.  I can't tell what is going wrong from what you said.  It would be best if you could point to a page that shows the problem, or if you can't do that, post enough code and data so I can reproduce it.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

I attached you a part of code to see what I've done, how I draw, and
in last method (LoadChart) you will see that I tryed to draw twice.
Thanks,
Jonny

On Wed, May 6, 2015 at 4:01 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

I can't reproduce the problem given just that code.  Some sample data is needed, and there are missing functions, so I can't easily build a working example.  I don't see anything obviously wrong just by inspecting the code, but it would be much easier to figure out what is going on given a live example that shows the problem.

I noticed you are using eval when you don't really need to.  I don't think this is causing your problem, but you should probably avoid it anyway.

eval("var chart = new google.visualization." + chartType + "(divForChart);"); //I use eval because I take chartType from DB

You can avoid using eval a couple different ways.  Since you are testing the chartType later anyway, just wait until then to create the chart object.  But you could also do this:

var chart = new google.visualization[chartType](divForChart);

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

I made a function that call drawChart twice. And on callback on
vizualisation I made a request to this function and it work.
I have other important question.
http://jsfiddle.net/uLk7t6cg/11/

I have some big value and some small value. In this case the small one
is hide. I tryed to use logScale and is perfect, but when I have
negative value this dont work. How I can make to have logScale (or
something like this) but to work for negative too.

Thanks,
Jonny

On Thu, May 7, 2015 at 3:35 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

Morar,

There is an undocumented option that supports what you want. { vAxis: { scaleType: 'mirrorLog' } }  This only works with the 'classic' charts, not the 'material' charts.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

This is perfect. Thanks a lot for all your help.

Jonny

[Morar Ioan]

Hy Daniel,

I use this scaleType but i see next problem:
http://jsfiddle.net/uLk7t6cg/29/

It is possible to have more guidline with some value? And on top of
column where is 120 to have also a guidline?

Jonny

[Daniel LaLiberte]

You can use the explicit ticks option to specify the tick values you want.  A tick value at 120 would be odd, on a log scale, but you can do it if you want.  See: http://jsfiddle.net/dlaliberte/uLk7t6cg/32/

Note that there is a bug involving the log and mirrorLog scales, in that if you don't have data that is in range where you want ticks, in particular, values closer to 0, you may sometimes get some overlapping ticks.   We should be able to fix this soon.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Understand. My problem is space between baseline and first guidline.
Dont exist a way to set minorguidlines there too? on simple chart
there is a symmetry between automaticaly ticks but if there I try to
set particular ticks this dont work perfect. Where I have maybe some
value like 300, 1000, and 10000000 -> 300 will be too small. That is
why I use logscale. But I see here that the guidline dont have a
symetry. this is normal on logScale or is something that can be fixed?
You understand what I want to say? Look:
http://jsfiddle.net/uLk7t6cg/33/

Between 0 and 2 I can insert some minorguidlines?

On Thu, May 14, 2015 at 3:30 PM, 'Daniel LaLiberte' via Google

[Daniel LaLiberte]

On a strict log scale, 0 is at negative infinity, so it cannot be on a chart of finite size.  The mirrorLog scale treats the area around 0 differently, by finding the smallest non-zero absolute value, and scaling linearly between + and - of that value.

You can specify ticks that are as small as you want.  Here I added a couple more ticks smaller than 1, along with a smaller data value so they show up properly.  http://jsfiddle.net/dlaliberte/uLk7t6cg/34/

The minor gridlines will only be drawn on a log scale between major ticks that are separated by powers of 10.  We don't currently draw any additional gridlines in the linear area around 0 on the mirrorLog scale.  Ideally, there should be no values in that area except for 0.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Morar Ioan]

Thanks very much for help. Now I will find a way to use this in my
problem. Thanks.

On Thu, May 14, 2015 at 4:26 PM, 'Daniel LaLiberte' via Google

[Morar Ioan]

Hy Daniel,
I come back to you because you helped me.
I try to set negativeColor for a formatter for number but I see that
it doesn't work? Can you help me to make it works? I see that
paranteses work but only on tooltip. Can I make for negative value to
have red color for label on axis?

http://jsfiddle.net/uLk7t6cg/38/

Jonny

[Daniel LaLiberte]

The negativeColor format option should do what you tried to do, but it appears to be broken.  Thanks for reporting this problem.

The formatting and style of axis tick labels is done separately from the data values, and we don't have any options yet for altering the style of individual axis tick labels.

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA