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

Message ListMessage List     Post MessagePost Message

  Click Simple Bar Chart
Posted by YY on Mar-21-2024 14:12

I made a simple example by referring to the Simple bar chart.

I expect that after the user clicks on the Bar chart, the BarLayer value can be increased by one.

Is it possible to do this?

Thank you.

1.62 Kb

  Re: Click Simple Bar Chart
Posted by Peter Kwan on Mar-22-2024 00:07
Hi YY,

I would simply configure the image map to postback to the server. In this way, clicking a bar is like clicking a pushbutton. See:

In the WebChartViewer.ClickHotSpot event, you can increment the data value.

In your original code, the chart is drawn in Page_Load. However, if the data can update, the chart needs to be drawn after handling the ClickHotSpot event. So I put the charting code in the PreRender phase.

For postback to work, you ASPX must contain a run at server form. It is like:

    <form runat="server">
        <chart:WebChartViewer id="WebChartViewer1" runat="server" OnClickHotSpot="WebChartViewer1_ClickHotSpot" OnPreRender="WebChartViewer1_PreRender" />

The code to draw the chart and increment the data are as follows:

protected void WebChartViewer1_PreRender(object sender, EventArgs e)
    if (ViewState["data"] == null)
        ViewState["data"] = 10.0;

    // The data for the bar chart
    double[] data = { (double)ViewState["data"] };

    // The labels for the bar chart
    string[] labels = { "Mon" };

    // Create a XYChart object of size 250 x 250 pixels
    XYChart c = new XYChart(120, 170);

    // Set the plotarea at (30, 20) and of size 200 x 200 pixels
    c.setPlotArea(25, 15, 75, 120);

    // Add a bar chart layer using the given data

    BarLayer layer = c.addBarLayer(data, 0xFFD700); //green 0x00FF00, yellow 0xFFD700, gray 0xC0C0C0, lightyellow 0xFFFFE0
    layer.setBarWidth(75); //長條圖寬度
    layer.setDataLabelStyle("Arial", 12).setAlignment(5); //顯示目前有幾片在中間

    // Set the labels on the x axis.

    c.yAxis().setDateScale(0, 20); //char範圍 min:0 max:20

    // Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.PNG);
    WebChartViewer1.ImageMap = c.getHTMLImageMap(WebChartViewer1.GetPostBackURL(), "", "title='{value} '");

protected void WebChartViewer1_ClickHotSpot(object sender, WebHotSpotEventArgs e)
    ViewState["data"] = (double)ViewState["data"] + 1;

Best Regards
Peter Kwan