Loading ...
Sorry, an error occurred while loading the content.

Re: Draw horizontal and vertical lines in series chart

Expand Messages
  • larhire
    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
    • 0 Attachment
      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] );
      > return toolTipText;
      > }
      >
      > 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.