Note this thread is related to http://forums.smartclient.com/showth...600#post113600.
We have an issue where pie charts become cluttered when there are several small slices (value of 1). The following test case is our workaround to do 2 things to make the chart more aesthetically pleasing:
1. Don't show the data values in the pie chart for slices that have a value of 1. If we do show them they overlap.
2. For the slices that do not show values, change the pie label to include the count in the legend.
This causes an undesired side effect (correct behavior, just undesired): when hovering over the pie slices without data point labels, I get an empty gray hover box. It would be nice for the hover to not display if the data value was set to an empty string. Setting to null displays "null"
A few questions:
- what other unintended consequences do you see with this approach?
- will there be a method to format the legend label when its clicked. I see that I can override legendClick, which takes the facetValue as one of its arguments, but how do I get the corresponding value of that facet? Then I would not have to change the project name with this value.
- is there a way to explode a pie chart, such that each slice is separated out? This would also fix my underlying issue.
Thanks for your help!
We have an issue where pie charts become cluttered when there are several small slices (value of 1). The following test case is our workaround to do 2 things to make the chart more aesthetically pleasing:
1. Don't show the data values in the pie chart for slices that have a value of 1. If we do show them they overlap.
2. For the slices that do not show values, change the pie label to include the count in the legend.
This causes an undesired side effect (correct behavior, just undesired): when hovering over the pie slices without data point labels, I get an empty gray hover box. It would be nice for the hover to not display if the data value was set to an empty string. Setting to null displays "null"
A few questions:
- what other unintended consequences do you see with this approach?
- will there be a method to format the legend label when its clicked. I see that I can override legendClick, which takes the facetValue as one of its arguments, but how do I get the corresponding value of that facet? Then I would not have to change the project name with this value.
- is there a way to explode a pie chart, such that each slice is separated out? This would also fix my underlying issue.
Thanks for your help!
Code:
<!DOCTYPE html>
<html>
<head>
<title >SNT-12990</title>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Core.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Foundation.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Containers.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Grids.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Forms.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Drawing.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_PluginBridges.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Charts.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
<script type="text/javascript" >
var isomorphicDir="http://localhost:8080/isomorphic/";
var data = [
{project:"XYZ Contracting", inspectionCount:1},
{project:"Pizza Hut", inspectionCount:1},
{project:"Park Avenue", inspectionCount:6},
{project:"Railroad", inspectionCount:2},
{project:"Burger Hut Demo", inspectionCount:27},
{project:"00-12dd4", inspectionCount:1},
{project:"Fireworks", inspectionCount:1},
{project:"Mon Wharf", inspectionCount:1},
{project:"Staples", inspectionCount:1},
{project:"Pet Grooming", inspectionCount:1}
];
</script>
</head>
<body>
<script>
// threshold value to not set data labels on pie chart
var DATA_LABEL_THRESHOLD = 1;
// note only do this for pie charts
// modify the project name with the count becuase we won't be showing those values
// this gets the labels to be formatted the way we want, in leiu of an API method
for(var i=0; i<data.length; i++) {
if(data[i].inspectionCount <= DATA_LABEL_THRESHOLD) {
data[i].project = data[i].project + " (" + data[i].inspectionCount + ")";
}
}
var chart =
isc.FacetChart.create({
width: 800,
height: 400,
legendItemPadding: 10,
autoDraw: true,
ID: "test",
facets: [{
id: "project", // the key used for this facet in the data above
title: "Project"
}],
valueProperty: "inspectionCount", // the property in our data that is the numerical value to chart
valueTitle: "Count of Inspections",
chartType: "Pie",
title: "Inspection Counts By Project",
showDataPoints: true,
showDataValues: false,
showValueOnHover: true,
data: data,
// dont show data values for pie slices below the threshold, these values will be shown in the legend instead
// this resolves issues withsmall pie slices and overlapping text
formatDataValue: function(value) {
if(value>DATA_LABEL_THRESHOLD) {
return value;
}
else {
// this ensures label is not show on pie slice, but could cause issues downstream
return "";
}
}
});
</script>
</body>
</html>
