I don't think javascript allows you to add Date objects together, so the
key here will be to translate from Dates to milliseconds and back. Here's
how: http://jsfiddle.net/asgallant/QpMRJ/4/
On Wednesday, January 9, 2013 5:06:52 PM UTC-5, Lucero del Alba wrote:
>
> And guess who's going back to this... I've been trying to adapt this hack
> into a date/datetime data type for the X axis. I tried changing the data
> set from:
>
> var data = google.visualization.arrayToDataTable([
> ['X', 'Y1', 'Y2'],
> [0, 6, 12],
> [1, 4, 9],
> (...)
> ]);
>
> to say,
>
> var data = new google.visualization.DataTable();
> data.addColumn('date','X');
> data.addColumn('number','Y1');
> data.addColumn('number','Y2');
> data.addRows([
> [new Date("2010-01-01"), 6, 12],
> [new Date("2010-01-02"), 4, 9],
> (...)
> ]);
>
> but it wouldn't work. The set does chart alright when I comment out your
> hackery, though. Notice I use continuous dates, so my guess was that days
> should sum up just alright when adding integers ( e.g. date + 1 ), but
> somehow they don't. Would you mind pointing out what's the deal with
> date/datetime data types in case you're already aware?
>
> On Mon, Jan 7, 2013 at 1:18 AM, asgallant <[email protected]<javascript:>
> > wrote:
>
>> Hahaha! "JS magic potion" I'm going to bust that one out on my boss one
>> of these days.
>>
>>
>> On Sunday, January 6, 2013 9:50:10 PM UTC-5, Lucero del Alba wrote:
>>
>>> haha, man, that's great! That is exactly what I intended to do, and
>>> after reading the API reference and playing around with the code I though
>>> it was just not possible, but there you go with some JS magic potion to
>>> save the day... can't believe how you're saving everybody's asses here on
>>> this group, let me know when you're in Berlin or Buenos Aires so I could
>>> get you a beer sometime.
>>>
>>> Kudos for your skills and enthusiasm Andrew, and huge thanks for taking
>>> the time to look into this!
>>>
>>>
>>> On Sun, Jan 6, 2013 at 10:50 PM, asgallant <[email protected]>wrote:
>>>
>>>> After applying a bit of hackery to the problem, I have come up with a
>>>> solution:
>>>> http://jsfiddle.net/**asgallant/QpMRJ/<http://jsfiddle.net/asgallant/QpMRJ/>.
>>>>
>>>> The key is to locate all of the points where the lines cross, and insert
>>>> a
>>>> row into the data at those points. This will work only for charts with
>>>> continuous x-axes (date, datetime, or number types [note that date and
>>>> datetime will require some code modification, but the principle is the
>>>> same]). As coded, it assumes all series will have points at every x-axis
>>>> coordinate, but you could conceivably modify it to handle cases where that
>>>> is not necessarily true. In the end, you have two line series and three
>>>> area series, and you can set your line and area colors independently.
>>>>
>>>> There is a slightly less code intensive version which involves just 3
>>>> area series, but you lose the freedom to color your areas independent of
>>>> the lines:
>>>> http://jsfiddle.net/**asgallant/3vpmz/<http://jsfiddle.net/asgallant/3vpmz/>
>>>>
>>>>
>>>> On Sunday, January 6, 2013 12:40:48 PM UTC-5, asgallant wrote:
>>>>>
>>>>> I'll think about this some more, maybe I'll come up with something.
>>>>>
>>>>> On Sunday, January 6, 2013 12:32:16 PM UTC-5, Lucero del Alba wrote:
>>>>>>
>>>>>> Hi Andrew. I see. Unfortunately lines would normally cross in
>>>>>> between points since they are calculated averaging previous currency
>>>>>> prices
>>>>>> and the like.
>>>>>>
>>>>>> The 'transparent' area trick you mentioned on the other post will
>>>>>> certainly help me, the changing area color feature was a plus to ease
>>>>>> the
>>>>>> chart understanding at a glance, considering the graphic already comes
>>>>>> with
>>>>>> a heavy load of information (candlesticks, 5 lines, 1 overlapping area).
>>>>>>
>>>>>> Thanks a lot for your help!
>>>>>>
>>>>>>
>>>>>> On Sun, Jan 6, 2013 at 2:06 PM, asgallant <[email protected]>wrote:
>>>>>>
>>>>>>> There isn't any way around it that I can think of; at least, not one
>>>>>>> that will work in all circumstances. If you could guarantee that there
>>>>>>> is
>>>>>>> a data point exactly where the two lines cross each other, every time
>>>>>>> they
>>>>>>> cross each other, then I think there is a way to do it, but otherwise
>>>>>>> no.
>>>>>>>
>>>>>>>
>>>>>>> On Sunday, January 6, 2013 11:40:32 AM UTC-5, Lucero del Alba wrote:
>>>>>>>
>>>>>>>> Wow Andrew, that's cool, thank you very much!
>>>>>>>>
>>>>>>>> Allow me to continue the conversation here since what I intend to
>>>>>>>> do is just slightly different than Ambientson's post. Notice how on
>>>>>>>> the
>>>>>>>> image I attached the area changes color when the lines overlap and the
>>>>>>>> lower one go above the other; on your code however, since one area
>>>>>>>> line is
>>>>>>>> 'transparent', the chart will keep using the other area line's color,
>>>>>>>> unless I remove the "color: 'transparent'" parameter... but then I'm
>>>>>>>> again
>>>>>>>> on square 1 with areas all the way to the X axis, see
>>>>>>>> http://jsfiddle.net/ydNT2/******2/ <http://jsfiddle.net/ydNT2/2/>.
>>>>>>>>
>>>>>>>> If I could just hack into transparent whichever the series has a
>>>>>>>> bigger value, that'll do it... maybe there's way around?
>>>>>>>>
>>>>>>>>
>>>>>>>> On Sun, Jan 6, 2013 at 4:19 AM, asgallant
>>>>>>>> <[email protected]>wrote:
>>>>>>>>
>>>>>>>>> Yes, you can do that. See this
>>>>>>>>> post<https://groups.google.com/d/msg/google-visualization-api/b_59yqMlWrY/D3Vf-8l1sg8J>
>>>>>>>>> for
>>>>>>>>> details and an example.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Saturday, January 5, 2013 11:16:03 PM UTC-5, Lucero del Alba
>>>>>>>>> wrote:
>>>>>>>>>>
>>>>>>>>>> Hi, would anybody know if it's possible to chart an area that
>>>>>>>>>> would not necessarily start on 0 on the X axis? In other words, a
>>>>>>>>>> two-values-per-point area. Consider the following graphic from
>>>>>>>>>> BabyPips.com <http://www.babypips.com/>:
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> <http://www.babypips.com/school/images/grade5/ichimoku-kinko-hyo.png>
>>>>>>>>>>
>>>>>>>>>> This mess is called Ichimoku Kinko Hyo -- it's basically a set of
>>>>>>>>>> 5 lines displayed over of a candlestick
>>>>>>>>>> chart<https://developers.google.com/chart/interactive/docs/gallery/candlestickchart>,
>>>>>>>>>>
>>>>>>>>>> two of these lines overlapping each other and rendering an area or
>>>>>>>>>> "kumo"
>>>>>>>>>> (cloud, 雲; more on Ichimoku Kinko Hyo on
>>>>>>>>>> Wikipedia<http://en.wikipedia.org/wiki/Ichimoku_Kink%C5%8D_Hy%C5%8D>,
>>>>>>>>>>
>>>>>>>>>> the
>>>>>>>>>> IchiWiki<http://www.kumotrader.com/ichimoku_wiki/index.php?title=Main_Page>
>>>>>>>>>> or
>>>>>>>>>> BabyPips.com<http://www.babypips.com/school/ichimoku-kinko-hyo.html>
>>>>>>>>>> ).
>>>>>>>>>>
>>>>>>>>>> Anybody? Any clue? Thanks in advance.
>>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>> Groups "Google Visualization API" group.
>>>>>>>>> To view this discussion on the web visit
>>>>>>>>> https://groups.google.com/d/**ms****g/google-visualization-api/-**
>>>>>>>>> /**R**AkP901jIk8J<https://groups.google.com/d/msg/google-visualization-api/-/RAkP901jIk8J>
>>>>>>>>> .
>>>>>>>>>
>>>>>>>>> To post to this group, send email to google-visua...@**
>>>>>>>>> googlegroups.**c**om.
>>>>>>>>>
>>>>>>>>> To unsubscribe from this group, send email to
>>>>>>>>> google-visualization-api+**unsub****[email protected].
>>>>>>>>> For more options, visit this group at http://groups.google.com/**
>>>>>>>>> group****/google-visualization-**api?hl=**e**n<http://groups.google.com/group/google-visualization-api?hl=en>
>>>>>>>>> .
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> Emiliano
>>>>>>>>
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups "Google Visualization API" group.
>>>>>>> To view this discussion on the web visit
>>>>>>> https://groups.google.com/d/**ms**g/google-visualization-api/-**/**
>>>>>>> bqCvtCPLZGgJ<https://groups.google.com/d/msg/google-visualization-api/-/bqCvtCPLZGgJ>
>>>>>>> .
>>>>>>>
>>>>>>> To post to this group, send email to google-visua...@googlegroups.**
>>>>>>> c**om.
>>>>>>> To unsubscribe from this group, send email to
>>>>>>> google-visualization-api+**unsub**[email protected].
>>>>>>> For more options, visit this group at http://groups.google.com/**
>>>>>>> group**/google-visualization-**api?hl=**en<http://groups.google.com/group/google-visualization-api?hl=en>
>>>>>>> .
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Emiliano
>>>>>>
>>>>> --
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Google Visualization API" group.
>>>> To view this discussion on the web visit https://groups.google.com/d/**
>>>> msg/google-visualization-api/-**/ht8Lqc6O_5AJ<https://groups.google.com/d/msg/google-visualization-api/-/ht8Lqc6O_5AJ>
>>>> .
>>>>
>>>> To post to this group, send email to google-visua...@**googlegroups.com
>>>> .
>>>> To unsubscribe from this group, send email to google-visualization-api+
>>>> **[email protected].
>>>> For more options, visit this group at http://groups.google.com/**
>>>> group/google-visualization-**api?hl=en<http://groups.google.com/group/google-visualization-api?hl=en>
>>>> .
>>>>
>>>
>>>
>>>
>>> --
>>> Emiliano
>>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Visualization API" group.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msg/google-visualization-api/-/rmzYW-xf5FAJ.
>>
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> To unsubscribe from this group, send email to
>> [email protected] <javascript:>.
>> For more options, visit this group at
>> http://groups.google.com/group/google-visualization-api?hl=en.
>>
>
>
>
> --
> Emiliano
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/OTB-6xcCxwwJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
