ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Clickable chart with gridview raw data.
Posted by Bill on Jul-24-2012 11:04
Hi peter,
   I want to have a clickable chart that when I click it, it will display the raw data on
gridview using c# asp.net code. It should be on the same page. Kindly send me the sample
code. Thanks in advance - bill

  Re: Clickable chart with gridview raw data.
Posted by Peter Kwan on Jul-25-2012 03:41
Hi Bill,

Would you mind to clarify your requirement in more details?

By "raw data", do you mean the data used to create the chart? By "clicking the chart", do you mean clicking a specific object in the chart (like clicking a bar), or clicking anywhere in the chart?

If you mean clicking a specific object in the chart (like a bar in a bar chart), then it just represents one value, and it is hard to see the advantage of displaying just a single value in a grid view. If you mean to display all data values in the grid view, that means it does not matter which object is clicked. It means the chart is just a big button, which when clicked, will cause a grid view to be displayed.

I do not really have any sample code on hand, but I can write some short code for you if you can help me understand your requirements.

Regards
Peter Kwan

  Re: Clickable chart with gridview raw data.
Posted by Bill on Jul-25-2012 05:50
By clicking specific bar graph. Let say x axis is the per week, when I click bargraph of week
29, I will display the week 29 raw data. This is list of records. The bar graph only represent
the total of these records. Can you send me the code on the part of clickable chart only? I
don't know how to create a control event in the clickable chart. Thanks again

  Re: Clickable chart with gridview raw data.
Posted by Peter Kwan on Jul-26-2012 03:43
Hi Bill,

If you would like to use "control events", you may use "viewer.GetPostBackURL()" as the url in getHTMLImageMap. In this way, when the user clicks on the hot spot (the bar), the browser will postback to the server. On the server side, the WebChartViewer.ClickHotSpot event will be fired.

For example, your image map can be configured like:

viewer.ImageMap = c.getHTMLImageMap(viewer.GetPostBackURL(), "", "title='{xLabel} = {value}'");

Then in the ClickHotSpot handler, it can be like:

private void WebChartViewer1_ClickHotSpot(object sender, ChartDirector.WebHotSpotEventArgs e)
{
      //Display the x-axis label of the clicked bar in a TextBox in the form
      TextBox1.Text = e["xLabel"];
}

In your real code, instead of using a TextBox, you can instead display the detail data in a grid view.

Hope this can help.

Regards
Peter Kwan

  Re: Clickable chart with gridview raw data.
Posted by Bill on Jul-26-2012 05:11
That is exactly what I need. Thanks again Peter for your help

  Re: Clickable chart with gridview raw data.
Posted by Bill on Aug-16-2012 13:09
Hi Peter,
   It doesn't return the xLabel value. Can you help me?

Thanks in advance - Bill

  Re: Clickable chart with gridview raw data.
Posted by Bill on Aug-17-2012 08:35
Hi Peter,
     Below is my code:

  WebChartViewer1.ImageMap = c.getHTMLImageMap(WebChartViewer1.GetPostBackURL(), "shift_no={xLabel}", "title='{xLabel} = {value}'");

private void WebChartViewer1_ClickHotSpot(object sender, ChartDirector.WebHotSpotEventArgs e)
        {
            lblDetails.Text = e["shift_no"];

        }


lblDetails.Text doesn't have value displayed though the graph has value.
Let me know what wrong in my code?

Thanks in advance - Bill

  Re: Clickable chart with gridview raw data.
Posted by Peter Kwan on Aug-18-2012 00:26
Attachments:
Hi Bill,

I have tried your exact code on the "Simple Bar Chart" sample code, and it works normally in my case. I have attached my test ASPX for your reference. May be you can try it to see if it works in your system.

If you do not see xLabel, is it possible the bar really has no xLabel? The xLabel refers to the corresponding label on the x-axis. Usually, in a bar chart, if the x-axis labels are added using Axis.setLabels or Axis.setLabels2, and no Layer.setXData is used, each bar should match exactly with an x-axis label. However, if Layer.setXData is used to position the bars, it is possible the bars are put in a position which has no x-axis label. For example, the x-axis labels are { "Apple", "Cars", "Zebra" }, and if the bar happens to be in between "Apple" and "Cars", it will have no x-axis label.

For objects positioned using setXData, the {x} (meaning the x-coordinates of the data point) may be more useful.

If the above still cannot solve the problem, is it possible to modify my sample code so as to reproduce the problem? I can then try the same code to see what is the cause of the issue.

Regards
Peter Kwan
simplebar.aspx
simplebar.aspx

1.61 Kb

  Re: Clickable chart with gridview raw data.
Posted by Bill on Aug-18-2012 05:12
It works already. I forgot to put onlick in aspx file. Thanks sgain peter