[erugalatha]

Hi,

Do you have any examples of how to create a chart with drilldown into the data behind the graph?
I'm using your visifire with SharePoint but I think the idea would be the same for any data.

Is it possible to drilldown from Visifire charts?

Thanks for your help.
Joe

[vivek]

Hi erugalatha,

Yes you can create a drilldown chart from Visifire. Visifire provides mouse events which can be used to display drill down data. Example, on MouseLeftButtonUp/MouseLeftButtonDown event of a DataPoint, you can drill down to display some data or chart.

[erugalatha]

vivek, on Mar 2 2009, 11:02 AM, said:

Hi erugalatha,

Yes you can create a drilldown chart from Visifire. Visifire provides mouse events which can be used to display drill down data. Example, on MouseLeftButtonUp/MouseLeftButtonDown event of a DataPoint, you can drill down to display some data or chart.

cool ... should I be able to find an example of this type of drilldown in the help?
or do you have a link to an example?

Thank you.

[vivek]

Hi erugalatha,

We will create an example for drill down chart using Visifire. We will post it by tomorrow.

[vivek]

Hi erugalatha,

I have created a drill down chart sample in Visifire using javascript. You can find the attachment below. It is commented wherever necessary so that it will not be difficult for you to understand the flow. You can expect a detailed blog regarding drill down charts by tomorrow.

After extracting the zipped file, put SL.Visifire.Charts.xap and Visifire2.js inside the same folder. Then click on the html file to see the charts in action. Hope this will help you a lot.

Attached File(s)

•  VisifireDrillDownChart.zip (3.42K)
  Number of downloads: 109

[erugalatha]

vivek, on Mar 3 2009, 04:31 PM, said:

Hi erugalatha,

I have created a drill down chart sample in Visifire using javascript. You can find the attachment below. It is commented wherever necessary so that it will not be difficult for you to understand the flow. You can expect a detailed blog regarding drill down charts by tomorrow.

After extracting the zipped file, put SL.Visifire.Charts.xap and Visifire2.js inside the same folder. Then click on the html file to see the charts in action. Hope this will help you a lot.

Hi vivek,

Thanks for this. I'll give it a try. I'm working in a SharePoint environment so hopefully I can transfer your example.

Looking forward to the blog post.

Joe

[vivek]

hi erugalatha,

We have released a blog with drilldown chart using visifire. In this drilldown chart, there are some changes as compared to the one i provided before. Here, there will be one chart, while clicking on a DataPoint, another chart with different data will be displayed in the same html div instead of displaying another chart in different html div. For more info, please check the blog post here. Hope this will help.

[erugalatha]

vivek, on Mar 5 2009, 10:42 AM, said:

hi erugalatha,

We have released a blog with drilldown chart using visifire. In this drilldown chart, there are some changes as compared to the one i provided before. Here, there will be one chart, while clicking on a DataPoint, another chart with different data will be displayed in the same html div instead of displaying another chart in different html div. For more info, please check the blog post here. Hope this will help.

Hi vivek,

Thanks for the blog post ... it is very useful to know these methods of drilldown from chart to chart but do you think it will be possible to drilldown to a SharePoint List data using your methods?

[vivek]

Hi erugalatha,

Yes you just have to attach Mouse event to a chart element and perform some action inside the event handler of that mouse event.

[Sloaner]

erugalatha, on Mar 5 2009, 04:49 PM, said:

Hi vivek,

Thanks for the blog post ... it is very useful to know these methods of drilldown from chart to chart but do you think it will be possible to drilldown to a SharePoint List data using your methods?

I too want to be able to do this. Here is an example of what I am trying to do:

I have a task list broken into a variety of categories. I chart the non-completed tasks based on the category of the task. I would like to click on the Chart data to take me to a task listed filtered on the category i clicked on the chart.

[vivek]

Ho Sloaner,

You can do it easily by just attaching Mouse events on a DataPoint/DataSeries. Suppose you have a chart with 3 DataPoints as shown below:

<vc:DataSeries>
<vc:DataSeries.DataPoints>
<vc:DataPoint AxisXLabel="A" YValue="10"/>
<vc:DataPoint AxisXLabel="B" YValue="20"/>
<vc:DataPoint AxisXLabel="B" YValue="30"/>
</vc:DataSeries.DataPoints>
</vc:DataSeries>

If you click on category A (first DataPoint), you can drill down to that category and display the chart.

Here is a blog post which you can refer in order to achieve the same. In this blog example, if you click on a year (DataPoint) lets say 2006, it will drill down to the Monthly sales for that year.

[Sloaner]

vivek, on Apr 17 2009, 02:00 PM, said:

Ho Sloaner,

You can do it easily by just attaching Mouse events on a DataPoint/DataSeries. Suppose you have a chart with 3 DataPoints as shown below:

<vc:DataSeries>
<vc:DataSeries.DataPoints>
<vc:DataPoint AxisXLabel="A" YValue="10"/>
<vc:DataPoint AxisXLabel="B" YValue="20"/>
<vc:DataPoint AxisXLabel="B" YValue="30"/>
</vc:DataSeries.DataPoints>
</vc:DataSeries>

If you click on category A (first DataPoint), you can drill down to that category and display the chart.

Here is a blog post which you can refer in order to achieve the same. In this blog example, if you click on a year (DataPoint) lets say 2006, it will drill down to the Monthly sales for that year.

Thanks for the reply, but it is not quite what I am looking for. I want to click on the Data Point, I want to see the supporting data (in my case the individual tasks that are summarized in the data point), not a new chart using that data.

[vivek]

Hi Sloaner,

I think you are looking for a drill down such that if you click on a DataPoint, it should replace the existing DataPoints with the new DataPoints instead of creating a new chart every time. Am i right? But unfortunately we are not supporting addition of DataPoints from Javascript. Its in our wishlist.

[Bhanu]

Hi Sloaner,
I think what you ar elooking for is consolidated data from your Task List and you want to display it in the same HTML div. I have done some thing similar with the SharePoint list. Please have a look in my blog post :

Please Visit My Website

[henricodolfing]

Hi Sloaner,

I just made a blog post that explains how to create drilldown graphs with Visifire based on SharePoint lists. When I understand correctly what you want to do, you only need to create a data view that contains all the information you need, and the rest is exactly as I described.

Unfortunately the post is rather long, so just have a look at How To Create Drilldown Silverlight Graphs in SharePoint with Visifire.

When you have any questions, just let me know.

Cheers,

Henrico

[Franz]

I am new to all this visual GIU stuff so please bare with me.

I have used your AspDotNetDatabaseVB example as building block for my project.

Env: VS2008 coding in VB
Visifire_v2.2.2

Firstly I had to drop the database linking and have build a function that reads a csv file into xml format via a StreamReader. The xml string is build based on the XValue and YValue passed to the data.aspx.vb and read via Request.QueryString and returned via Response.Write(chartXml)

Now for the issue:
I have enabled via javascript the OnDataPointMouseLeftButtonUp function but have ran into a small stumbling block. The chart render only execute after the second click of the mouse button. If I enable the Alert messge in the code the chart work 100%. It seems like the page load/refresh is not being triggered on the render?
Can you please assist?

Below a copy of my Default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AspDotNetDataseVB._Default" %>

<!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 id="Head1" runat="server">
    <title>Visifire Basic Chart Sample from DataBase</title>
    <script type="text/javascript" src="./visifire/Visifire2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="VisifireChart0">
If chart does not display then follow ReadMe.txt
    
        <script type="text/javascript">
            // Create Visifire object
            var vChart = new Visifire2('visifire/SL.Visifire.Charts.xap', "MyChart", 500, 300);
            
            // Set Chart Data xml source
            vChart.setDataUri("Data.aspx?reqtime=" + (new Date()).getTime());

            vChart.preLoad = function(args) {
                var chart = args[0];
                chart.Series[0].MouseLeftButtonDown = OnDataPointMouseLeftButtonUp;
            }
                        
            // Render the chart
            vChart.render("VisifireChart0");
            
        </script>
        
        <script language="text/javascript" type="text/Javascript">
            // Call back function for mouse left button up event
            function OnDataPointMouseLeftButtonUp(e) {              
                var str = "";
                str += "reqtime =" + (new Date()).getTime()
                str += "&AxisXLabel =" + e.AxisXLabel
                str += "&XValue =" + e.XValue
                str += "&YValue =" + e.YValue

                // Set Chart Data xml source             
                vChart.setDataUri("Data.aspx?" + str);

                // Render the chart
                //alert("TEST");               
                vChart.render("VisifireChart0");
            }
        </script>
    </div>
 
    </form>
</body>
</html>

[Franz]

No worries I got it working myself... just need to learn more Java.

Franz, on Jun 9 2009, 03:51 PM, said:

I am new to all this visual GIU stuff so please bare with me.

I have used your AspDotNetDatabaseVB example as building block for my project.

Env: VS2008 coding in VB
Visifire_v2.2.2

Firstly I had to drop the database linking and have build a function that reads a csv file into xml format via a StreamReader. The xml string is build based on the XValue and YValue passed to the data.aspx.vb and read via Request.QueryString and returned via Response.Write(chartXml)

Now for the issue:
I have enabled via javascript the OnDataPointMouseLeftButtonUp function but have ran into a small stumbling block. The chart render only execute after the second click of the mouse button. If I enable the Alert messge in the code the chart work 100%. It seems like the page load/refresh is not being triggered on the render?
Can you please assist?

[Vandana]

Hi Bhanu,

I have a similar requirement to show the details ( not another chart) of the data points when clicked. Could you please share the code?

[Franz]

Vandana, on Oct 1 2009, 07:49 AM, said:

Hi Bhanu,

I have a similar requirement to show the details ( not another chart) of the data points when clicked. Could you please share the code?

I hope this helps.

Here is my Default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AspDotNetDataseVB._Default" %>

<!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 id="Head1" runat="server">
   
	<title>Drill Down Silverlight Chart Sample</title>
	<style type="text/css">

		.style1 {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 36px;
			Background: #CCCCCC;
		}	  
	</style>
	
	<script type="text/javascript" src="./visifire/Visifire2.js"></script>

	<script type="text/javascript">
		var vChart1;
		var vChart2;
		var vChart3;
		var chart1;
		var chart2;
		var chart3;
		var isChart1Added = false;
		var isChart2Added = false;
		var vSelection;

		// Call back function for mouse left button up event
		function OnDataPointMouseLeftButtonUp_DrillDown(e) {			  
			var str = "";
			str += "reqtime =" + (new Date()).getTime();
			str += "&AxisXLabel =" + e.AxisXLabel;
			str += "&XValue =" + e.XValue;
			str += "&YValue =" + e.YValue;

			//				var str = "";
			//				str += "AxisXLabel = " + e.AxisXLabel + "\n";
			//				str += "XValue = " + e.XValue + "\n";
			//				str += "YValue = " + e.YValue + "\n";
			//				alert(str);

			// Create Visifire object
			var vChart2 = new Visifire2('visifire/SL.Visifire.Charts.xap', "MyChart2", 500, 300);
			
			// Set Chart Data xml source
			//vChart.setDataXML(Build_XML());		 
			vChart2.setDataUri("Data.aspx?" + str);

			// Render the chart
			//alert("TEST");
			vChart2.render("VisifireChart0");

			var id1 = document.getElementById("text1");
			id1.style.visibility = "hidden";
			id1.style.cursor = "default";

			var id2 = document.getElementById("input1");
			id2.style.visibility = "visible";

			var id3 = document.getElementById("Selection1");
			id3.style.visibility = "hidden";
			var id4 = document.getElementById("Selection2");
			id4.style.visibility = "hidden";
			var id5 = document.getElementById("Selection3");
			id5.style.visibility = "hidden";

			isChart1Added = false;
			isChart2Added = true;
		}

		function onclickGoUpOneLevel() {
			var id = document.getElementById("text1");
			id.style.visibility = "visible";

			if (isChart2Added) {
				onmouseupPickers();
				id.value = 'Click on a column to drill down to the "Zone Picks for that Picker"';
				var id2 = document.getElementById("input1");
				id2.style.visibility = "hidden";

				var id3 = document.getElementById("Selection1");
				id3.style.visibility = "visible";
				var id4 = document.getElementById("Selection2");
				id4.style.visibility = "visible";
				var id5 = document.getElementById("Selection3");
				id5.style.visibility = "visible";
				
			}
//			if (isChart2Added) {
//				onmouseupPickers('T');
//				id.value = 'Click on a column to drill down to the "Zone Picks for that Picker"';
//			}
//			else if (isChart1Added) {
//				onmouseupYearlySales();
//				id.value = 'Click on a column to drill down to the "Monthly Sales for that Year"';
//				var id2 = document.getElementById("input1");
//				id2.style.visibility = "hidden";
//			}
		}

		function onmouseupPickers() {
			// Create Visifire object
			var vChart1 = new Visifire2('visifire/SL.Visifire.Charts.xap', "MyChart", 500, 300);
			var strXML = "";

			//alert(vSelection);
			strXML = "Data.aspx?reqtime=" + (new Date()).getTime();
			strXML += "&Selection=" + vSelection;

			// Set Chart Data xml source
			vChart1.setDataUri(strXML);

			// Attaching event handler for MouseLeftButtonUp event
			vChart1.preLoad = function(args) {
				chart1 = args[0];
				chart1.Series[0].MouseLeftButtonUp = function(e) {
					OnDataPointMouseLeftButtonUp_DrillDown(e);
				};
			};

			// Render the chart
			vChart1.render("VisifireChart0");

			isChart1Added = true;
			isChart2Added = false;
		}

		function onDay() {
			// Create Visifire object
			var vSet = "";
			vSet = "Chart" + vSelection;
			
			var vChart3 = new Visifire2('visifire/SL.Visifire.Charts.xap', vSet, 500, 300);
			var strXML = "";

			strXML = "Data.aspx?reqtime=" + (new Date()).getTime();
			strXML += "&Selection=" + vSelection;

			// Set Chart Data xml source
			vChart3.setDataUri(strXML);

			// Attaching event handler for MouseLeftButtonUp event
			vChart3.preLoad = function(args) {
				chart3 = args[0];
				chart3.Series[0].MouseLeftButtonUp = function(e) {
					OnDataPointMouseLeftButtonUp_DrillDown(e);
				};
			};

			// Render the chart
			vChart3.render("VisifireChart0");

			isChart1Added = true;
			isChart2Added = false;
		}
		
		function onselect(vNum){
			vSelection = vNum;

			onDay();
			id.value = 'Click on a column to drill down to the "Zone Picks for that Picker"';
			var id2 = document.getElementById("input1");
			id2.style.visibility = "hidden";

			var id3 = document.getElementById("Selection1");
			id3.style.visibility = "visible";
			var id4 = document.getElementById("Selection2");
			id4.style.visibility = "visible";
			var id5 = document.getElementById("Selection3");
			id5.style.visibility = "visible";
			
		}
	</script>
</head>

<body style="background:black;">
	<form id="form1" runat="server">
	
	<div>
If chart does not display then follow ReadMe.txt
	
			<table width="999" border="0" cellspacing="0" cellpadding="4">
			<tr>
				<td class="style1" colspan="3" style="height:50px;" align="center">Voice Pick Dashboard</td>
			</tr>
			<tr style="height:30px;"></tr>
			<tr>
				<td align="center">
					<input id="input1" onclick="onclickGoUpOneLevel();" onmouseover="onmouseoverChangeColor();" onmouseout="onmouseoutChangeColor();" type="reset" value="<< Up One Level" style="cursor:default;text-align:center;border-width:0px;background:black;color:white;font-size:12px;visibility:hidden;"/>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<div id="VisifireChart0">
						<script type="text/javascript">
							// Create Visifire object
							var vChart1 = new Visifire2('visifire/SL.Visifire.Charts.xap', "MyChart", 500, 300);
							var strXML = "";

							strXML = "Data.aspx?reqtime=" + (new Date()).getTime();
							strXML += "&Selection=1";

							// Set Chart Data xml source
							vChart1.setDataUri(strXML);

							// Attaching event handler for MouseLeftButtonUp event
							vChart1.preLoad = function(args) {
								chart1 = args[0];
								chart1.Series[0].MouseLeftButtonUp = function(e) {
									OnDataPointMouseLeftButtonUp_DrillDown(e);
								};
							};

							// Render the chart
							vChart1.render("VisifireChart0");
	
						</script>			
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="1"align="center">
					<input id="Selection1" onclick="onselect(1);" type="reset" value="<<23-Mar>>" style="cursor:default;text-align:center;border-width:0px;background:black;color:white;font-size:12px;"/>
				</td>
				<td colspan="1"align="center">
					<input id="Selection2" onclick="onselect(2);" type="reset" value="<<24-Mar>>" style="cursor:default;text-align:center;border-width:0px;background:black;color:white;font-size:12px;"/>
				</td>
				<td colspan="1"align="center">
					<input id="Selection3" onclick="onselect(3);" type="reset" value="<<25-Mar>>" style="cursor:default;text-align:center;border-width:0px;background:black;color:white;font-size:12px;"/>
				</td>
			</tr>
			<tr>
				<td colspan="3"align="center">
					<input style="width:490px;cursor:default;text-align:center;border-width:0px;background:black;color:white;font-size:14px" type="text" id="text1" value='Click on a column to drill down to the "Zone Picks for that Picker"'/>
				</td>
			</tr>
			   
		</table>
	
	
	</div>
	
	</form>
</body>
</html>