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

Chart styling

Expand Messages
  • eng_mr2000
    Dear all, I m using the chart control to draw a line chart. I tried to set some styling attributes but it didn t apply to the chart. for example the color of
    Message 1 of 4 , Nov 2, 2008
    • 0 Attachment
      Dear all,
      I'm using the chart control to draw a line chart. I tried to set some styling attributes but it didn't apply to the chart.

      for example the color of the series and the size of the marker.

      Can anyone help me in this issue?

      Here is the code

      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicChart.aspx.cs" Inherits="DynamicChart" %>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
          <title></title>

          <script src="js/jquery-1.2.6.js" type="text/javascript"></script>

          <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />

          <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

          <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>

          <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

          <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

          <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>

          <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/charts/charts-experimental-min.js"></script>

          <script type="text/javascript">        YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf";</script>

      </head>
      <body>
          <form id="form1" runat="server">
          <!-- required! -->
          <!-- chart container -->
          <div id="chart">
          </div>
          <div id="lblMinute">
          </div>

          <script type="text/javascript">
              /////show graph
             
                  var jsonData = new YAHOO.util.XHRDataSource("Handler.ashx);
                  jsonData.connMethodPost = true;
                  jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
                  jsonData.responseSchema =
                  {
                      resultsList: "Results",
                      fields: ["Time", "Value", "MaxAxis", "MinAxis"]
                  };

                 

                  var seriesDef =
                          [
                              {
                                  displayName: "Value",
                                  yField: "Value",
                                  style:
                                  {
                                    color: 0x2e434d, ////These styles don't apply
                                    connectPoints: true, ////These styles don't apply
                                   
                                  }
                              },
                              { displayName: "MaxAxis", yField: "MaxAxis" },
                              { displayName: "MinAxis", yField: "MinAxis" ,
                                  style:
                                  {
                                      color:0x000000, ////These styles don't apply
                                      lineSize:40 ////These styles don't apply
                                  }
                              }
                          ];
                             
                  //{ displayName: "MaxAxis", yField: "MaxAxis" },
                  //{ displayName: "MinAxis", yField: "MinAxis" }

      //            var yAxis = new YAHOO.widget.NumericAxis();
      //            yAxis.minimum = 0;
      //            yAxis.maximum = 10;

                  //var xAxis = new YAHOO.widget.TimeAxis();
                  //            var xAxis = new YAHOO.widget.TimeAxis();
                  //            xAxis.snapToUnits = true;
                  //            xAxis.majorTimeUnit = "hours";
                  //            xAxis.majorUnit = 1;
                  //            //xAxis.minorTimeUnit = "minutes";
                  //            xAxis.minorTimeUnit = "seconds";
                  //            xAxis.minorUnit = 10;
                  //xAxis.minimum = new Date(Da.getTime() - 60 * 1000);
                  //xAxis.maximum = new Date(maximumDate.getTime() + 60 * 1000);
                      //var xAxis = new YAHOO.widget.NumericAxis();
                      //currencyAxis.minimum = 800;
                      //currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;


                              var mychart = new YAHOO.widget.LineChart("chart", jsonData,
                              {
                                  xField: "Time",
                                 
                                  series: seriesDef,
                                  //polling: 1000,
                                  style:
                                  {
                                      xAxis:
                                      {
                                          showLabels: false, ////These styles don't apply
                                          size: 0, ////These styles don't apply
                                          majorGridLines:
                                          {
                                              color: 0x995566,
                                              size: 1
                                          },
                                          majorTicks:
                                          {
                                              size: 1
                                          }
                                      },
                                  yAxis:
                                      {
                                          showLabels: false, ////These styles don't apply
                                          size: 0,
                                          majorGridLines:
                                          {
                                              size: 0
                                          }

                                      }
                              }
                          });
                  // mychart.set("xAxis", xAxis);

                  //////Custmizing the date axis

                  //var xAxis = new YAHOO.widget.NumericAxis();
                  //xAxis.labelFunction = "formatxAxisLabel";
                  //function formatxAxisLabel(value) {
                  //    var d = new Date(value);
                  //    return  d ;
                  //return YAHOO.util.Number.format(value);
                  //}
                  //these values should be passed to the page to detrmine the required view
                  //i.e:year,month,day....
                  //xAxis.minimum = 1225552361000;
                  //xAxis.maximum = 1225553922137;
                  //mychart.set("xAxis", xAxis);

              }
         </script>


          </form>
      </body>
      </html>

    • Gervais B
      Hi everybody, I use the YUI Calendar since some month into a French and internationalizable application. Currently I configure the calendar for French users by
      Message 2 of 4 , Nov 2, 2008
      • 0 Attachment

        Hi everybody,

         

        I use the YUI Calendar since some month into a French and internationalizable application. Currently I configure the calendar for French users by putting this code in the end of each pages who use the calendar (where “fmt:message" retrieve a string  from a file that store internationalized messages):

             

              // Calendar Internationalization

              var navConfig = {

                strings : {

                    month: "<fmt:message key="labels.choose_month" />",

                    year: "<fmt:message key="labels.enter_year" />",

                    submit: "<fmt:message key="labels.ok" />",

                    cancel: "<fmt:message key="labels.cancel" />",

                    invalidYear: "<fmt:message key="text.enter_valid_year" />"

                },

                monthFormat: YAHOO.widget.Calendar.LONG,

                initialFocus: "year"

              };

              var calDateOfBirth = new YAHOO.widget.CalendarGroup("calDateOfBirth","<c:out value="${calfld}" />_container",

                    {pagedate:"${defaultdateofbirth}", start_weekday:1, navigator:navConfig, pages:2, title:"<fmt:message key="titles.choose_a_date" />", close:true} );

              calDateOfBirth.selectEvent.subscribe(handleDateSelection, calDateOfBirth, true);

               

              // Date labels for French locale

              calDateOfBirth.cfg.setProperty("MONTHS_SHORT",   ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Juil", "Aou", "Sep", "Oct", "Nov", "Dec"]);

              calDateOfBirth.cfg.setProperty("MONTHS_LONG",    ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]);

              calDateOfBirth.cfg.setProperty("WEEKDAYS_1CHAR", ["D", "L", "M", "M", "J", "V", "S"]);

              calDateOfBirth.cfg.setProperty("WEEKDAYS_SHORT", ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"]);

              calDateOfBirth.cfg.setProperty("WEEKDAYS_MEDIUM",["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]);

              calDateOfBirth.cfg.setProperty("WEEKDAYS_LONG",  ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]);

              calDateOfBirth.render();

              YAHOO.util.Event.addListener("<c:out value="${calfld}" />_button", "click", calDateOfBirth.show, calDateOfBirth, true);

         

        But I need to copy and paste these lines everywhere. Is there a way for internaltionalize the YUI Calendar ?

         

        Thanks.

      • tripp.bridges
        Hi, You are using a 2.4 SWF with 2.6 code. YAHOO.widget.Chart.SWFURL = http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf ; If you change it to:
        Message 3 of 4 , Nov 2, 2008
        • 0 Attachment
          Hi,
          You are using a 2.4 SWF with 2.6 code.
          YAHOO.widget.Chart.SWFURL =
          "http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf";

          If you change it to:
          YAHOO.widget.Chart.SWFURL =
          "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";

          The styles will work.

          Thanks,
          Tripp

          --- In ydn-javascript@yahoogroups.com, "eng_mr2000" <eng_mr2000@...>
          wrote:
          >
          > Dear all,
          > I'm using the chart control to draw a line chart. I tried to set some
          > styling attributes but it didn't apply to the chart.
          >
          > for example the color of the series and the size of the marker.
          >
          > Can anyone help me in this issue?
          >
          > Here is the code
          >
          > <%@ Page Language="C#" AutoEventWireup="true"
          > CodeFile="DynamicChart.aspx.cs" Inherits="DynamicChart" %>
          >
          > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          > <html xmlns="http://www.w3.org/1999/xhtml">
          > <head runat="server">
          > <title></title>
          >
          > <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
          >
          > <link rel="stylesheet" type="text/css"
          > href="../../build/fonts/fonts-min.css" />
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-even\
          > t.js"></script>
          >
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"><\
          > /script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js">\
          > </script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js">\
          > </script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/charts/charts-experimental-min\
          > .js"></script>
          >
          > <script type="text/javascript"> YAHOO.widget.Chart.SWFURL =
          >
          "http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf";</script\
          > >
          >
          > </head>
          > <body>
          > <form id="form1" runat="server">
          > <!-- required! -->
          > <!-- chart container -->
          > <div id="chart">
          > </div>
          > <div id="lblMinute">
          > </div>
          >
          > <script type="text/javascript">
          > /////show graph
          >
          > var jsonData = new YAHOO.util.XHRDataSource("Handler.ashx);
          > jsonData.connMethodPost = true;
          > jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > jsonData.responseSchema =
          > {
          > resultsList: "Results",
          > fields: ["Time", "Value", "MaxAxis", "MinAxis"]
          > };
          >
          >
          >
          > var seriesDef =
          > [
          > {
          > displayName: "Value",
          > yField: "Value",
          > style:
          > {
          > color: 0x2e434d, ////These styles don't
          > apply
          > connectPoints: true, ////These styles
          > don't apply
          >
          > }
          > },
          > { displayName: "MaxAxis", yField: "MaxAxis" },
          > { displayName: "MinAxis", yField: "MinAxis" ,
          > style:
          > {
          > color:0x000000, ////These styles don't
          > apply
          > lineSize:40 ////These styles don't
          apply
          > }
          > }
          > ];
          >
          > //{ displayName: "MaxAxis", yField: "MaxAxis" },
          > //{ displayName: "MinAxis", yField: "MinAxis" }
          >
          > // var yAxis = new YAHOO.widget.NumericAxis();
          > // yAxis.minimum = 0;
          > // yAxis.maximum = 10;
          >
          > //var xAxis = new YAHOO.widget.TimeAxis();
          > // var xAxis = new YAHOO.widget.TimeAxis();
          > // xAxis.snapToUnits = true;
          > // xAxis.majorTimeUnit = "hours";
          > // xAxis.majorUnit = 1;
          > // //xAxis.minorTimeUnit = "minutes";
          > // xAxis.minorTimeUnit = "seconds";
          > // xAxis.minorUnit = 10;
          > //xAxis.minimum = new Date(Da.getTime() - 60 * 1000);
          > //xAxis.maximum = new Date(maximumDate.getTime() + 60 *
          > 1000);
          > //var xAxis = new YAHOO.widget.NumericAxis();
          > //currencyAxis.minimum = 800;
          > //currencyAxis.labelFunction =
          > YAHOO.example.formatCurrencyAxisLabel;
          >
          >
          > var mychart = new
          > YAHOO.widget.LineChart("chart", jsonData,
          > {
          > xField: "Time",
          >
          > series: seriesDef,
          > //polling: 1000,
          > style:
          > {
          > xAxis:
          > {
          > showLabels: false, ////These styles
          > don't apply
          > size: 0, ////These styles don't
          > apply
          > majorGridLines:
          > {
          > color: 0x995566,
          > size: 1
          > },
          > majorTicks:
          > {
          > size: 1
          > }
          > },
          > yAxis:
          > {
          > showLabels: false, ////These styles
          > don't apply
          > size: 0,
          > majorGridLines:
          > {
          > size: 0
          > }
          >
          > }
          > }
          > });
          > // mychart.set("xAxis", xAxis);
          >
          > //////Custmizing the date axis
          >
          > //var xAxis = new YAHOO.widget.NumericAxis();
          > //xAxis.labelFunction = "formatxAxisLabel";
          > //function formatxAxisLabel(value) {
          > // var d = new Date(value);
          > // return d ;
          > //return YAHOO.util.Number.format(value);
          > //}
          > //these values should be passed to the page to detrmine the
          > required view
          > //i.e:year,month,day....
          > //xAxis.minimum = 1225552361000;
          > //xAxis.maximum = 1225553922137;
          > //mychart.set("xAxis", xAxis);
          >
          > }
          > </script>
          >
          >
          > </form>
          > </body>
          > </html>
          >
        • Frank Dietrich
          I use the YUI Calendar since some month into a French and internationalizable application. Currently I configure the calendar for French users by putting this
          Message 4 of 4 , Nov 3, 2008
          • 0 Attachment

            I use the YUI Calendar since some month into a French and internationalizable application. Currently I configure the calendar for French users by putting this code in the end of each pages who use the calendar (where �fmt:message" retrieve a string  from a file that store internationalized messages):

             

            ....

             

            But I need to copy and paste these lines everywhere. Is there a way for internaltionalize the YUI Calendar ?

             

             
            You might either subclass the calendar or, like I did, create a function that You call directly after instantiating the calendar.
             
            This is what I do for German internationalization:
             
                YAHOO.ddTech.ZLB.app.calendarTimesForm =
                    new YAHOO.widget.Calendar('calendarTimesForm', 'calendar_TimesForm');
               
                localizeCalendar(YAHOO.ddTech.ZLB.app.calendarTimesForm);

                YAHOO.ddTech.ZLB.app.calendarTimesForm.selectEvent.subscribe(
                     function(type, args, obj) {.....});
             
                ....
             
                

                // Initialisieren der Calender f�r Deutschland
                var localizeCalendar =  function(toCal){
                  YAHOO.log("localizing Calendar", "info", "Calendar.js");
             
                  // Correct formats for Germany: dd.mm.yyyy, dd.mm, mm.yyyy
                  toCal.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
                  toCal.cfg.setProperty("START_WEEKDAY", 1);
             
                  toCal.cfg.setProperty("MDY_DAY_POSITION", 1);
                  toCal.cfg.setProperty("MDY_MONTH_POSITION", 2);
                  toCal.cfg.setProperty("MDY_YEAR_POSITION", 3);
             
                  toCal.cfg.setProperty("MD_DAY_POSITION", 1);
                  toCal.cfg.setProperty("MD_MONTH_POSITION", 2);
             
                  // Date labels for German locale
                  toCal.cfg.setProperty("MONTHS_SHORT", 
                   ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun",
                    "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]);
                  toCal.cfg.setProperty("MONTHS_LONG", 
                   ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni",
                    "Juli", "August", "September", "Oktober", "November", "Dezember"]);
                  toCal.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "D", "M", "D", "F", "S"]);
                  toCal.cfg.setProperty("WEEKDAYS_SHORT", ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]);
                  toCal.cfg.setProperty("WEEKDAYS_MEDIUM",
                   ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"]);
                  toCal.cfg.setProperty("WEEKDAYS_LONG", 
                   ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]);
             
                };
             
             
            Hope that helps
             
            Frank
          Your message has been successfully submitted and would be delivered to recipients shortly.