Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Help Getting Started With Dual Axis Chart

    I want to create a chart that has 3 curves set up like this:

    X Axis: Hour of Day
    Left Y Axis : Temperature
    Right Y Axis : Dollars (single axis shared for Joe and Jane values)

    Temperature would be a bar chart and Dollars would be a line chart.


    My data would look like this:
    Code:
    Hour            Temperature               $Joe          $Jane
    1                      60               2.1             1.2
    2                      80                3.1             2.3
    3                     100               2.2             3.4
    4                     120               4.0             6.2


    I see the example at :
    http://www.smartclient.com/smartgwtee/showcase/#multiSeriesChartMA

    But I'm not quite sure how to leverage that example for my needs.

    I think I need facets called Dollars, Hour, and Temperature in order to set up the axis. But it also seems like every record needs to have values in every field. For example when I tried to set up date that looked like this:

    ID for Temp Curve = 1.
    ID for Joe = 2;
    ID for Jane = 3;


    ID=1, Hour=1, Temperature=60
    ID=2, Hour=1, Dollars=2.1
    ID=3, Hour=1, Dollars=1.2

    ID=1, Hour=2, Temperature=80
    ID=2, Hour=2, Dollars=3.1
    ID=3, Hour=2, Dollars=2.3

    etc.


    It did not seem to work. Am I on the right track? If yes then I can set up a more complete example. If not can you please point me in the right direction?


    Here are the test changes I made to the demo:


    Code:
    		public MultiAxisChartData(String area, String date, float percent) {
    			setAttribute("area", area);
    			setAttribute("date", date);
    			setAttribute("percent", percent);
    		}
    
    		public MultiAxisChartData(String area, String date, int events) {
    			setAttribute("area", area);
    			setAttribute("date", date);
    			setAttribute("events", events);
    		}
    
    
    
    .....
    
    
    
    public static MultiAxisChartData[] getData() {
            return new MultiAxisChartData[] {
                new MultiAxisChartData("1", "13 Sep 12", 0.55f),
                new MultiAxisChartData("2", "13 Sep 12",  3210),
                new MultiAxisChartData("3", "13 Sep 12",  2071),
    
                new MultiAxisChartData("1", "14 Sep 12", 0.49f),
                new MultiAxisChartData("2", "14 Sep 12",  3771),
                new MultiAxisChartData("3", "14 Sep 12", 2166),
      		};
        }
    When I make the changes above - North America only has Percent Values, Europe and Asia-Pacific only have Event values, the event values plot but the percent ones do not. I also get 6 legend items even though there should really only be 3 since there are only 3 distinct curves.

    Any direction you can provide is greatly appreciated.

    #2
    It looks like you want to plot a multi-facet (aka multi-series) dataset for one axis (Temperature) and a single-facet (aka single-series) dataset for the other (Dollars). You can do this, but you need to make a call like so:

    metricSettings.setMultiFacet(false);

    .. to tell us that a given metric (Dollars) will only have one facet.

    Comment


      #3
      Thank you,


      [ EDIT ] I attached a jpg of the chart [ /EDIT ]
      I made a little progress:

      Here is my data:

      Code:
      
          public static class MultiAxisChartData extends Record {
              public MultiAxisChartData(String area, int date, float temp, int dollars) {
                  setAttribute("area", area);
                  setAttribute("hour", date);
                  setAttribute("temperature", temp);
                  setAttribute("dollars", dollars);
              }
      
      		public MultiAxisChartData(String area, int date, float temp) {
      			setAttribute("area", area);
      			setAttribute("hour", date);
      			setAttribute("temperature", temp);
      		}
      
      		public MultiAxisChartData(String area, int date, int dollars) {
      			setAttribute("area", area);
      			setAttribute("hour", date);
      			setAttribute("dollars", dollars);
      		}
      
      		public static MultiAxisChartData[] getData() {
      			return new MultiAxisChartData[] {
      	
      				new MultiAxisChartData("1", 1, 0.55f),
      				new MultiAxisChartData("2", 1,   50),
      				new MultiAxisChartData("3", 1,   60),
      	
      				new MultiAxisChartData("1", 2, 0.49f),
      				new MultiAxisChartData("2", 2,   90),
      				new MultiAxisChartData("3", 2, 20),
      	
      	
      				new MultiAxisChartData("1", 3, 0.22f),
      				new MultiAxisChartData("2", 3,   20),
      				new MultiAxisChartData("3", 3,   50),
      	
      				new MultiAxisChartData("1", 4, 0.88f),
      				new MultiAxisChartData("2", 4,   80),
      				new MultiAxisChartData("3", 4, 99),
      			};
      		}
      
          }



      And the chart config:
      Code:
      		chart.setWidth(508);
      		chart.setHeight(400);
      		chart.setChartType(ChartType.COLUMN);
      		chart.setStacked(false);
      		chart.setValueTitle("Temperature");
      		chart.setBorder("1px solid black");
      		chart.setShowTitle(false);
      		chart.setShowChartRect(true);
      		chart.setDataMargin(12);
      		chart.setBarMargin(27);
      		chart.setMinBarThickness(25);
      		chart.setDataColors(new String[]{"#fffd53", "#f8c14c", "#60ffff", "#97E997", "#F36050", "#7F62B4"});
      
      		Facet areaFacet = new Facet();
      		areaFacet.setValues(new FacetValue("1", "Temperature"),
      							new FacetValue("2", "Joe"),
      							new FacetValue("3", "Jane"));
      		areaFacet.setId("area");
      
      		Facet metricFacet = new Facet();
      		metricFacet.setValues(new FacetValue("temperature", "Temperature"),
      							  new FacetValue("dollars", "Dollars"));
      		metricFacet.setInlinedValues(true);
      		metricFacet.setId("metric");
      
      		chart.setFacets(new Facet("hour"), areaFacet, metricFacet);
      
      		chart.setExtraAxisMetrics("dollars");
      		MetricSettings metricSettings = new MetricSettings();
      		metricSettings.setChartType(ChartType.LINE);
      //                metricSettings.setMultiFacet(true);
      		metricSettings.setShowDataPoints(true);
      		metricSettings.setValueTitle("Dollars");
      
      
      	
      		chart.setExtraAxisSettings(metricSettings);

      I get the 3 curves I want. One bar and 2 lines, but I would like to address the following (they may be related):

      1) The legend produces 6 items. I really only want 3
      2) the chart spaces out the data points as if it will draw 3 bars for each x axis point, but there is only one.
      3) The legends are Temperature(Temperature), Temperature(Joe), Temperature(Jane), Dollars(Temperature), Dollars(Joe), Dollars(Jane) but I just want Temperature, Joe, Jane

      Thank your for your help with this.
      Attached Files
      Last edited by mmills; 5 Jun 2013, 11:00.

      Comment


        #4
        I was able to to fix up the spacing by converting the bar to stacked. This only works in the case where there is only one left Y axis curve though since bogus zero vales are used.


        There are still 6 legend items vs the 3 that should be there.


        Is this as good as it's going to get?


        Here's the current code and an image of the chart is attached:

        Code:
        
        
            public static class MultiAxisChartData extends Record {
                public MultiAxisChartData(String area, int date, float temp, int dollars) {
                    setAttribute("area", area);
                    setAttribute("hour", date);
                    setAttribute("temperature", temp);
                    setAttribute("dollars", dollars);
                }
        
        		public MultiAxisChartData(String area, int date, float temp) {
        			setAttribute("area", area);
        			setAttribute("hour", date);
        			setAttribute("temperature", temp);
        		}
        
        		public MultiAxisChartData(String area, int date, int dollars) {
        			setAttribute("area", area);
        			setAttribute("hour", date);
        			setAttribute("dollars", dollars);
        		}
        
        		public static MultiAxisChartData[] getData() {
        			return new MultiAxisChartData[] {
        
        				new MultiAxisChartData("1", 1, 0.55f),     // no dollars for this data
        				new MultiAxisChartData("2", 1, 0.0f,  50), // bogus temp for stacked bar hack
        				new MultiAxisChartData("3", 1, 0.0f,  60), // bogus temp for stacked bar hack
        
        				new MultiAxisChartData("1", 2, 0.49f),     // no dollars for this data
        				new MultiAxisChartData("2", 2, 0.0f,  90), // bogus temp for stacked bar hack
        				new MultiAxisChartData("3", 2, 0.0f,20),   // bogus temp for stacked bar hack
        
        
        				new MultiAxisChartData("1", 3, 0.22f),     // no dollars for this data
        				new MultiAxisChartData("2", 3,  0.0f, 20), // bogus temp for stacked bar hack
        				new MultiAxisChartData("3", 3,   0.0f,50), // bogus temp for stacked bar hack
        
        				new MultiAxisChartData("1", 4, 0.88f),     // no dollars for this data
        				new MultiAxisChartData("2", 4, 0.0f,  80), // bogus temp for stacked bar hack
        				new MultiAxisChartData("3", 4, 0.0f,99),   // bogus temp for stacked bar hack
        			};
        		}
        
            }
        
        
        
        
        	private void configTestChart() {
        		FacetChart chart = this;
        
        		chart.setWidth(508);
        		chart.setHeight(400);
        		chart.setChartType(ChartType.COLUMN);
        		chart.setStacked(true);
        		chart.setValueTitle("Temperature");
        		chart.setBorder("1px solid black");
        		chart.setShowTitle(false);
        		chart.setShowChartRect(true);
        		chart.setDataMargin(12);
        		chart.setBarMargin(27);
        		chart.setMinBarThickness(25);
        		chart.setDataColors(new String[]{"#fffd53", "#f8c14c", "#60ffff", "#97E997", "#F36050", "#7F62B4"});
        
        
        		// This maps a VALUE in the data with key area to different string for display. For example, data with area=1
        		// will be displayed as Temperature. This mapping may also define which curves are used.
        		Facet areaFacet = new Facet();
        		areaFacet.setValues(new FacetValue("1", "Temperature"),
        							new FacetValue("2", "Joe"),
        							new FacetValue("3", "Jane"));
        		areaFacet.setId("area");
        
        
        		// It appears as if this used to set up the axis. Each facetValue is a map. They key is a key value found in the
        		// data and the value appears to be used to generate the  data label to be displayed on the chart
        		Facet metricFacet = new Facet();
        		metricFacet.setValues(new FacetValue("temperature", "Temperature"),
        							  new FacetValue("dollars", "Dollars"));
        		metricFacet.setInlinedValues(true);
        		metricFacet.setId("metric");
        
        		// I guess this is here to define the X-Axis?
        		Facet hourFacet = new Facet("hour");
        
        
        		// I assume order matters here, XAxis, Curves to plot, Yaxis List?
        		chart.setFacets(hourFacet, areaFacet, metricFacet);
        
        		// is this mapping a data key (dollars) or facet key from the metric facet?
        		// in any case this seems to be used for  setting up the second axis
        		chart.setExtraAxisMetrics("dollars");
        
        		// configure 2nd Y axis
        		MetricSettings metricSettings = new MetricSettings();
        		metricSettings.setChartType(ChartType.LINE);
                metricSettings.setMultiFacet(true); // seems to make no difference if set or not
        		metricSettings.setShowDataPoints(true);
        		metricSettings.setValueTitle("Dollars"); // Axis label, we also set this up in metricFacet - this one must be YLable
        
        
        
        
        		chart.setExtraAxisSettings(metricSettings);
        
        
        	}
        Attached Files
        Last edited by mmills; 6 Jun 2013, 05:13.

        Comment


          #5
          At the moment, yes - there isn't an automatic behavior where the legend would be hidden if there's no data at all for a given line or bar data series.

          Comment

          Working...
          X