getting values for dual axis chart

[emilyglue]

version: v11.0p_2017-06-24/EVAL Deployment
browser: firefox 24.0

Hi, I want to create hover components for my dual axis chart and was wondering if there is a way to show the values of the second y axis. Currently I can only show the the values for the first.

Basically from the showcase I tried to create a dual axis chart,

            
final TestFacetChart chart = new TestFacetChart(chartType);

chart.setLabelCollapseMode(LabelCollapseMode.SAMPLE);

Facet metricFacet = new Facet();

metricFacet.setValues(new FacetValue("y1axis", "axis 1"),  
                    new FacetValue("y2axis", "axis 2"));  

metricFacet.setInlinedValues(true);  

metricFacet.setId("metric");  

chart.setFacets(new Facet("date"), new Facet("name"), metricFacet);

chart.setExtraAxisMetrics("y2axis");

MetricSettings metricSettings = new MetricSettings();

metricSettings.setChartType(chartType);

metricSettings.setMultiFacet(false);

metricSettings.setShowDataPoints(true);

chart.setExtraAxisSettings(metricSettings);

chart.setDataColors(colors);

chart.setData(data);

I know that getNearestDrawnValue() only works for the first metric, but I also tried getNearestDrawnValue(Integer x, Integer y, String metric) with "y2axis" and "metric" as the metric, but neither worked. Is there another way to access the values for the second set of data thats being graphed with the second y-axis?

I tried to look for a solution in the forums but did not come across any. If there was a solution that I missed, a reference to it would be great.

Thanks in advance.

[Isomorphic]

We verified that the getNearestDrawnValue() API is behaving as expected in the SmartGWT Dual Axis Charting sample. If you want us to investigate your issue, you'll need to provide standalone code or tell us how to modify one of the samples, as the Debugging Help Topic for SmartGWT describes. (See specifically the subtopic "Preparing a standalone test case" on that page.)

The code you provided isn't runnable, and includes references to undefined variables.

[emilyglue]

Hi, sorry the code is rather complicated, and I wasn't really thinking about needing to provide one. However, I will just be using the SmartGWT Dual Axis Charting sample code from now on to make it easier.

I used getNearestDrawnValue(chart.getOffsetX(), chart.getOffsetY(), "events") to get the second axis values, but now I'm wondering how can I make it so that my hover component knows when to show the "percent" metric and when to show the "events" metric based on which data its closer to?

So if I use the dual axis chart in the show case example, I added a hover component, but I'm just printing out the values instead in this example.

 @Override  
        [B]public[/B] [B]void[/B] onModuleLoad() {  
          FacetChart chart = [B]new[/B] FacetChart();  
          chart.setWidth(508);  
          chart.setHeight(400);  
          chart.setChartType(ChartType.COLUMN);  
          chart.setStacked([B]true[/B]);  
          chart.setValueTitle("Percent");  
          chart.setBorder("1px solid black");  
          chart.setShowTitle([B]false[/B]);  
          chart.setShowChartRect([B]true[/B]);  
    
          Facet areaFacet = [B]new[/B] Facet();  
          areaFacet.setValues([B]new[/B] FacetValue("1", "North America"));  
          areaFacet.setId("area");  
          Facet metricFacet = [B]new[/B] Facet();  
          metricFacet.setValues([B]new[/B] FacetValue("percent", "Percent"),  
                                [B]new[/B] FacetValue("events", "Events"));  
          metricFacet.setInlinedValues([B]true[/B]);  
          metricFacet.setId("metric");  
    
          chart.setFacets([B]new[/B] Facet("date"), areaFacet, metricFacet);  
          chart.setExtraAxisMetrics("events");  
          MetricSettings metricSettings = [B]new[/B] MetricSettings();  
          metricSettings.setChartType(ChartType.LINE);  
          metricSettings.setMultiFacet([B]true[/B]);  
          metricSettings.setShowDataPoints([B]true[/B]);  
          metricSettings.setValueTitle("Events");  
          chart.setExtraAxisSettings(metricSettings);  
    
          chart.setData(MultiAxisChartData.getData()); 
   
          ​createHover(chart);
          HStack layout = [B]new[/B] HStack();  
          layout.addMember(chart);  
          layout.draw();  
      }

The code for the hover is:

    public void createHover(final FacetChart chart)
    {         
        chart.addMouseOverHandler(new MouseOverHandler() 
        { 
            @Override
            public void onMouseOver(MouseOverEvent event) 
            {
                final DrawnValue nearestDV = chart.getNearestDrawnValue();  
                final DrawnValue nearestDV2 = chart.getNearestDrawnValue(chart.getOffsetX(), chart.getOffsetY(), "events");
                if (nearestDV == null) return;
                System.out.println(nearestDV.getValueAsDouble());
            }
        });
    }

As you can see, I have nearestDV, which uses the first axis metric (percent), and nearestDV2, which uses the second axis metric (events). Individually, they work fine, but I was wondering if there was a way to make it so that it would know whether to print the first metric or the second metric by itself. Right now, in the example above, if I move my mouse around, it only has access to the percent values, so there's no way to show the events values unless I specifically change the print statement to System.out.println(nearestDV2.getValueAsDouble()). I hope this is more clear. Thank you.

[Isomorphic]

Seems like you might want to show both values in your hover - then there's no issue. However, if you really want to determine which metric is closest to the current event location (getOffsetX() and getOffsetY()), you could just compute the distance of that location to the x and y coordinates of each DrawnValue. Note, furthermore, that if you didn't need the event location for this other purpose, it would probably make sense to simplify your code by just passing null for the x and y arguments of getNearestDrawnValue(), since the Framework will then automatically use the last event coordinates

[emilyglue]

Hi,

Actually I only wanted to show one value at a time, but calculating the distance worked. I got confused as to how/which x and y coordinates were being obtained, but I understand now.

Thank you!