Plot multiple charts dynamically on a single web page.

Ashutosh · Post by **Ashutosh** » Thu Dec 18, 2008 6:54 am

Hi, I am using TeeChart Pro Activex Control v8 and trying to draw multiple charts on the fly depending on the number and values got from db. Zooming on any chart should get reflected on all the charts displayed on the page at the same time. Need help with any sample project or any reference for the same.
Thanks and regards
Ashutosh

Narcís · Post by **Narcís** » Fri Dec 19, 2008 9:59 am

Hi Ashutosh,

You should do something as what I suggested here. This is a TeeChart for .NET thread but the same principle applies to the ActiveX version.

Ashutosh · Post by **Ashutosh** » Mon Dec 22, 2008 11:36 am

Dear Narcis,
Thanks for ypur response. I am working with VS2005 and TeeChart pro Actives v8. I am trying to plot multiple charts on client side at runtime using the Chart object. The earlier post was helpful for synchronous zooming but to draw multiple charts on a single page I need your help. Please let me know if i am not clear with my requirements.
Thanks
Ashutosh

Post by **Pep** » Wed Dec 31, 2008 10:52 am

Hi Ashutosh,

in case you want to create the Chart objects dinamically into the page you would have to use an script, like in the following example :

Code: Select all

<HTML>
<HEAD>
<SCRIPT>
var newTeeChart;
function createTeeChart(){
    // Create teechart object with value="First Choice" and then insert 
    // this element into the document hierarchy.
    newTeeChart = document.createElement("<OBJECT ID='TChart1' WIDTH='450' HEIGHT='290' CLASSID='CLSID:FAB9B41C-87D6-474D-AB7E-F07D78F2422E'></OBJECT>")
    document.body.insertBefore(newTeeChart);
    document.getElementById('test1').appendChild(newTeeChart);
}

function clearTitle(){
	newTeeChart.Header.Text.Clear();
}

function setTitle(){
	newTeeChart.Header.Text.Item(0)="title";
}

</SCRIPT>
</HEAD>

<BODY>
<div style="position: absolute; width: 425px; height: 219px; z-index: 1; left: 134px; top: 130px" id="test1">
&nbsp;</div>
<INPUT TYPE="BUTTON" ONCLICK="createTeeChart()" VALUE="Create a TeeChart Component"><BR>
<INPUT TYPE="BUTTON" ONCLICK="alert ( document.body.outerHTML )" VALUE="Click here to see HTML"><BR>
<INPUT TYPE="BUTTON" ONCLICK="clearTitle()" VALUE="Clear Chart Title"><BR>
<INPUT TYPE="BUTTON" ONCLICK="setTitle()" VALUE="Set Title"><BR>

<BODY>
</HTML>

This allow you to have show page without any Chart object on it and then create them at runtime.

Ashutosh · Post by **Ashutosh** » Wed Jan 28, 2009 11:58 am

Hi Narcis,

I am using a line series to assign value from database. As long as the data is a number there is no problem. I need to assign a date time value to the line series using addxy(double,double,string). Is there any way out that we can assign the date time value for the X axis.

Please help with the solution compatible for the web application with Activex control v8
Thanks and regards
Ashutosh

Narcís · Post by **Narcís** » Wed Jan 28, 2009 12:24 pm

Hi Ashutosh,

Yes, you can get a double value from a DateTime value like this:

Code: Select all

			double d = myDate.ToOADate();

Hope this helps!

Ashutosh · Post by **Ashutosh** » Wed Jan 28, 2009 12:36 pm

Hi Narcis,
That converts the date time value to double but displays the double value only for X axis whereas I need the DateTime value only for X axis.

One more point I seek your help for, Can we chamge the axis label to some other value say datetime equevalent at run time. I'll try to explain it:
I have assigned the points as label at the load of the chart later I am trying to change it to Date time equivalent value which is already there as the x axis value.

Please help.
Ashutosh

Narcís · Post by **Narcís** » Wed Jan 28, 2009 12:45 pm

Hi Ashutosh,

That converts the date time value to double but displays the double value only for X axis whereas I need the DateTime value only for X axis.

Yes, then you need series to display DateTime XValues, for example:

Code: Select all

    TChart1.Series(0).XValues.DateTime = True

One more point I seek your help for, Can we chamge the axis label to some other value say datetime equevalent at run time. I'll try to explain it:
I have assigned the points as label at the load of the chart later I am trying to change it to Date time equivalent value which is already there as the x axis value.

I'm not sure about what you are trying to achieve but you could try setting bottom axis labels to display X values as in previous answer you should have set them to be DateTime, for example:

Code: Select all

    TChart1.Axis.Bottom.Labels.Style = talValue

For more information about axes settings please read Tutorial 4 - Axis Control. Tutorials can be found at TeeChart's program group.

Ashutosh · Post by **Ashutosh** » Tue Feb 03, 2009 4:01 pm

Hi Narcis,
I am using TeeChart Activex Control objeect and create the charts dynamically on load time. I am already using the onmousemove event and its working fine. I am trying to use the ondblclick event in the same manner. But this event is not being fired.
Please refer the below code for reference:

dvChart.Controls.Add(new LiteralControl("<object id='TChart" + Index + "' style='width: 100%; height: 120px' type='application/x-oleobject' ondblclick='loadres(event)' onmousemove='MouseMove(TChart" + Index + ",event)'"));
dvChart.Controls.Add(new LiteralControl("classid='clsid:BDEB0088-66F9-4A55-ABD2-0BF8DEEC1196' name='TChart' viewastext >"));
dvChart.Controls.Add(new LiteralControl("<param name='Base64' value='VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoAy4CBkhlaWdodAMcARBHcmFkaWVu
dC5WaXNpYmxlCRJUaXRsZS5UZXh0LlN0cmluZ3MBBghUZWVDaGFydAAAAAAAAAACAAAAAP////8='"));
dvChart.Controls.Add(new LiteralControl(" codebase='Teechart8.cab#version=8,0,0,5'>"));
dvChart.Controls.Add(new LiteralControl("</object>"));
Could you please help me with your suggestions.
Thanks and regards

Narcís · Post by **Narcís** » Wed Feb 04, 2009 9:08 am

Hi Ashutosh,

Could you please send us a simple example project we can run "as-is" to reproduce the problem here?

You can either post your files at news://www.steema.net/steema.public.attachments newsgroup or at our upload page.

Thanks in advance.

Ashutosh · Post by **Ashutosh** » Wed Feb 04, 2009 11:38 am

Hi Narcis,
As you will find below, I have used a chart object as:
<object> id='TChart" + Index + "' style='width: 100%; height: 120px' type='application/x-oleobject' ondblclick='loadres(event)' onmousemove='MouseMove(TChart" + Index + ",event)
"classid='clsid:BDEB0088-66F9-4A55-ABD2-0BF8DEEC1196' name='TChart' viewastext >"));
dvChart.Controls.Add(new LiteralControl("<param name='Base64' value='VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoAy4CBkhlaWdodAMcARBHcmFkaWVu dC5WaXNpYmxlCRJUaXRsZS5UZXh0LlN0cmluZ3MBBghUZWVDaGFydAAAAAAAAAACAAAAAP////8='")); codebase='Teechart8.cab#version=8,0,0,5'";
</object>

I just want to fire an event on the DoubleClick on the Chart object. Is there any settings i need to make or it is just as the onmouseover event as this is working fine here.

Please suggest the needful.

Thanks and regards
Ashutosh

Ashutosh · Post by **Ashutosh** » Fri Feb 06, 2009 4:33 am

Hi Narcis,

I wish to explain the problem in more details. I have used the TeeChart Activex control object in my web application. There I have an java script function for onmouseover evnt on the chart and there is a java script function for ondblclick event on chart object as shown in the code posted last. My problem is onmoseover works fine for the chart object but ondblclick event is not fired in the mouse double click.
Please suggest how can I capture the ondblclick event for the chart object to execute the java script function for the same.

Thanks and regards
Ashutosh Prasad

Narcís · Post by **Narcís** » Thu Feb 12, 2009 10:55 am

Hi Ashutosh,

We splitted the last message you posted into a new thread here as it was not about the same subject discussed here. The new thread is here:

http://www.teechart.net/support/viewtopic.php?t=9218

Regarding the problem discussed in this thread, we are investigating it and will get back to you as soon as we have further news.

Post by **Yeray** » Mon Feb 16, 2009 1:05 pm

Hi Ashutosh,

Here there's an example of how you could use OnMouseMove and OnDoubleClick events in a chart created dynamically:

Code: Select all

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function DisplayChart()
{			
	Chart1.AddSeries(0);   
	Chart1.Series(0).FillSampleValues(10);
}

function Chart1_OnDblClick()
{
	Chart1.ShowEditor();
}
	
function Chart1_OnMouseMove(Shift, X, Y)
{
	Chart1.Header.Text.Item(0)="X: " + X + "   Y: " + Y; 
}
</SCRIPT>

</head>

<body onLoad = "DisplayChart()">

<SCRIPT LANGUAGE="JavaScript" FOR="Chart1" EVENT="OnDblClick" >
Chart1_OnDblClick()
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" FOR="Chart1" EVENT="OnMouseMove(Shift, X, Y)" >
Chart1_OnMouseMove(Shift, X, Y)
</SCRIPT>

<OBJECT ID="Chart1" WIDTH="50%" HEIGHT="50%"
     CLASSID="CLSID:FAB9B41C-87D6-474D-AB7E-F07D78F2422E"
</OBJECT>

</body>
</html>

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