|
 contour maps in browser |
| Posted by chakri on Mar-05-2012 16:14 |
|
Hi everyone,
We are going to develop a decision support system.In this concern, it is needed to display contour map of the existing data through the browser to the user.The contour plot is supposed to be dynamic to user actions like zoom, displaying value at a point the mouse points on the plot. Is it possible to use ChartDirector for that purpose? Please suggest me a solution to my problem?
Thanks in advance. |
| Re: contour maps in browser |
| Posted by Peter Kwan on Mar-06-2012 01:38 |
|
Hi Chakri,
Yes. ChartDirector can achieve what you need.
In the ChartDirector distribution, there are some sample code for contour charts and some sample code for zoomable and scrollable charts. You just need to combine them together.
In particular, you may start with the "Zooming and Scrolling Demonstration (2)" sample code. It shows a scatter chart that can be zoomed and scrolled. You just need to replace the code that draws the scatter chart with that of the contour chart to achieve what you need.
If you can inform me of your programming language, I can upload an example for you.
In case you have not already done so, please feel free to download a free trial version of ChartDirector from our web site http://www.advsofteng.com/download.html
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on Mar-07-2012 14:35 |
|
hi ,
thanks for the reply. we are using asp.net programming language. but we tried to replace the code that is available in the pageload of scatter contour map code into the pageload event of zooming and scrolling demonstration.
can you please provide us with the corresponding example. it will be helpful for us
thanks in advance.
regards
chakri |
| Re: contour maps in browser |
| Posted by Peter Kwan on Mar-08-2012 01:14 |
|
Hi chakri,
I am not sure if you are using C# or VB, so I randomly choose to use C# in the example. I have attached the example as well as the screen shot for your reference.
Hope this can help.
Regards
Peter Kwan
|
| Re: contour maps in browser |
| Posted by chakri on Mar-09-2012 14:26 |
|
hi peter,
thanks for your help. in fact we are also using c#language for coding. your example helped
us.
however the example shows exactly the data values that were taken in arrays only. how
can we use interpolation methods on the chart to display those values which are not
actually present in the original data.
and can we store the interpolated values in a separate array or in a database and then
based on these x,y,z and interpolated values can we draw the contour map??
regards
chakri |
| Re: contour maps in browser |
| Posted by Peter Kwan on Mar-10-2012 02:06 |
|
Hi chakri,
ChartDirector can only display the interpolated values as colors in the contour chart. There is no API to retrieve the z-value at each of the pixels.
(The same happens to any other charts in ChartDirector, such as a line chart or spline chart. ChartDirector can plot the line or spline, which is an interpolation of the data points, but there is no API to retrieve the data value at every pixel in the line or spline.)
The only method I can think of is to read the colors of each pixel using DrawArea.getPixel, and then deduce its z-value. For example, in the simplest case, you can plot a chart and configure the color scale to be from black to white using a "continuous scale" (see ColorAxis.setColorGradient). Then for each pixel, you can deduce the approximate data value from the grey scale of the pixel. You can get the color of the pixel using DrawArea.getPixel. Note that for this to work, you would need to configure the chart to have no grid lines and no symbols, just the fill colors.
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on Mar-19-2012 18:35 |
|
hi peter,
Thanks for the support. one more query is
is it possible to select two points from the contour map and then calculate the z values between those points and project them in a seperate graph.
regards
chakri |
| Re: contour maps in browser |
| Posted by Peter Kwan on Mar-19-2012 23:05 |
|
Hi chakri,
Unluckily, ChartDirector does not have a built-in function that performs what you need. With ChartDirector, you would need to use your own code to determine the z-values between two points. For example, you may plot a contour chart, and use the method in my previous message to determine the z values for some positions between the two points (eg. you may take 50 samples between the two points), then plot them in another chart (eg. as a spline line chart).
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on Mar-20-2012 14:54 |
|
| Thanks for the response |
| Re: contour maps in browser |
| Posted by chakri on Mar-26-2012 18:44 |
|
Hi peter,
In zoom and scroll demo, when the mouse points on an 'x' symbol, the corresponding
xdata and ydata values are displayed.How can i display zdata also.I mean more than one
value. And one more question
is can we dispaly more than one scatter surface charts one over the other in a single map?
Regards,
chakri. |
| Re: contour maps in browser |
| Posted by Peter Kwan on Mar-27-2012 01:27 |
|
Hi charkri,
For the tooltips over the 'x' symbol, in the original code, there is a line:
c.addScatterLayer(dataX, dataY, "", Chart.Cross2Shape(0.2), 7, 0x000000);
Please change the above to:
c.addScatterLayer(dataX, dataY, "", Chart.Cross2Shape(0.2), 7, 0x000000).addExtraField(dataZ);
Also, please change the tooltip configuration "title='[{dataSetName}] Alpha = {x|G}, Beta = {value|G}'" to "title='({x}, {value}, {field0})'". This would then display (x, y, z) in the tooltip. (The z value is represented as {field0}.)
For a 3D surface chart, there can only be one surface in each 3D surface chart. ChartDirector does not support having two surfaces in the same 3D surface chart.
Should you need further information, please feel free to contact me.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on Mar-27-2012 02:13 |
|
Hi Peter,
Thank you very much for your support. |
| Re: contour maps in browser |
| Posted by chakri on Mar-27-2012 02:47 |
|
Hi peter,
I am very much thankful to you for supporting me.
In reference to my previous question on 19-03-2012 about selecting two 'x' points and
calculating the z values and displaying them in a separate graph, can you provide me an
example?
Thanks in advance.
Regards,
chakri |
| Re: contour maps in browser |
| Posted by chakri on Mar-27-2012 02:48 |
|
Hi peter,
I am very much thankful to you for supporting me.
In reference to my previous question on 19-03-2012 about selecting two 'x' points and
calculating the z values and displaying them in a separate graph, can you provide me an
example?
Thanks in advance.
Regards,
chakri. |
| Re: contour maps in browser |
| Posted by chakri on Mar-27-2012 02:49 |
|
Hi peter,
I am very much thankful to you for supporting me.
In reference to my previous question on 19-03-2012 about selecting two 'x' points and
calculating the z values and displaying them in a separate graph, can you provide me an
example?
Thanks in advance.
Regards,
chakri. |
| Re: contour maps in browser |
| Posted by Peter Kwan on Mar-28-2012 02:30 |
|
Hi chakri,
I do not really have an example. I have just written some code for you that demonstrate my idea - that is, to create a chart with a convenient color scale, and to read the z value by reading the colors. I am not extensive tested the code and so am not sure if the code is correct or not. You may need to debug it.
Hope this can help.
Regards
Peter Kwan
|
| Re: contour maps in browser |
| Posted by chakri on Apr-05-2012 00:14 |
|
Hi peter,
Thank you very much for the support. The code is working fine. More over it is easy to
understand.
You used contour chart with grey scale.But, when i changed the contour map to be color
contour chart as in scattercontour.aspx, i am getting a different graph with no relevance to
contour chart. And also, you took the starting and end values in arrays as initial and final
points on graph. I m trying to make it the user choice to select any two points on the
contour chart and display the graph. I used javascript to catch mouse click events on
contour map and display the graph but unable to do successfully.(please dont think bad
about me...i am a student doing my project and still trying to learn concepts.But the truth
is i learned many new things with your help).
please help me...
Thanks in advance
Chakri. |
| Re: contour maps in browser |
| Posted by Peter Kwan on Apr-05-2012 04:00 |
|
Hi chakri,
The code I suggested to compute the cross section between two points must use a grey scale chart. If you would like to use the same code, please do not change the contour chart used for computing the cross section. If you need to display the contour chart in color, please create another contour chart for display.
You mentioned you would like to allow the user to select two points on the chart. First, you code would need to determine mouse coordinates relative to the chart. To do this, you would need to obtain the mouse coordinates using Javascript relative to the browser window (or relative to anything you like), then obtain the coordinates of the top-left corner of the chart image relative to the same thing. Their difference are the mouse coordinates relative to the chart.
Once you have these values, you can use them instead of startX, startY, endX and endY in the corss section computation code to obtain the cross section.
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on Apr-07-2012 17:10 |
|
Hi peter,
Thanks for the support.Here, I am attaching the page which gets mouse coordinates using
java script. I used singleclick event for source and doubleclick event for destination.To
select source, a user must click once on chart and enter manually the values displayed in
upper text boxes into lower text boxes.For destination, a doubleclick is used. The problem
is, a double click is considered as two single click events and updated in singleclick text
box.I am trying to automatically take the values from click events but this is the problem.
Please see it and give me your suggestions and solutions to the problems.
Thanks in advance,
chakri.
|
| Re: contour maps in browser |
| Posted by Peter Kwan on Apr-10-2012 00:56 |
|
Hi chakri,
For general issues on HTML/Javascript, you may want to post your question to other forums that supports HTML/Javascript. There are probably a lot of people having similar issues and have the solutions.
If I were you, I will probably use just single click to select both points. When the user clicks on a point, the first point is selected. When he clicks again, the second point is selected. If he clicks once more, the first point is updated, and so on.
If you would like to use single and double click, when you detect a single click, you may save the old value in the singleclick text box before updating the singleclick text box to a new value. When you detect a double click, you can update the doubleclick text box, and also restore the old value to the singleclick text box. It is because if there is a doubleclick, there must be a singleclick first. But that singleclick should be ignored, as it is really a doubleclick. So the doubleclick handler should "undo" what the previous singleclick has done.
A second method is to set a timer in the singleclick handler (eg. 500ms timer). The singleclick text box will only be updated after timeout. If there is a doubleclick, the douleclick handler will reset the timer before it can timeout, so the singleclick text box will not be updated.
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on Apr-19-2012 21:52 |
|
Hi peter,
Thanks for the reply.. Now, i am able to select source and destination by single clicks only using flag using java script. Now i have a question regarding color legend. Is there any way for the color chart to take max and min values of z values from database and is there any possibility for dynamically changing the legend interval?? |
| Re: contour maps in browser |
| Posted by Peter Kwan on Apr-19-2012 23:27 |
|
Hi chakri,
Yes. You may use Axis.setLinearScale for the color axis. For example:
//Set color scale to be from 0 to 30, with each step being 5 units
layer.colorAxis().setLinearScale(0, 30, 5);
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on May-16-2012 18:42 |
|
Hi peter,
Thanks for all the support.
I was using zoom and scroll demo in pageload event and it worked fine. But when i cut and pasted the same code in pageload and put in buttonclick event, i encountered some problems.
I introduced dropdownlist and it is displaying contour chart for the first selected value in dropdownlist. next, i select any other value, it is not displaying contour. And in all cases, i am unable to zoom in as it is returning "partial update returns invalid data". I am attaching my page to make clear my problem.My sample database contains "rainfall", "temperature" and "humidity" tables.It exceeds 250k . so, i am unable to attach it.
And one more query is , suppose i have more than three columns of data in my database, can i display all of them similar to displaying x,y,z data when i move mouse over "X" symbol?
|
| Re: contour maps in browser |
| Posted by Peter Kwan on May-17-2012 04:16 |
|
Hi chakri,
The code in the Button1_Click is run only if the button is clicked. If you do not click the button, the code would not be run.
When you zoom-in, you have not clicked the button. So the code in Button1_Click is not run. In fact, no code is run at all, as you do not have any code in Page_Load either. So the ASP.NET just returns the default empty web page. But during zoom-in, ChartDirector expects an updated chart. Since it does not receive the updated chart, so it produces the error message "partial update returns invalid data".
In your case, you need to update the chart when the user clicks on the button, and also when the user does not click on the button. So I think you should not put your code in the Button1_Click handler. In fact, the partialUpdateRequest part of the code must be put in the Page_Load event handler. The other parts IsPostBack and the part for "Page is First Accessed" can be put somewhere else if your like. In any case, your code must handle all possible requests (page is first accessed, zoom-in/out partial update requests, user clicks on a button, etc) and updates the chart appropriately. If you put the code in Button1_Click, it can only handle the bubble click requests, but not other types of requests.
To add more fields to the tooltips, you may just call addExtraField multiple times on the same layer. You may then use {field0}, {field1}, {field2} ... to refer to the entries in those extra fields. For example:
ScatterLayer myScatterLayer =c.addScatterLayer(dataX, dataY, "", Chart.Cross2Shape(0.2), 7, 0x000000)
myScatterLayer.addExtraField(dataZ);
myScatterLayer.addExtraField(anotherArray);
myScatterLayer.addExtraField(oneMoreArray);
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on May-19-2012 16:44 |
|
Hi peter,
Thanks for the support.
I tried to implement what you said by putting back partial update in pageload event but still some problem exists...If you dont mind,can you send me the page i sent to you with corrections? I tried to pass input from another page using querystring. It worked. And also i am now able to display more array values using addExtraField...
Thanks in advance
chakri. |
| Re: contour maps in browser |
| Posted by Peter Kwan on May-22-2012 01:00 |
|
Hi chakri,
I have attached the modified code for your reference.
I put the partial update code back in the page load event, so the code is basically the same as the sample code, except that the web page contains an additional drop down list box and a button. The sample code "Zooming and Scrolling Demonstration (1)" illustrates how to pass the values of additional controls back to the server in partial updates. I basically use the same code in pichi.aspx to pass the drop down list box value back to the server.
(As I do not have your database, I have changed your code to use hard coded data.)
Hope this can help.
Regards
Peter Kwan
|
| Re: contour maps in browser |
| Posted by chakri on May-25-2012 02:44 |
|
Hi Peter,
Thanks for the support. I am now able to display contours with data from database.
In scattercontour page you sent me to display graph between two selected points works
great. But when i tried to remove cAxis.setLinearScale(0, 20, 2); , i got different result.
Why is it so? Is there any solution to that?
And one more thing is when i tried to give table name(here 'village' instead of 'Revenue')
from dropdown list into the query of dbdemo3.aspx, i am getting an error report saying that
there is an error in From clause...... I have presented the code below.Please help me..
"Select Sum(rainfall), Year(TimeStamp) From " + village + "Where Year(TimeStamp) >= 2007
And Year(TimeStamp) <= 2010 group by Year(TimeStamp) Order By Year(TimeStamp)";
Thanks in advance,
chakri. |
| Re: contour maps in browser |
| Posted by Peter Kwan on May-26-2012 02:44 |
|
Hi chakri,
If you remove the cAxis.setLinearScale(0, 20, 2);, ChartDirector will automatically set the color axis scale according to what is visible on the chart. For example, if your chart contains data from 4.23523 to 46.3478, ChartDirector may choose to use a color axis scale of 0 to 50. So this is normal that the chart is different without the line.
Also, the color axis will probably be different when you zoom in, as the visible data on the chart changes. If you would like the color axis to be the same when you zoom in and out, you would need to set the color axis scale to the same value. You can hard coded it like using cAxis.setLinearScale(0, 20, 2);, or you can detect the min/max value of your full data, and use cAxis.setLinearScale(minValue, maxValue);. You can also store the min/max value that is automatically determined by ChartDirector for the first chart, and use the same value when the chart is zoomed in and out. This is the similiar to how the x-axis and y-axis scale is handled. When the chart is first drawn, you may add the line:
viewer.SetCustomAttr("minC", cAxis.getMinValue());
viewer.SetCustomAttr("maxC", cAxis.getMaxValue());
Then when the chart is zoomed in, you may use:
cAxis.setLinearScale(double.Parse(viewer.GetCustomAttr("minC")), double.Parse(viewer.GetCustomAttr("maxC")));
Note that if you let ChartDirector automatically determine the color axis scale, it may use a wider spacing between labels than using cAxis.setLinearScale(0, 20, 2);. If you want to have denser labels, you may set the tick density before the axis scaling code. For example:
cAxis.setTickDensity(25);
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by Peter Kwan on May-26-2012 02:47 |
|
Hi Chakri,
For your SQL statement, please print your actual statement out (eg. display it in the debugger). In this way, you can see the error in your SQL statement easily. Just by reading the code, I can see a potential error in the SQL statement. The "Where ...." is incorrect. It should be " Where ....".
Hope this can help.
Regards
Peter Kwan |
| Re: contour maps in browser |
| Posted by chakri on May-26-2012 04:36 |
|
Hi Peter,
Thanks for the support. My SQL statement is now working with the correction you made..
That was a silly mistake by me...By the way, dbdemo3.aspx displays yearly data and
dbdemo3a.aspx displays monthly data. How can i display quarterly data in between them?
And for the contour maps, when i used cAxis.setLinearScale(0, 20, 2); it worked even for
zoom in without change in color. My problem is to detect max value, min value in my dataZ
and pass them to cAxis.setLinearScale(); (example: cAxis.setLinearScale(minzval, maxzval,
interval);). How can i get those values from dataZ and pass.
And how can i have color legend for scattesurface.aspx also with the above mentioned
features...?
Thanks in advance,
chakri. |
| Re: contour maps in browser |
| Posted by Peter Kwan on May-29-2012 04:17 |
|
Hi chakri,
The dataZ comes from your code. So your code should know or should be able to find out the minzval and maxzval by examining dataZ.
If you do now want to find out the minzval and maxzval from your dataZ, you can use the method as mentioned in my previous message - in the first chart, use getMinValue and getMaxValue to save the color axis range, then in subsequent charts, use setLinearScale to restore the range.
In your code, you current have something like:
if ((viewer.GetCustomAttr("minY") == null) || (viewer.GetCustomAttr("minY") == "")) {
// The axis scale has not yet been set up. This means this is the first time the chart is
// drawn and it is drawn with no zooming. We can use auto-scaling to determine the
// axis-scales, then remember them for future use.
// explicitly auto-scale axes so we can get the axis scales
c.layout();
// save the axis scales for future use
viewer.SetCustomAttr("minX", c.xAxis().getMinValue());
viewer.SetCustomAttr("maxX", c.xAxis().getMaxValue());
viewer.SetCustomAttr("minY", c.yAxis().getMinValue());
viewer.SetCustomAttr("maxY", c.yAxis().getMaxValue());
//
//**** Save the color axis range for the first chart ****
//
viewer.SetCustomAttr("minC", cAxis.getMinValue());
viewer.SetCustomAttr("maxC", cAxis.getMaxValue());
} else {
//
//**** Restore the color axis range for subsequent chart ****
//
double minZ = double.Parse(viewer.GetCustomAttr("minC"));
double maxZ = double.Parse(viewer.GetCustomAttr("maxC"));
cAxis.setLinearScale(minZ, maxZ);
...........
}
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Peter Kwan)