Announcement

**jlhoward1** · 3 Oct 2013, 16:19

Notes to others

Smartgwt charts have a few gotta knows. This note is for new users.
- I charted with 4.0 pro. You have to pay for pro... smartgwt LGPL won't chart.
- This trick for pies won't work with bar charts... It will seem to, but it won't work reliably.
- Use Hover. That can make these pop up.

You can put records in the chart records instread of the filter ids.

I have not tried with complex charts or more than one facet... This is all I need but it most likely won't work in complex situations. I need the answers on radius and center from isomorphic to make this work.

Opinion... Interactive Charts on a paid subscription are a must. It's common to expect drill down on the shapes for pies and bar charts. This is a bodge i needed not a general purpose solution.

That being said... if chart centerpoints return correctly. this is useful for single charts.

**Isomorphic** · 3 Oct 2013, 17:37

With a lack of any data, charts don't draw, so there's no center or radius. Try adding code to any Charting sample to get the radius or rect - of that doesn't seem to be working, show the code you added to the sample.

See also the Charting samples for many examples of interaction.

**jlhoward1** · 4 Oct 2013, 01:02

I have data hard coded and the handler

Originally posted by Isomorphic View Post

With a lack of any data, charts don't draw, so there's no center or radius. Try adding code to any Charting sample to get the radius or rect - of that doesn't seem to be working, show the code you added to the sample.

See also the Charting samples for many examples of interaction.

I have data in the chart. See the picture. This is a sample drawn from them. I tried the examples. Nothing in the examples is even close. There are no examples I found using any type of chartdrawn handlers.

Handler added.

The problem is the chart radius and centerpoint aren't returned.

Chart radius doesn't return in my products code consistently. Here it works. Center never works. (I have tried to get the point or getx() and gety().)

Code:

//your package here
/* 
 * Smart GWT (GWT for SmartClient) 
 * Copyright 2008 and beyond, Isomorphic Software, Inc. 
 * 
 * Smart GWT is free software; you can redistribute it and/or modify it 
 * under the terms of the GNU Lesser General Public License version 3 
 * as published by the Free Software Foundation.  Smart GWT is also 
 * available under typical commercial license terms - see 
 * http://smartclient.com/license 
 * 
 * This software is distributed in the hope that it will be useful, 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 
 * Lesser General Public License for more details. 
 */

import java.util.HashMap;

import gov.dtra.gkmc.shared.SimpleData;













import com.smartgwt.client.data.AdvancedCriteria;
//import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DSCallback;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DSResponse;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
//import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.RecordList;
import com.smartgwt.client.widgets.chart.ChartDrawnEvent;
import com.smartgwt.client.widgets.chart.ChartDrawnHandler;
import com.smartgwt.client.widgets.chart.ChartPointClickEvent;  
import com.smartgwt.client.widgets.chart.ChartPointClickHandler;  
import com.smartgwt.client.widgets.chart.DrawnValue;
//import com.smartgwt.client.data.ResultSet;
//import com.smartgwt.client.data.DataSource.*;
//import com.smartgwt.client.data.RestDataSource;
//import com.smartgwt.client.data.XJSONDataSource;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.rpc.RPCManager;
import com.smartgwt.client.types.DSDataFormat;
import com.smartgwt.client.types.DSProtocol;
import com.smartgwt.client.widgets.chart.FacetChart;  
import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.widgets.drawing.DrawSector;
import com.smartgwt.client.widgets.drawing.Point;
//import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.types.ChartType;
//import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.TreeModelType;
//import com.smartgwt.client.util.JSOHelper;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Hover;
import com.smartgwt.client.widgets.Label;
//import com.smartgwt.client.widgets.drawing.ColorStop;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ButtonItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
//import com.smartgwt.client.widgets.Window;
//import com.smartgwt.client.widgets.grid.ListGrid;

import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
import com.smartgwt.client.widgets.form.fields.events.ClickHandler;
//import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.smartgwt.client.widgets.tile.TileGrid;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeGridField;
import com.smartgwt.client.widgets.tree.TreeNode;
import com.smartgwt.client.widgets.tree.events.LeafClickEvent;
import com.smartgwt.client.widgets.tree.events.LeafClickHandler;
import com.google.gwt.core.client.EntryPoint;
//import com.google.gwt.core.client.JavaScriptObject;
//import com.google.gwt.core.client.JsArrayString;
//import com.google.gwt.json.client.JSONObject;
import com.google.gwt.user.client.Window;

public class JsonXPathSample implements EntryPoint {
	
    @Override  
    public void onModuleLoad() {  
       
        
      SimpleData ds;
	  final FacetChart chart = new FacetChart();  
      chart.setData(SimpleData.getData());  
      chart.setFacets(new Facet("Label", "Label"));  
      chart.setValueProperty("count");  
      chart.setChartType(ChartType.PIE);  
      chart.setShowHover(true);
   
      chart.setTitle("Sample");  

  
      com.smartgwt.client.widgets.events.ClickHandler charthandler = new com.smartgwt.client.widgets.events.ClickHandler()
		{
	   		@Override
	   		public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
	   			// TODO Auto-generated method stub
	
	   			Window.alert("msg");
	   
	   	//		float distance = Math.sqrt((chartcenterpoint.getX()-event.getX())^2+(chartcenterpoint.getY()-event.getY())^2);
	   		
	   		// Window.alert("distance"+distance+" and "+chart.getChartRadiusAsDouble());
	   		    //in the pie
	   			//	if  (distance<chart.getChartRadius()) {
	   		Window.alert("Choice = - x= "+ chart.getNearestDrawnValue().getAttribute("x")+ " y = " + chart.getNearestDrawnValue().getAttribute("y")+ " "+ chart.getNearestDrawnValue().getAttributeAsRecord("record").getAttribute("Label"));
	   			/*event.
	   			AdvancedCriteria adCriteria = new AdvancedCriteria("_id",
	   					OperatorId.IN_SET, 
	   					chart.getNearestDrawnValue().getAttributeAsRecord("record")
	   							.getAttributeAsStringArray("FilterIds")); */
	   		int len = chart.getNearestDrawnValue().getAttributeAsRecord("record").getAttributeAsStringArray("FilterIds").length;
	   		for (int i = 0; i < len; i++) {
	   				Window.alert("Choice = " + chart.getNearestDrawnValue().getAttributeAsRecord("record").getAttributeAsStringArray("FilterIds")[i]);
	   		}

	   			/*grid.setData(griddata.findAll(adCriteria));*/
	   		//	grid.redraw();
	   			Window.alert("We finished and filtered the grid");
	   			//} //outside the pie
	   		}
	   		
		};
		final float chartradius;
      VLayout layout = new VLayout(15);  
      layout.setWidth(450);
      layout.setHeight(450);
      layout.addMember(chart);  
      chart.addClickHandler(charthandler);
	 	chart.addChartDrawnHandler(new ChartDrawnHandler() {
			
			@Override
			public void onChartDrawn(ChartDrawnEvent event) {
				
				// TODO Auto-generated method stub
				Window.alert("hello drawn");
				float chartradius;
				Point q = null;
				chartradius = chart.getChartRadius();  //shouldn't this return an array of radii??
			    q = chart.getChartCenter();  // shouldn't this return an array of points??
				// or an iterator for the charts ??
			    Window.alert("hasn't died");
			
				Window.alert(" radius display"+Double.toString(chartradius) );
				if (q==null) {Window.alert("null q");};
				int chartcentertempx=q.getX();
			    int chartcentertempy=q.getY();
			    
			//    chartcenterpoint = new Point(chartcentertempx,chartcentertempy);
			  //  chartcenterpoint = q;
			//    chartcentery = chartcentertempy;
			   Window.alert(" doesn't display the point data "+chartcentertempx+ ":"+chartcentertempy);
			}
		});
      chart.setWidth100();
      chart.setHeight100();
      layout.draw();  
	  
	
      }
}

**Isomorphic** · 4 Oct 2013, 09:19

It looks like you've got a chart with multiple pies shown. The signature of getChartRadius/Center obviously means it cannot return an Array.

We're not sure why you need these values, but getNearestDrawnValue() is how you would generally retrieve the dimensions of the Pie that the mouse is over, if you are in the middle of handling an event such as click or mouseMove.

**jlhoward1** · 5 Oct 2013, 11:31

Originally posted by Isomorphic View Post

It looks like you've got a chart with multiple pies shown. The signature of getChartRadius/Center obviously means it cannot return an Array.

We're not sure why you need these values, but getNearestDrawnValue() is how you would generally retrieve the dimensions of the Pie that the mouse is over, if you are in the middle of handling an event such as click or mouseMove.

I appear to have only one pie. I have one facet (but originally had no facets). I am not sure I specified multiple pies in any way. My purpose is ignore clicks outside the pie (therefore I need the center and radius to perform a distance check). Within the chart getDrawnValue is fine.

Since I have a chart object, how do I get the centers when multiple pies are drawn in a chart. Not that I need that now.

I would to expect to get these chart center values reliably only in the Chart Drawn Handler. Right now I think the sample shows a bug.

Questions are :
1) How do I get these values for a single pie? Do I have to extend FacetChart?
2) Of less importance is: how do I iterate through the pies to get the "subcharts" or whatever to get radii? How do I ask the chart how many pies I have?

SmartClient Version: v9.0p_2013-09-30/Pro Deployment (built 2013-09-30) IE, 8, IE10, Firefox 23 and Chrome 29

Attached Files

**Isomorphic** · 5 Oct 2013, 15:16

If you're having trouble with getChartRadius() with a single pie chart, post code that demonstrates this. As far as we can tell, you haven't, and the API is working fine if code is added to samples.

There is not currently a direct way to iterate through the centers and radii of a multiple pie chart, but again, getNearestDrawnValue allows for interactivity to be added to multiple pies if that's what you're trying to do (you keep not clarifying this..).

The number of pies is the number of values in the facet used to label each pie.

**jlhoward1** · 6 Oct 2013, 17:17

Originally posted by Isomorphic View Post

If you're having trouble with getChartRadius() with a single pie chart, post code that demonstrates this. As far as we can tell, you haven't, and the API is working fine if code is added to samples.

There is not currently a direct way to iterate through the centers and radii of a multiple pie chart, but again, getNearestDrawnValue allows for interactivity to be added to multiple pies if that's what you're trying to do (you keep not clarifying this..).

The number of pies is the number of values in the facet used to label each pie.

In the last posted code... The line
Window.alert(" doesn't display the point data "+chartcentertempx+ ":"+chartcentertempy);
}
will not execute.

It is drawn from the samples.

As stated before, I want click events to only act when fired within the pie sections.

In general I consider it "expected behavior" in a UI that clicks in a chart only act when the object is clicked, not when the nearest object isn't clicked on. I may have to filter out events clicked outside the pie area (distance from the center), but I'd need a reliable center and radius. Am I correct in that you said that radius worked, but not center?

>> Speculatively ... Even better would be to return the drawn chart object's dimensions and placement from nearest drawn value. The location and dimensions of a chart's rectangle of a bar or the dimensions and placement of a pie/doughnut section, etc. (Even booleans isInChart(); isInLegend(); would be great.)

BTW: I did try iterations though the (Canvas)chart for drawn items (Sector) children, but no luck. I expected that to work.

<< Do not let this speculation distract from the post's question.

You haven't responded to the core issue, chart.getChartCenter().getX() doesn't appear to work. q = chart.getChartCenter().getX();

The same analogy for interaction would be true for a button, I have to click on the "Submit Reply" button to respond to this posting, not near the button.

get nearest drawn values does not appear to have a way to move forward to do this.

I originally thought that I was doing something incorrectly and would need to iterate through the facetcharts. (It's why I commented that the API should return an array of points for chart centers).

**Isomorphic** · 6 Oct 2013, 20:03

getNearestDrawnValue gives the information for the sector, which makes it easy to test if the sector was actually hit.

We'll check on the report of getChartRadius()/Center() not working - again it ses to work fine in samples but perhaps something is slightly different in your test case.

**jlhoward1** · 7 Oct 2013, 13:34

I have a workaround using the attributes for FACETCHART.

Originally posted by Isomorphic View Post

getNearestDrawnValue gives the information for the sector, which makes it easy to test if the sector was actually hit.

We'll check on the report of getChartRadius()/Center() not working - again it ses to work fine in samples but perhaps something is slightly different in your test case.

Thanks...

Incorrect result - chart.getChartRadius() returned 165 here.

Correct result is chart.getNearestDrawnValue().getAttributeAsDouble("radius") returned 188.8 (So I use the second value.) There is no "getNearestDrawnValue.getRadius()".

Unexpectedly event.getX() is not correct for a chart. I needed the chart.getNearestDrawnValue().getX() to get the pie center point X and that chart.getOffsetX()) was the correct X value for click event in a chart (not event.getX()).

The formula I needed is correctly WITHIN the event handler...
double distance = Math.sqrt(Math.pow((chart.getNearestDrawnValue().getX()-chart.getOffsetX()),2.0)+Math.pow(chart.getNearestDrawnValue().getY()-chart.getOffsetY(),2.0));

chart.getNearestDrawnValue().getX() and .getY() gets the correct location of the pie center not chart.getChartCenter().

chart.getChartCenter() returned a Point of [null,null].

In general, IMHO developers should not depend on the API for charts, but use the getNearestDrawnValue().getAttributes() to find the available types of values.

Coding this was extremely unclear to me.

I will upload an updated version with a listgrid filtered by selecting PIE elements. It's a useful sample and something I think I number of developers do need.

I do not need more support.

**jlhoward1** · 7 Oct 2013, 14:59

interim sample of interactive chart showing attributes in the chart

Illustrative example of the interactive pie.

For any that need it.

Code:

/* 
 * Smart GWT (GWT for SmartClient) 
 * Copyright 2008 and beyond, Isomorphic Software, Inc. 
 * 
 * Smart GWT is free software; you can redistribute it and/or modify it 
 * under the terms of the GNU Lesser General Public License version 3 
 * as published by the Free Software Foundation.  Smart GWT is also 
 * available under typical commercial license terms - see 
 * http://smartclient.com/license 
 * 
 * This software is distributed in the hope that it will be useful, 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 
 * Lesser General Public License for more details. 
 */

import java.util.HashMap;

import gov.dtra.gkmc.shared.SimpleData;

import com.smartgwt.client.data.AdvancedCriteria;
//import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DSCallback;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DSResponse;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
//import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.RecordList;
import com.smartgwt.client.widgets.chart.ChartDrawnEvent;
import com.smartgwt.client.widgets.chart.ChartDrawnHandler;
import com.smartgwt.client.widgets.chart.ChartPointClickEvent;
import com.smartgwt.client.widgets.chart.ChartPointClickHandler;
import com.smartgwt.client.widgets.chart.DrawnValue;
//import com.smartgwt.client.data.ResultSet;
//import com.smartgwt.client.data.DataSource.*;
//import com.smartgwt.client.data.RestDataSource;
//import com.smartgwt.client.data.XJSONDataSource;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.rpc.RPCManager;
import com.smartgwt.client.types.DSDataFormat;
import com.smartgwt.client.types.DSProtocol;
import com.smartgwt.client.widgets.chart.FacetChart;
import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.widgets.drawing.DrawSector;
import com.smartgwt.client.widgets.drawing.Point;
//import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.types.ChartType;
//import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.TreeModelType;
//import com.smartgwt.client.util.JSOHelper;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Hover;
import com.smartgwt.client.widgets.Label;
//import com.smartgwt.client.widgets.drawing.ColorStop;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ButtonItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
//import com.smartgwt.client.widgets.Window;
//import com.smartgwt.client.widgets.grid.ListGrid;

import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
import com.smartgwt.client.widgets.form.fields.events.ClickHandler;
//import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.smartgwt.client.widgets.tile.TileGrid;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeGridField;
import com.smartgwt.client.widgets.tree.TreeNode;
import com.smartgwt.client.widgets.tree.events.LeafClickEvent;
import com.smartgwt.client.widgets.tree.events.LeafClickHandler;
import com.smartgwt.logicalstructure.core.LogicalStructureObject;
import com.google.gwt.core.client.EntryPoint;
//import com.google.gwt.core.client.JavaScriptObject;
//import com.google.gwt.core.client.JsArrayString;
//import com.google.gwt.json.client.JSONObject;
import com.google.gwt.user.client.Window;

public class JsonXPathSample implements EntryPoint {

	@Override
	public void onModuleLoad() {

		SimpleData ds;
		final FacetChart chart = new FacetChart();
		chart.setData(SimpleData.getData());
		chart.setFacets(new Facet("Label", "Label"));
		chart.setValueProperty("count");
		chart.setChartType(ChartType.PIE);
		chart.setStacked(true);
		chart.setShowHover(true);

		chart.setTitle("Sample");

		com.smartgwt.client.widgets.events.ClickHandler charthandler = new com.smartgwt.client.widgets.events.ClickHandler() {
			@Override
			public void onClick(
					com.smartgwt.client.widgets.events.ClickEvent event) {
				// TODO Auto-generated method stub

				Window.alert("Use chart.getNearestDrawnValue().getAttributeAsDouble(\"radius\") "
						+ chart.getNearestDrawnValue().getAttributeAsDouble(
								"radius"));

				// try {

				// }
				// catch (UncaughtException e)
				// {
				// Window.alert(e.getMessage());

				// };

				double distance = Math.sqrt(Math.pow((chart
						.getNearestDrawnValue().getX() - chart.getOffsetX()),
						2.0)
						+ Math.pow(
								chart.getNearestDrawnValue().getY()
										- chart.getOffsetY(), 2));

				Window.alert(" use double distance = Math.sqrt(Math.pow((chart.getNearestDrawnValue().getX()-chart.getOffsetX()),2.0)+Math.pow(chart.getNearestDrawnValue().getY()-chart.getOffsetY(),2)); for distance "
						+ distance
						+ " and don't use chart.getChartRadiusAsDouble() "
						+ chart.getChartRadiusAsDouble());
				Window.alert("Use chart.getNearestDrawnValue().getAttributeAsDouble(\"radius\") "
						+ chart.getNearestDrawnValue().getAttributeAsDouble(
								"radius"));
				// in the pie
				// if (distance<chart.getChartRadius()) {
				// DrawnValue dv = chart.getNearestDrawnValue().
				// dv.getChartCenter();
				if (distance < chart.getNearestDrawnValue()
						.getAttributeAsDouble("radius")) {
					Window.alert("in the Pie chart");

					Window.alert("Choice = - x= "
							+ chart.getNearestDrawnValue().getAttribute("x")
							+ " y = "
							+ chart.getNearestDrawnValue().getAttribute("y")
							+ " "
							+ chart.getNearestDrawnValue()
									.getAttributeAsRecord("record")
									.getAttribute("Label"));
					for (int j = 0; j < chart.getNearestDrawnValue()
							.getAttributes().length; j++) {
						Window.alert("Choice = "
								+ chart.getNearestDrawnValue().getAttributes()[j]);
					}
					/*
					 * event. AdvancedCriteria adCriteria = new
					 * AdvancedCriteria("_id", { OperatorId.IN_SET,
					 * chart.getNearestDrawnValue
					 * ().getAttributeAsRecord("record")
					 * .getAttributeAsStringArray("FilterIds"));
					 */
					int len = chart.getNearestDrawnValue()
							.getAttributeAsRecord("record")
							.getAttributeAsStringArray("FilterIds").length;
					for (int i = 0; i < len; i++) {
						Window.alert("Choice = "
								+ chart.getNearestDrawnValue()
										.getAttributeAsRecord("record")
										.getAttributeAsStringArray("FilterIds")[i]);
					}

					/* grid.setData(griddata.findAll(adCriteria)); */
					// grid.redraw();
					Window.alert("We finished and filtered the grid");
					// } //outside the pie
				}
			}

		};
		final float chartradius;
		VLayout layout = new VLayout(15);
		layout.setWidth(450);
		layout.setHeight(450);
		layout.addMember(chart);

		chart.addClickHandler(charthandler);
	
		chart.setWidth100();
		chart.setHeight100();
		layout.draw();

	}
}

Simpledata.java

Code:

import java.util.Map;

import com.google.gwt.core.client.JavaScriptObject;
import com.smartgwt.client.data.Record;


	//package com.smartgwt.sample.showcase.client.chart;  
	  
	import com.smartgwt.client.data.Record;  
	  
	public class SimpleData extends Record {  
	  
	    public SimpleData(int ct, String lbl, String [] filterids) {  
	        setAttribute("count", ct);  
	        setAttribute("Label", lbl);  
	        setAttribute("FilterIds", filterids);  //detail filter ids.
	    }  
	 static String [] strarray = {"1","3"};  //  filters a list grid when pie section is selected
	static  String [] strarray2 = {"2","6"};
	  static String [] strarray3 = {"4","5","7"};
	    public static SimpleData[] getData() {  
	        return new SimpleData[] {  
	            new SimpleData(10, "Cars",strarray),  
	            new SimpleData(102, "Bikes",strarray2 ),
	            new SimpleData(14, "Trukes",strarray3 )
	        };  
	    }  
	  
	}

**jlhoward1** · 9 Oct 2013, 13:34

More facetchart experiences.

It appears that that the getting a DrawSector centerpoint in the facet charts also does not return a centerpoint. I don't see a way around this without using the aforementioned Facetchart bodge.

It appears that getNearestDrawnValues() only returns 1 value. There is no getDrawnValues() "to get all drawn values" to iterate through the pie chart sectors. I am creating a FacetValueMap from the facets and the facet values and iterating through the Map to get to the sectors.

It's very inconvenient to not have getAttributes() method for DrawItems. This could be more consistent with other API items like Record getAttributes() and Chart.getNearestDrawnValues().getAttributes().

I will try to avoid rotated DrawLabels. They don't draw cleanly compared to other fonts. I am going to try placing rotated HTML5 text (Labels) over the chart rather than blocky uneven fonts.

**jlhoward1** · 9 Oct 2013, 14:42

Getting all the drawn values - snippet.

Iterating through a facetvalue map to get sectors. I only have one facet so I use facets[0], otherwise I should have an outer loop.

Do not be tempted to get the draw items, Drawsector and PieSliceSector is not exposed to you in facetcharts.

Snippet

Code:

FacetValueMap fvm = new FacetValueMap();
for (int j=0;j<facets[0].getValues().length;j++) {
     fvm.addMapping(facets[0].getIdAsString(), facets[0].getValues()[j].getIdAsString());
						
 Window.alert("start angles"+chart.getDrawnValue(fvm).getAttributeAsDouble("startAngle"));
	fvm.removeMapping(facets[0].getIdAsString());
}

It seems I need to query each value with an add and remove of 1 facet and value in a map.

**jlhoward1** · 10 Oct 2013, 05:03

Summary of challenges with FacetChart interactions

Build of 9-30 Smartgwt 4.0
So far... most of the API did not work as I would have expected or understood from the documents and examples.

Using the api to get chart center point for a pie has not worked (returns a point of [undefined,undefined] in my code. The posted code shows that. get Radius only reliably works in the getNearestDrawnPoints. Based on this experience, the exposed api in the chart does not work.

get nearest Drawn values () did not return multiple points in a pie chart.

Accessing the sectors in the FacetChart by draw items (drawitem instanceof drawsector) did not work for me... Likely it's the PieSliceSector class that I can't access in the code. I have to add and remove facets from a FacetValueMap individually to access each sector iteratively.

more coming...

**Isomorphic** · 14 Oct 2013, 00:44

Hello,
We've fixed issues with Point.getX and Point.getY methods. So code below is correct and works fine now:

Code:

ClickHandler charthandler = new ClickHandler() {
          @Override
          public void onClick(ClickEvent event) {
              Point chartcenterpoint = chart.getChartCenter();
              int x = chartcenterpoint.getX();
              int y = chartcenterpoint.getY();
              SC.logWarn("radius: " + chart.getChartRadiusAsDouble() + " x: " + x + " y:" + y);
              DrawnValue ndv = chart.getNearestDrawnValue();
              SC.logWarn("ndv: " + ndv.getX() + " " + ndv.getY() + " " + ndv.getValueAsDouble());
              SC.logWarn("r: " + ndv.getRecord().getAttributeAsStringArray("FilterIds").length);
          }        
};

Please pick up the next nightly or 4.0 build (dated Oct 15 or above) to get this fix.

Regards
Isomorphic Software

Announcement

Why I need chart drawn - using a pie chart to filter a grid

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment