Ichimoku Kinkō Hyō (一目均衡表) -like areas

[Lucero del Alba]

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:

This mess is called Ichimoku Kinko Hyo -- it's basically a set of 5 lines displayed over of a candlestick chart, two of these lines overlapping each other and rendering an area or "kumo" (cloud, 雲; more on Ichimoku Kinko Hyo on Wikipedia, the IchiWiki or BabyPips.com).

Anybody?  Any clue?  Thanks in advance.

[asgallant]

Yes, you can do that.  See this post for details and an example.

[Lucero del Alba]

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/.

If I could just hack into transparent whichever the series has a bigger value, that'll do it... maybe there's way around?

--
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/-/RAkP901jIk8J.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

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.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[Lucero del Alba]

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!

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/bqCvtCPLZGgJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

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 <drew_g...@abtassoc.com> 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/.

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 <drew_g...@abtassoc.com> wrote:

Yes, you can do that.  See this post 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:

This mess is called Ichimoku Kinko Hyo -- it's basically a set of 5 lines displayed over of a candlestick chart, two of these lines overlapping each other and rendering an area or "kumo" (cloud, 雲; more on Ichimoku Kinko Hyo on Wikipedia, the IchiWiki or BabyPips.com).

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/msg/google-visualization-api/-/RAkP901jIk8J.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

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/-/bqCvtCPLZGgJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

After applying a bit of hackery to the problem, I have come up with a solution: 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/

[Lucero del Alba]

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!

To view this discussion on the web visit 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-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

Hahaha!  "JS magic potion"  I'm going to bust that one out on my boss one of these days.

To view this discussion on the web visit 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+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[Lucero del Alba]

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?

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 google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

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/

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 google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[Lucero del Alba]

Oh, smart!  Plus with the millisecond conversion it won't matter whether it's a day/month/hourly time-frame.

I was trying this by the way while trying to add days: http://stackoverflow.com/questions/563406/add-days-to-datetime-using-javascript  Though it wouldn't have worked for time-frames other than days... well, not to mention it didn't work at all.

Gotta thank you one more time Andrew!

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 google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[Lucero del Alba]

You have to believe me, I wouldn't ask if I wouldn't had spent hours checking...  A problem arises with the isStacked flag on.  On the example you provided, we had this data set:

    [new Date(2012, 0, 1), 6, 12],
    [new Date(2012, 0, 2), 4, 9],
    [new Date(2012, 0, 3), 8, 14],
    (...)

Now consider this one,

    [new Date(2012, 0, 1), 106, 112],
    [new Date(2012, 0, 2), 104, 109],
    [new Date(2012, 0, 3), 108, 114],
    (...)

It's basically same, except that values are raised a hundred points from the base.  Both sets would normally chart the same since the Y axis would just lift its base automatically for a better displaying of data ( see http://jsfiddle.net/QpMRJ/7/  ).  However, when stacking areas from 0 (being 0 the base of Y axis) as your hackery does, the chart losses clarity as soon as you start setting points that would normally display a base different than 0.

I tried for this example lifting the base line 100 points via the configuration option vAxis: { baseline: 100 },  but I got a  "Cannot set a non-zero base-line for a stacked char" error message.  I tried stacking value from 100 on your JavaScript magic to no avail; I even tried a different approach, using white areas with complete opacity ( areaOpacity: 1​ ) to paint out the remaining area, but I realized very soon it wouldn't work, which brings me to... Is it absolutely necessary to stack overlapping areas from 0?  If not, how could the base for the Y axis be automatically lifted in a way that it would't affect how the chart is vertically displayed?

Hope it makes sense...  thanks in advance!!

--
    Emiliano

[asgallant]

Do you really want the baseline to be at 100 or do you just want the chart to start drawing at 100?

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 google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

--
    Emiliano

[Lucero del Alba]

Well, I said a 100 for the baseline just for the sake of the previous example.  What I would like --if possible-- is to have the baseline automatically set to whatever the default value would be for any given data set.  The chart does it automatically by default, I read the API reference but I couldn't find any way to "read" the value for the automatically set new baseline.  The best I can get is the minimum value I'm using, yet that is not the baseline, since it's somewhere slightly below that.

So, the answer would be "yes", let's make it 100 for this example; but then I would be clueless for another :-/

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/XQuijaXmqsUJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

Knowing the minimum value in the chart, you can calculate what you would like your base value to be.  Here is an example that sets the base of the y-axis equal to the largest multiple of 100 that is smaller than the minimum chart value: http://jsfiddle.net/asgallant/QpMRJ/8/

--
    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/-/XQuijaXmqsUJ.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[Lucero del Alba]

Impressive.  My JavaScript skills are far behind that.  And you're right also about using the minimum value as a reference too.

Thanks a lot, ¡muchas!

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/qYVXD8pYLVcJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

You're welcome.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/qYVXD8pYLVcJ.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[Lucero del Alba]

I got it!  I figured it out, I finally got it working.  There is a somewhat minor issue I found, I'm not even sure if it's a bug.

It would appear that the this trickery reduces the space for bars, which shouldn't be the case since it's only adding three area lines and not additional bars.  This is the working chart: http://jsfiddle.net/kA7Sp/3/ ; it works, but as mentioned the space for the bars got reduced, which is not particularly bad here but it affects the displaying when a bigger series are charted.  Here's, on the hand, the code with a slight change on line 41: http://jsfiddle.net/kA7Sp/4/ ; bars are back to their original size, but now the filled area is broken.

The bar.groupWidth config option would only help to a certain extend since the space is actually reduced as if it was another bar element on charting area.

Any clues, anybody?

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/il2HUyE0mzYJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano

[asgallant]

It's actually a response to the adding of a new row of data in between the other data rows where the lines cross.  The CandleStick series is narrowing the candles to make room for the candle that would be occupying that space where the lines cross.  It's easy to see when you force data into that row instead of leaving the candle series null: http://jsfiddle.net/asgallant/kA7Sp/6/ (look at the big candle where the lines cross, but don't copy this code as it inserts fake data at that point).  Narrower candles is part of the price you will have to pay to get the area shading you want.

...
Show original

[Lucero del Alba]

I see, it makes sense.  At least I can gain back a small amount of space by using the config option   bar: { groupWidth: "100%" }​

Thanks all the same!

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/AGtsC-XTHa4J.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
    Emiliano