Interactive chart reading

bsklar · February 9, 2008

I'm looking for an example of an interactive pie chart. I want to show a pie chart on page and then the user can pull out slices and when the "Get Slices" button is selected I would to retrieve the list of the slices that were pulled out.

I would think that there are two ways to do this. First, record each slice as it is selected but if it is unselected then the slice has to removed from the list. Second, I hope that there is some way to read the chart and ask which slices are selected. I'm looking for a Javascript example.

bsklar · February 9, 2008

I sort of have the example of the interactive chart working. The code is

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Event Chart Analysis</title>
<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />
<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>
<script language="javascript" type="text/javascript">
var values = [];
function save_value(ip){
 values.push(ip);
}
function show_values(){
 alert("values = "+ values);
}
</script>
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
   <td valign="top" class="text" align="center"> <div id="detector_ip_div" align="center"> 
    Detector IP</div>
    <script type="text/javascript">
 var chart = new FusionCharts("../Charts/Pie2D.swf", "ChartId", "310", "250", "0", "0");
 chart.setDataURL("Data/Detector_ip.xml");	 
 chart.render("detector_ip_div");
 </script> 
 </td>
  </tr>
  <tr>
   <td valign="top" class="text" align="center"> </td>
 <td><input type="button" value="Show Selected" onclick="show_values()" />
  </tr>
</table>
</body>
</html>

and the xml file (Detector_ip.xml) is:

<chart palette='4'>
  <set label="10.2.10.1" value="4" link='javascript:save_value("10.2.10.1")' /> 
  <set label="10.2.10.2" value="5" link='javascript:save_value("10.2.10.2")'/> 
  <set label="10.2.10.3" value="2" link='javascript:save_value("10.2.10.3")'/> 
  <set label="10.2.10.4" value="4" link='javascript:save_value("10.2.10.4")'/> 
  <set label="10.2.10.5" value="5" link='javascript:save_value("10.2.10.5")' /> 
  <set label="10.2.10.6" value="5" link='javascript:save_value("10.2.10.6")' /> 
  <set label="10.2.10.8" value="20" link='javascript:save_value("10.2.10.8")' /> 
  <set label="10.2.10.10" value="5" link='javascript:save_value("10.2.10.10")'/> 
  <set label="10.2.10.30" value="2" link='javascript:save_value("10.2.10.30")'/> 
</chart>

However now that the slices have a link they no longer slide out when they are selected.

How can I have both or is there some way to read the chart when the Show Selected button is clicked?

Sign In

Interactive chart reading

Recommended Posts

bsklar

Share this post

Link to post

Share on other sites

bsklar

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity