Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Styling the font in a FacetChart

    Isomorphic,

    I am using Smartgwt ee 2.5. I am using BlackOps skin for my project. The problem is, when I create FacetCharts and display them on some window, the FacetValues on the x-axis and y-axis are almost not visible.
    So, using styling how do I do that?

    I am using both FacetCharts directly generated from a CubeGrid and also the FacetCharts which I created using FacetChart class and set the data explicitly. In both the cases I require the styling to be done.

    I did the following, but was not able to see any difference:

    styling.css
    .chartFont {
    font-family: "palatino linotype";
    font-size: 10px;
    font-color: white;
    border: 1px solid white;
    }

    index.jsp
    <link type="text/css" rel="stylesheet" href="styling.css"> ---> added this in the <head> tag

    MyProgram.java
    FacetChart chart1 = new FacetChart();
    chart1.setStyleName("chartFont");

    Can you suggest a solution?
    Tags: None
    #2
    in settings file. u can see x & y tags.. in tat u can give color but cant increase the height & bold also

    Comment

      #3
      Thanks a lot!

      Comment

        #4
        Hello

        I have the same problem : using BlackOps and FacetChart, but in smartgwt 3.0.

        I try to modify the array "legendLabelProperties" into ISCChart (used by drawLabel) but with no effect. Same for styling, like in the first post.

        I have no idea where/what can be the "settings file". Application.gwt.xml?
        I try this:
        Code:
        FacetChart.setProperty("x", "red"); // -> error
Facet.setAttribute("x", "red"); // -> no effect
FacetChart.setAttribute("color", "red"); // -> error
Facet.setAttribute("color", "red"); // -> no effect
        But it doesn't work.

        Can you say what "setting file" is needed to update?
        Last edited by merill; 3 Jan 2012, 02:34.

        Comment

          #5
          Hi, we also have to do that but can't find the way to do it.

          Is it possible to give more explanations about how to change the colors of labels in a SmartGWT Chart ?

          Thanks,

          Baptiste

          Comment

            #6
            Please, please, please, nobobody can explain a little more how to change those label colors ?

            Thanks,

            Baptiste

            Comment

              #7
              I find the solution in the javascript file into smartgwtee-3.X.jar\com\smartclientee\public\sc\system\development\ISC_Charts.js

              To change the band color, modify this fillcolor property:
              Code:
              isc.A.backgroundBandProperties = {
	lineOpacity : 0,
	fillColor : "#F7F7F7"
};
              To change the x and y labels color, modify this lineColor property:
              Code:
              isc.A.dataLabelProperties = {
	fontFamily : "Tahoma",
	fontSize : 10,
	fontWeight : "normal",
	fontStyle : "button",
	lineColor : "#44FFFF"
};
              To change the legend labels color, modify this lineColor property:
              Code:
              isc.A.legendLabelProperties = {
	fontFamily : "Arial",
	fontSize : 10,
	fontWeight : "normal",
	fontStyle : "button",
	lineColor : "#FFFF00"
};
              other isc.A properties are used to other things, try it if you need it.

              Merill

              Comment

                #8
                Thanks collegue ;-)

                We've passed a lot of time for just one hidden property in a Javascript file :-(.

                For this kind of problem a response from the Smart GWT team would be not very time consuming for it but very helpful for us...

                No matter, thanks again.

                Baptiste

                Comment

                  #9
                  But how can we change it using the setProperty method in SmartGwt?

                  Comment

                    #10
                    3.1d builds now have official SmartGWT APIs for affecting the various labels and other non-data elements of FacetChart.

                    Just a note about Merrill's hack - nothing like that is necessary, you just need to use the skinning APIs of SmartClient from JSNI, for example isc.FacetChart.changeDefaults().

                    Comment

                      #11
                      Originally posted by akhader View Post
                      But how can we change it using the setProperty method in SmartGwt?
                      bumped into this while trying to set my x axis labels to invisible, what I did was

                      DrawLabel x = new DrawLabel();
                      x.setFontSize(1);
                      x.setLineColor(userChart.getBackgroundColor());
                      chart.setDataLabelProperties(x);

                      hope it can be useful in the future

                      Comment

                        #12
                        SmartClient Version: v9.1p_2014-08-29/Pro Deployment (built 2014-08-29)

                        Im having a problem when I change the fontfamily of the dataLabelProperties, and axisLabelProperties on my FacetCharts.

                        I am changing the fontfamily like so:
                        Code:
                        DrawLabel dataLabelProperties = this.getDataLabelProperties();
dataLabelProperties.setFontFamily("'Lato',Arial,sans-serif");
chart.setDataLabelProperties(dataLabelProperties);
                        but when I do this, I see some wierd behavior (See attached pictures)

                        The data labels become offset relative to their columns,
                        and the valueAxisLabel also becomes offset and a large gap shows up between the label and the axis.

                        Also when datalabels are vertical, they intersect with the dataAxisLabel.

                        I guessing that the chart calculates the size of the new font wrong.

                        Is there a way I can fix this?
                        Attached Files

                        Comment

                          #13
                          Thanks for pointing this out. Our auto-sizing logic was foiled by your use a single quote (') so auto-sizing was still being performed with the default font. This is fixed for tomorrow's builds of 9.0 and up.

                          Comment

                            #14
                            Great, thank you.

                            Comment

                            Previous template Next
                            Working...
                            X