Usage.

May 23, 2013 at 9:18 PM
Edited May 23, 2013 at 9:20 PM
I am using the Visualization in an intranet project. Quite nice, and fairly easily implemented. Though, I'd like to be able to initialize click events through server code.

Example on a pie-chart there is a method to raise events but, I am not sure of the implementation.

Ex.: GVPieChart1.OnEvent_GviSelect

My assumption is that I should be able to plugin a created server method so, that clicked events will fire my public method:
GVPieChart1_Load(string param)
{
        string strSQL = @"
            SELECT 
            (
                CASE
                    WHEN SUM([Sale Amount])>0 THEN SUM([Sale Amount])
                    WHEN SUM([Sale Amount])<0 THEN 0
                END
            ) AS Sales, 
                [Customer Name] 
            FROM tblMonthToDateMachineSales  MTDS 
                LEFT OUTER JOIN tblStores s1 ON s1.storeid=MTDS.store 
            WHERE s1.storename='" + param + @"'
            GROUP BY [Customer Name]";
        SqlConnection conn = new SqlConnection(riggsconn);
        conn.Open();
        SqlCommand cmd = new SqlCommand(strSQL, conn);
        SqlDataReader sqlDataReader = cmd.ExecuteReader();
        System.Data.DataTable SalesDataTable = new System.Data.DataTable("General Sales");
        SalesDataTable.Columns.Add("Customer");
        SalesDataTable.Columns.Add("Monthly Total", typeof(int));
        while (sqlDataReader.Read())
        {
            if (!String.IsNullOrEmpty(sqlDataReader[0].ToString()))
            {
                SalesDataTable.Rows.Add(new object[] { sqlDataReader[1].ToString(), Convert.ToInt32(Math.Round(Convert.ToDecimal(sqlDataReader[0].ToString()), 0)) });
            }
        }
        this.GVPieChart1.ChartData(SalesDataTable);
        GVPieChart1.GviTitle = "My Chart Data";
        GVPieChart1.GviEnableEvents = true;
       //NEED TO CALL GVPICHART1_GVISELECTED WHEN PIE SLICE IS SELECTED
}

GVPieChart1_GviSelected (object sender, EventArgs e)
{
  //Redirect to new page and show new chart based on the selected value
  //with the getselect call
}
Coordinator
May 23, 2013 at 10:55 PM
Hi,

I haven't developed the charts to this level but I do support AJAX updates. I will be wiring up all the events within the next week or so. I will look into what it would take to support the ASP.NET event model.


Coordinator
May 31, 2013 at 7:04 PM
Hi All,

Just added javascript events to the charts and graphs. Download the latest on code.google.com

It took longer then expected but i think you will like the outcome. Should be possible to pass back user selections for all charts and graphs.

Here is an easy example.

<cc1:GVBarChart ID="GVBarChart3" runat="server" Width="600" Height="400" GviOnError="fnOnError" GviOnMouseout="fnOnOut" GviOnMouseover="fnOnOver" GviOnReady="fnOnReady" GviOnSelect="fnOnSelect"  />

           <script type="text/javascript" language="javascript">
            function fnOnError(id, msg) {
                try {
                    alert(chart_GVBarChartEvents.container.id + ' Error: ' + id + ' - ' + msg);
                }
                catch (err) {
                }
            }
            function fnOnOut(evt) {
                window.console && console.log(chart_GVBarChartEvents.container.id + ' mouse out at ' + evt.row + ':' + evt.column);
            }
            function fnOnOver(evt) {
                window.console && console.log(chart_GVBarChartEvents.container.id + ' mouse over at ' + evt.row + ':' + evt.column);
            }
            function fnOnReady() {
                window.console && console.log(chart_GVBarChartEvents.container.id + ' is ready!');
            }
             function fnOnSelect() {
                try {
                    var chart = chart_GVBarChartEvents;
                    var sel = chart.getSelection();
                    var dt = chart.getData();
                    alert('You selected col[' + sel[0].column + '], row[' + sel[0].row + ']' + 
                    '\nData: ' + dt.getColumnLabel(sel[0].column) + ' was ' + dt.getValue(sel[0].row, sel[0].column) 
                    + ' for ' + dt.getValue(sel[0].row, 0));
                }
                catch (err) {
                    alert('Oops!  OnSelect Error = ' + err);
                }
            }
        </script>