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

[jlhoward1]

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]

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]

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

[Isomorphic]

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]

I have data hard coded and the handler

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().)

//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]

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]

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.

[jlhoward1]

I need to get the FacetChart ChartDrawn code working...
I want to get the getChartRaduis() and getChartCenter working..

I have tried getting the values in the Chart Drawn Handler

Nothing works... what am i missing?

// Edited very tired.

// 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
	   		}
	   		
		};
      VLayout layout = new VLayout(15);  
      layout.setWidth(400);
      layout.setHeight(400);
      layout.addMember(chart);  
      chart.addClickHandler(charthandler);
      chart.setWidth100();
      chart.setHeight100();
      layout.draw();  
	  
	
      }
}

and simple data

// your package
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(23, "Bikes",strarray2 ),
	            new SimpleData(14, "Trukes",strarray3 )
	        };  
	    }  
	  
	}