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
| Reply | Monitor
Attachments:
Hi

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.
Simple.7z
Simple.7z
1.62 Kb

  Re: Click Simple Bar Chart
Posted by Peter Kwan on Mar-22-2024 00:07
| Reply | Monitor
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:

https://www.advsofteng.com/doc/cdnet.htm#WebChartViewer.GetPostBackURL.htm

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:

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

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.setRoundedCorners();
    layer.setDataLabelStyle("Arial", 12).setAlignment(5); //顯示目前有幾片在中間

    // Set the labels on the x axis.
    c.xAxis().setLabels(labels);

    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