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

Re: YUI Charts : How can i display a just a point on a line chart?

Expand Messages
  • tripp.bridges
    You should implement it as you would any other series. You only need to place a value on the index where your point is going to fall. If there are no other
    Message 1 of 6 , Sep 3, 2009
    • 0 Attachment
      You should implement it as you would any other series. You only need to place a value on the index where your point is going to fall. If there are no other items in your series, no connecting lines will be drawn.

      If you run into any issues post a link or your full chart code.

      Tripp
      --- In ydn-javascript@yahoogroups.com, "r2b2_ry" <r2b2_ry@...> wrote:
      >
      > Hello,
      >
      > I have this data which are shown in my line chart as two series (data is truncated for this example):
      >
      > [{"capex_per_capacity": 1800, "capacity": 1000, "trendline": 1752},
      > {"capex_per_capacity": 1700, "capacity": 5000, "trendline": 1697},
      > {"capex_per_capacity": 1118, "capacity": 170000, "trendline": 2623}]
      >
      > The xField there is the capacity, and the series are capex_per_capacity and trendline.
      >
      > My problem is I have to display a third series, which is just a point and not a line. This is the example data for the said 3rd series :
      >
      > {"capacity" : 45000 , adjusted_capex : 1573}
      >
      > How can I do this in YUI charts?
      >
      > Thanks !
      >
    • r2b2_ry
      Hi Tripp thanks for the reply. I tried what you ve suggested but the graph doesn t plot any series at all , see the screenshot here :
      Message 2 of 6 , Sep 3, 2009
      • 0 Attachment
        Hi Tripp thanks for the reply.

        I tried what you've suggested but the graph doesn't plot any series at all , see the screenshot here : 
        http://img228.imageshack.us/i/chartn.png/     --no points in the chart
        http://img512.imageshack.us/img512/7172/chart1d.png  -- chart showing 2 series only.

        Here is the output of my data, line 35 is where the data for the third series lies :

        http://pastie.org/private/j4y8j38j0s2p8oakst3a
         

        And here is the code to generate the chart :

         var chartDataSource = new YAHOO.util.DataSource("curve_fit");
                chartDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                chartDataSource.responseSchema = {
                    resultsList: "data",
                    fields: ["capacity","capex_per_capacity","trendline","adjusted_capex_per_capacity"]
                };
               
                var seriesDef = [
                  {displayName : "Known costs"     , yField : "capex_per_capacity"},
                  {displayName : "Trendline"       , yField : "trendline"},
                  {displayName : "Adjusted capex"  , yField : "adjusted_capex_per_capacity"}
                 
                ];
               
                //settings for the xaxis
                var numericXAxis = new YAHOO.widget.NumericAxis();        
                numericXAxis.labelFunction = numberFormatter;
                numericXAxis.minimum = 0;          
                numericXAxis.majorUnit = 50000; 
               
                //settings for yAxis
                var numericYAxis = new YAHOO.widget.NumericAxis();
                numericYAxis.minimum = 1000;
                numericYAxis.labelFunction  = currencyFormatter;
                numericYAxis.majorUnit = 200; 
                numericYAxis.title = 'CAPEX per capacity';       
           
                var chartCurveFit = new YAHOO.widget.LineChart("curve_fit",chartDataSource,{
                   scale  : "logarithmic",
                   series : seriesDef,
                   xField : "capacity",          
                   style  : {
                    yAxis : {
                      titleRotation : -90,
                      minorTicks : {
                        display:'none'
                      }
                    },
                    xAxis : {
                      labelRotation : -40
                    }
                   },
                     xAxis  : numericXAxis ,
                     yAxis  : numericYAxis
                  });


        Is there something wrong that I'm doing here ?

        Thanks a lot!
      • Dwight Bridges
        It looks like you have found a very odd bug when using 2 numeric axes, setting a minimum and having null values in a chart. The good news is that this bug no
        Message 3 of 6 , Sep 3, 2009
        • 0 Attachment
          Re: [ydn-javascript] Re: YUI Charts : How can i display a just a point on a line chart? It looks like you have found a very odd bug when using 2 numeric axes, setting a minimum and having null values in a chart. The good news is that this bug no longer exists in the latest builds which will be included in our next release.
          You can test your chart by grabbing the latest build from github. Additionally, a good workaround may be to eliminate your minimum from your y-axis. If that is suitable, it will remedy this bug. Post back if you have more issues/questions.

          Tripp


          On 9/3/09 8:32 PM, "r2b2_ry" <r2b2_ry@...> wrote:


           
           

          Hi Tripp thanks for the reply.

          I tried what you've suggested but the graph doesn't plot any series at all , see the screenshot here :  
          http://img228.imageshack.us/i/chartn.png/     --no points in the chart
          http://img512.imageshack.us/img512/7172/chart1d.png  -- chart showing 2 series only.

          Here is the output of my data, line 35 is where the data for the third series lies :

          http://pastie.org/private/j4y8j38j0s2p8oakst3a <http://pastie.org/private/j4y8j38j0s2p8oakst3a>  

          And here is the code to generate the chart :

           var chartDataSource = new YAHOO.util.DataSource("curve_fit");
                  chartDataSource.responseType = YAHOO.util.DataSource.T! YPE_JSON;
                  chartDataSource.responseSchema = {
                      resultsList: "data",
                      fields: ["capacity","capex_per_capacity","trendline","adjusted_capex_per_capacity"]
                  };
                  
                  var seriesDef = [
                    {displayName : "Known costs"     , yField : "capex_per_capacity"},
                    {displayName : "Trendline"       , yField : "trendline"},
                    {displayName : "Adjusted capex"  , yField : "adjusted_capex_per_capacity"}!
                    
           & nbsp;      ];
                  
                  //settings for the xaxis
                  var numericXAxis = new YAHOO.widget.NumericAxis();         
                  numericXAxis.labelFunction = numberFormatter;
                  numericXAxis.minimum = 0;           
                  numericXAxis.majorUnit = 50000;  
                  
                  //settings for yAxis
                  var numericYAxis = new YAHOO.widget.NumericAxis();
                  numericYAxis.minimum = 1000;
                  num! ericYAxis.labelFunction  = currencyFormatter;
                  numericYAxis.majorUnit = 200;  
                  numericYAxis.title = 'CAPEX per capacity';        
              
                  var chartCurveFit = new YAHOO.widget.LineChart("curve_fit",chartDataSource,{
                     scale  : "logarithmic",
                     series : seriesDef,
                     xField : "capacity",           
                     style  : {
                      yAxis : {
                  &n! bsp;     titleRotation : -90,
             ;           minorTicks : {
                          display:'none'
                        }
                      },
                      xAxis : {
                        labelRotation : -40
                      }
                     },
                       xAxis  : numericXAxis ,
                       yAxis  : numericYAxis
                    });


          Is there something wrong that I'm doing here! ?

          Thanks a lot!
            
              


        • r2b2_ry
          Removing the minimum attribute for y-axis did the trick. I think im just going to wait for the next release, although I m also using the build which have the
          Message 4 of 6 , Sep 4, 2009
          • 0 Attachment
            Removing the minimum attribute for y-axis did the trick. I think im just going to wait for the next release, although I'm also using the build which have the fix for setting the widths of the column charts..

            When is the next release scheduled? Is it gonna happen soon?

            Thanks again for your help, Tripp!

            Ryan
            --- In ydn-javascript@yahoogroups.com, Dwight Bridges <trippb@...> wrote:
            >
            > It looks like you have found a very odd bug when using 2 numeric axes,
            > setting a minimum and having null values in a chart. The good news is that
            > this bug no longer exists in the latest builds which will be included in our
            > next release.
            > You can test your chart by grabbing the latest build from github.
            > Additionally, a good workaround may be to eliminate your minimum from your
            > y-axis. If that is suitable, it will remedy this bug. Post back if you have
            > more issues/questions.
            >
            > Tripp
            >
            >
            > On 9/3/09 8:32 PM, "r2b2_ry" <r2b2_ry@...> wrote:
            >
            > >
            > >
            > >
            > >
            > > Hi Tripp thanks for the reply.
            > >
            > > I tried what you've suggested but the graph doesn't plot any series at all ,
            > > see the screenshot here :
            > > http://img228.imageshack.us/i/chartn.png/ --no points in the chart
            > > http://img512.imageshack.us/img512/7172/chart1d.png -- chart showing 2 series
            > > only.
            > >
            > > Here is the output of my data, line 35 is where the data for the third series
            > > lies :
            > >
            > > http://pastie.org/private/j4y8j38j0s2p8oakst3a
            > > <http://pastie.org/private/j4y8j38j0s2p8oakst3a>
            > >
            > > And here is the code to generate the chart :
            > >
            > > var chartDataSource = new YAHOO.util.DataSource("curve_fit");
            > > chartDataSource.responseType = YAHOO.util.DataSource.T! YPE_JSON;
            > > chartDataSource.responseSchema = {
            > > resultsList: "data",
            > > fields:
            > > ["capacity","capex_per_capacity","trendline","adjusted_capex_per_capacity"]
            > > };
            > >
            > > var seriesDef = [
            > > {displayName : "Known costs" , yField : "capex_per_capacity"},
            > > {displayName : "Trendline" , yField : "trendline"},
            > > {displayName : "Adjusted capex" , yField :
            > > "adjusted_capex_per_capacity"}!
            > >
            > > & nbsp; ];
            > >
            > > //settings for the xaxis
            > > var numericXAxis = new YAHOO.widget.NumericAxis();
            > > numericXAxis.labelFunction = numberFormatter;
            > > numericXAxis.minimum = 0;
            > > numericXAxis.majorUnit = 50000;
            > >
            > > //settings for yAxis
            > > var numericYAxis = new YAHOO.widget.NumericAxis();
            > > numericYAxis.minimum = 1000;
            > > num! ericYAxis.labelFunction = currencyFormatter;
            > > numericYAxis.majorUnit = 200;
            > > numericYAxis.title = 'CAPEX per capacity';
            > >
            > > var chartCurveFit = new
            > > YAHOO.widget.LineChart("curve_fit",chartDataSource,{
            > > scale : "logarithmic",
            > > series : seriesDef,
            > > xField : "capacity",
            > > style : {
            > > yAxis : {
            > > &n! bsp; titleRotation : -90,
            > > ; minorTicks : {
            > > display:'none'
            > > }
            > > },
            > > xAxis : {
            > > labelRotation : -40
            > > }
            > > },
            > > xAxis : numericXAxis ,
            > > yAxis : numericYAxis
            > > });
            > >
            > >
            > > Is there something wrong that I'm doing here! ?
            > >
            > > Thanks a lot!
            > >
            > >
            > >
            > >>
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.