## Re: Draw horizontal and vertical lines in series chart

Expand Messages
• Hi Tripp, thank you for the reply and sorry for the late thank you as well. I did succeed in doing this and I like the result very much! Here s an example:
Message 1 of 3 , Oct 31, 2008
Hi Tripp, thank you for the reply and sorry for the late thank you as
well.

I did succeed in doing this and I like the result very much!

Here's an example:

http://img247.imageshack.us/my.php?image=minorsj9.png

Just posting a quick walk through as it is not the first time I've had
to do something similar and it might help someone in the future.

1) The horizontal line, this can be done in two ways.
The first way is to set the minimum and maximum parameters for your
chart and add it to the series for the minimum and for the maximum.
Assuming that the date2 is different for the middle values, something
like:

var date1 = new Date(), date3 = new Date();
date1.setMinutes(date2.getMinutes() - 1); // innitial date2 - 1 minute
date3.setMinutes(date2.getMinutes() + 1); // final date2 + 1 minute

YAHOO.example.monthlyExpenses =
[ { date: date1, level:950 },
{ date: date2, rent: 880.00, utilities: 894.68},
{ date: date2, rent: 880.00, utilities: 901.35 },
{ date: date2, rent: 880.00, utilities: 889.32 },
{ date: date2, rent: 880.00, utilities: 884.71 },
{ date: date2, rent: 910.00, utilities: 879.811 },
{ date: date3, level: 950 }
];

In this case if the level series is drawn as a line (with size 1), it
will show up as a line from first to last

The second way is to add the level to each series

YAHOO.example.monthlyExpenses =
[
{ date: date2, rent: 880.00, utilities: 894.68, level: 950},
{ date: date2, rent: 880.00, utilities: 901.35, level: 950 },
{ date: date2, rent: 880.00, utilities: 889.32, level: 950 },
{ date: date2, rent: 880.00, utilities: 884.71 , level: 950},
{ date: date2, rent: 910.00, utilities: 879.811 , level: 950},

];

This will look ok if you have a chart with many values (like my
example above). If there are just 2 bars on the chart it will look a
bit strange as the horizontal line will start from the middle of the
first bar and end up on the middle of the second bar.

My solution used a combination of (1) and (2), simply because I
started off with doing (2) and then realized I needed a bit more.

2) The vertical line is very simple, one:
YAHOO.chartValues.push({date: now, now: maxVal * 1.1});

where YAHOO.chartValues is an array with the chart data, now is new
Date() and maxVal was the maximum of all the values in the chart.

The thing about both the vertical and horizontal line is that they
must be added to the series definition array last or else they will be
behind everything else.

So the series will look like:

var seriesDef =
[
/* normal series definitions go here */
{
yField: "date",
xField: "now",
displayName: "Now",
style:{size:1}
},

{
yField: "date",
xField: "level",
displayName: "Level",
style:{size:1}
}
];

Hope this will be helpful to someone in the future!

Laura

--- In ydn-javascript@yahoogroups.com, "tripp.bridges" <trippb@...> wrote:
>
> Hi,
> There is no functionality for drawing lines on a chart independent of
> the data. There are gridlines which I understand do not suit your
> needs. It sounds like you want to select a position on the y axis to
> place a vertical line. The only way that I can see to mimick this
> behavior is by creating an additional series that has its own x and y
> axis. Of course you will need to include values for the axes in your
> data. Below I've hacked together what I am referring to using the line
> chart example on yui.
>
http://developer.yahoo.com/yui/examples/charts/charts-quickstart_clean.html
>
> I had to add new properties in dataSource. (nowTime, nowLevel) Below
> is the code. It may point you in the right direction. Feel free to
> clarify if I am not understanding your issue correctly. Thanks, Tripp
>
> <script type="text/javascript">
>
> YAHOO.widget.Chart.SWFURL =
> "http://yui.yahooapis.com/2.6.0/build//charts/assets/charts.swf";
>
> //--- data
>
> YAHOO.example.monthlyExpenses =
> [
> { month: "January", rent: 880.00, utilities: 894.68, nowTime:"May",
> nowLevel:950 },
> { month: "February", rent: 880.00, utilities: 901.35, nowTime:"May",
> nowLevel:950 },
> { month: "March", rent: 880.00, utilities: 889.32, nowTime:"May",
> nowLevel:950 },
> { month: "April", rent: 880.00, utilities: 884.71, nowTime:"May",
> nowLevel:950 },
> { month: "May", rent: 910.00, utilities: 879.811, nowTime:"May",
> nowLevel:950 },
> { month: "June", rent: 910.00, utilities: 897.95, nowTime:"May",
> nowLevel:0 }
> ];
>
> var myDataSource = new YAHOO.util.DataSource(
> YAHOO.example.monthlyExpenses );
> myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
> myDataSource.responseSchema =
> {
> fields: [ "month", "rent", "utilities", "nowTime", "nowLevel" ]
> };
>
> //--- chart
>
> var seriesDef =
> [
> { displayName: "Rent", yField: "rent" },
> { displayName: "Utilities", yField: "utilities" },
> {
> yField: "nowLevel",
> xField: "nowTime",
> displayName: "Now",
> style:{size:0}
> }
> ];
>
> YAHOO.example.formatCurrencyAxisLabel = function( value )
> {
> return YAHOO.util.Number.format( value,
> {
> prefix: "\$",
> thousandsSeparator: ",",
> decimalPlaces: 2
> });
> }
>
> YAHOO.example.getDataTipText = function( item, index, series )
> {
> var toolTipText = series.displayName + " for " + item.month;
> toolTipText += "\n" + YAHOO.example.formatCurrencyAxisLabel(
> item[series.yField] );
> }
>
> var currencyAxis = new YAHOO.widget.NumericAxis();
> currencyAxis.minimum = 800;
> currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
>
> var mychart = new YAHOO.widget.LineChart( "chart", myDataSource,
> {
> series: seriesDef,
> xField: "month",
> yAxis: currencyAxis,
> dataTipFunction: YAHOO.example.getDataTipText,
> //only needed for flash player express install
> expressInstall: "assets/expressinstall.swf"
> });
>
> </script>
> --- In ydn-javascript@yahoogroups.com, "larhire" <larhire@> wrote:
> >
> > I have a system-load kind of chart which shows an item count over
> > time. The I need to place a horizontal line on the chart showing the
> > maximum system-load, and a vertical line showing "now".
> >
> > Part of my problem seems solved here:
> >
> > http://tech.groups.yahoo.com/group/ydn-javascript/message/35535
> >
> > as the horizontal line shows just what I need so I will start looking
> > for how to add a second series to a chart.
> >
> > I just need the "now" vertical line on the chart, the TimeAxis does
> > not seem to have any API for adding a "now" to the chart, but I'm
> > guessing this will be something similar with the horizontal line.
> >
> > I was wondering if anyone had any pointers on this ?
> >
>
Your message has been successfully submitted and would be delivered to recipients shortly.