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

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

Expand Messages
  • r2b2_ry
    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,
    Message 1 of 6 , Sep 3, 2009
    • 0 Attachment
      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
      Anyone? I m really pulling my hair on this :D
      Message 2 of 6 , Sep 3, 2009
      • 0 Attachment
        Anyone? I'm really pulling my hair on this :D


        --- 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 !
        >
      • 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 3 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 4 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 5 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 6 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.