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

Re: Chart styling

Expand Messages
  • 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 1 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 2 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.