Drilldown Pie Chart

landa · Post by **landa** » Fri Jun 12, 2009 4:35 pm

Hi there,

I'm trying to create a drilldown chart and I'm completely confused on how exactly to do it.
I want the drilldown web page to be connected to slices of the pie in the pie chart.
How do I link the html page to the pie slices? I was told of an example in VCL but that doesn't seem to help me.
Can somebody post some code on how to attach another web page to the slices of pie in the chart for ActiveX?

Thanks so much!
Landa

Post by **Yeray** » Mon Jun 15, 2009 9:10 am

Hi Landa,

Here is an example drawing the link tools over the pie's marks. If it isn't what you are trying to do, please, could you please tell us where to find the vcl code you said?

Code: Select all

Private Sub Form_Load()  
  TChart1.Aspect.View3D = False
  TChart1.AddSeries scPie
  TChart1.Series(0).FillSampleValues 5

  Dim i As Integer
  For i = 0 To TChart1.Series(0).Count - 1
    TChart1.Tools.Add tcLink
    With TChart1.Tools.Items(i).asLink
      .Text = TChart1.Series(0).PointLabel(i)
      .URL = "http://support.steema.com"
    End With
    TChart1.Series(0).Marks.Item(i).Font.Color = TChart1.Series(0).Marks.Color
  Next i
  TChart1.Environment.InternalRepaint
End Sub

Private Sub TChart1_OnAfterDraw()
  Dim i As Integer
  For i = 0 To TChart1.Series(0).Count - 1
    With TChart1.Tools.Items(i).asLink
      .Left = TChart1.Series(0).Marks.Positions.Position(i).LeftTop.X
      .Top = TChart1.Series(0).Marks.Positions.Position(i).LeftTop.Y
    End With
  Next i
End Sub

landa · Post by **landa** » Tue Jun 16, 2009 6:34 pm

Hi Yeray,

I'm having some trouble with the code that you sent me.
Below is what I have:

function tchartFundsRiskGraph_OnAfterDraw() {
tchartFundsRiskGraph.Tools.Items(0).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(0).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(0).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(0).LeftTop.Y;
}

And the problem is with the "tchartFundsRiskGraph.Series(0).Marks.Positions.Position(0).LeftTop.X;"
I get a Javascript Error that says "Unexpected Call to Method or Property Access"

Can you help? Why would it not recognize it?

Thanks,
Landa

landa · Post by **landa** » Tue Jun 16, 2009 9:57 pm

Hi Yeray,

I've gotten a little bit further since my last post, but I'm still having some trouble.
The problem is that the links are displayed ontop of each other at the left top part of the chart.
And the marks are rectangles that are placed alongside the chart. For some odd reason the links don't show up inside the chart unless I move something on the chart... Is there a way to make the links show up in the marks on the chart without having to move something in the chart?
Plus the marks are not wide enough for the link text... Is there a way to make the marks wider?
I'm using JavaScript for outputting the chart. And my code now looks like this:

<head>
<title>Risk and Financial Summary</title>
<script language=JavaScript>
function OnLoad() {

onloadtchartFundsRiskGraph();

}
</script>

</head>
<body onload="JavaScript:OnLoad();" >
<center>
<object name="TChartComtchartFundsRiskGraph" id="TChartComtchartFundsRiskGraph" style="HEIGHT: 33px; LEFT: 0px; TOP: 0px; WIDTH: 500" classid="CLSID:DCAB77D9-709F-4BB0-92B9-5CFE7A5170EB" codebase="tchart/teechart8.cab" VIEWASTEXT></object>
<br>
<OBJECT id=tchartFundsRiskGraph name=tchartFundsRiskGraph VIEWASTEXT style="LEFT: 0px; WIDTH: 500; TOP: 0px; HEIGHT: 300" codeBase="tchart/teechart8.cab" classid="CLSID:BDEB0088-66F9-4A55-ABD2-0BF8DEEC1196" ></OBJECT>
<script language= "JavaScript">
function onloadtchartFundsRiskGraph() {
TChartComtchartFundsRiskGraph.Chart = tchartFundsRiskGraph;
tchartFundsRiskGraph.Series(0).ColorEachPoint = true;
tchartFundsRiskGraph.Series(0).Color = 536870912;
tchartFundsRiskGraph.Series(0).VerticalAxis = aLeftAxis;
tchartFundsRiskGraph.Series(0).Add (200, "Pending", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(0).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(0);
tchartFundsRiskGraph.Series(0).Marks.Item(0).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Series(0).Add (3233, "Initial Rebuttal", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(1).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(1);
tchartFundsRiskGraph.Series(0).Marks.Item(1).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Series(0).Add (100, "Level 1 - FI", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(2).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(2);
tchartFundsRiskGraph.Series(0).Marks.Item(2).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Series(0).Add (400, "Level 2 - QIC", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(3).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(3);
tchartFundsRiskGraph.Series(0).Marks.Item(3).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Series(0).Add (200, "Level 3 - ALJ", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(4).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(4);
tchartFundsRiskGraph.Series(0).Marks.Item(4).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Series(0).Add (200, "Level 4 - MAC", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(5).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(5);
tchartFundsRiskGraph.Series(0).Marks.Item(5).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Series(0).Add (200, "Level 5 - COURT", 536870912 );
tchartFundsRiskGraph.Tools.Add(41);
tchartFundsRiskGraph.Tools.Items(6).asLink.Text = tchartFundsRiskGraph.Series(0).PointLabel(6);
tchartFundsRiskGraph.Series(0).Marks.Item(6).Font.Color = tchartFundsRiskGraph.Series(0).Marks.Color;
tchartFundsRiskGraph.Axis.Left.maximum = 6892.6 ;
tchartFundsRiskGraph.Axis.Left.minimum = 200 ;
tchartFundsRiskGraph.StopMouse();
}

</SCRIPT>

<script language= "JavaScript" FOR= "tchartFundsRiskGraph" EVENT= "OnAfterDraw()">
tchartFundsRiskGraph.Tools.Items(0).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(0).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(0).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(0).LeftTop.Y;
tchartFundsRiskGraph.Tools.Items(1).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(1).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(1).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(1).LeftTop.Y;
tchartFundsRiskGraph.Tools.Items(2).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(2).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(2).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(2).LeftTop.Y;
tchartFundsRiskGraph.Tools.Items(3).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(3).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(3).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(3).LeftTop.Y;
tchartFundsRiskGraph.Tools.Items(4).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(4).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(4).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(4).LeftTop.Y;
tchartFundsRiskGraph.Tools.Items(5).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(5).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(5).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(5).LeftTop.Y;
tchartFundsRiskGraph.Tools.Items(6).asLink.Left = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(6).LeftTop.X;
tchartFundsRiskGraph.Tools.Items(6).asLink.Top = tchartFundsRiskGraph.Series(0).Marks.Positions.Position(6).LeftTop.Y;
</SCRIPT>
</center>

Post by **Yeray** » Wed Jun 17, 2009 7:42 am

Hi Landa,

1. I think that you missed the InternalRepaint call at OnLoad event to force the link tools to be positioned considering the drawn marks positions:

Code: Select all

TChart1.Environment.InternalRepaint

2. To adjust your marks width you should do something as follows at OnAfterDraw event:

Code: Select all

TChart1.Series(0).Marks.Positions.Position(i).Custom = True
TChart1.Series(0).Marks.Positions.Position(i).Width = 100

landa · Post by **landa** » Wed Jun 17, 2009 5:48 pm

Hi Yeray,

Thanks for your prompt reply... I'm still having some trouble.. Seems to be getting a little closer though!
First of all the Chart1.Environment.InternalRepaint did not seem to work but I did get the Chart1.Repaint to work and that fixed the positioning of the marks. Now I can't seem to get the URL to work correctly.
Whenever I add this line of code below, I get a javascript error message ("Unexpected Call to Method or Property Access").
Chart1.Tools.Items(i).asLink.URL = "http://support.steema.com"
And it doesn't matter if I have the code in the Onload Event or the OnAfterDraw Event... I get the same error message...

Is there any other way of adding the link or am I missing something?

Plus I would like the marks to be auto-sized depending on the length of the text. Is there a way to do that?

One other thing that I noticed was that the first value is not being displayed in the mark box. Infact the text is not being displayed at all. And a _ is displayed at the left top corner of the chart... Do you know what could be causing this? Do you have an example of a drilldown report in Javascript?

Thanks,
Landa

Post by **Yeray** » Thu Jun 18, 2009 11:46 am

Hi Landa,

I've added the following code in onloadtchartFundsRiskGraph function in the example you posted the 16th of June and it seems to work fine (it doesn't give any error message to me and opens the web page correctly):

Code: Select all

tchartFundsRiskGraph.Tools.Items(0).asLink.URL = "http://support.steema.com";
tchartFundsRiskGraph.Tools.Items(1).asLink.URL = "http://support.steema.com";
//...

To autosize the marks width you could use the length of the string and multiply it for a PixelsPerCharacter factor instead of my constant (100).

Could you please send us a simple example where we could reproduce the remaining problems such as the '_' drawn on the top left of your chart?

Thanks in advance.

Drilldown Pie Chart

Drilldown Pie Chart

Re: Drilldown Pie Chart

Re: Drilldown Pie Chart

Re: Drilldown Pie Chart

Re: Drilldown Pie Chart

Re: Drilldown Pie Chart

Re: Drilldown Pie Chart

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy