WebChart Client-Side Events CSOM

ClientOnChartScroll

The event fired when the chart scrollbar is clicked on.

Parameters

<dl>

<dt> oIGScrollbar </dt>

<dd>A reference to the IGScrollBar object.

---- //Called when the chart is scrolled. function UltraChart1_ClientOnChartScroll(oIGScrollBar) { // Value of scroll bar var value = oIGScrollBar.Value; // Height of scroll bar var height = oIGScrollBar.Height; // Width of scroll bar var width = oIGScrollBar.Width // Maximum value of scroll bar var maximum = oIGScrollBar.Maximum; // Minimum value of scroll bar var minimum = oIGScrollBar.Minimum; window.status = "Value:: " + value
" Height:: " + height
" Width:: " width " Maximum Value:: "maximum " Minimum Value:: "+minimum; }

ClientOnCrosshairMove

The event fired when the crosshair is moved over the chart.

Parameters

<dl>

<dt> x </dt>

<dd>The x-coordinate of the mouse location.</dd>

<dt> y </dt>

<dd>The y-coordinate of the mouse location.

---- // Called when the crosshair is moved around the chart function UltraChart1_ClientOnCrosshairMove(x, y){ // x coordinate of the crosshair var xValue = x; // y coordinate of the crosshair var yValue = y; window.status = "Crosshair at (" + xValue + ","yValue ")"; }

ClientOnShowCrosshair

The event fired when the crosshair is shown as a result of moving the mouse into the crosshair area.

Parameters

<dl>

<dt> x </dt>

<dd>The x-coordinate of the mouse location.</dd>

<dt> y </dt>

<dd>The y-coordinate of the mouse location.

---- // Called when the crosshair is displayed on chart function UltraChart1_ClientOnShowCrosshair(x, y){ var chartHtml = document.getElementById("UltraChart1"); // Set the HTML element that hosts the //chart’s background color to yellow chartHtml.style.backgroundColor = "yellow"; // x coordinate of the crosshair var xValue = x; // y coordinate of the crosshair var yValue = y; window.status = "Crosshair shown at (" + xValue + "," + yValue+")"; }

ClientOnHideCrosshair

The event fired when the crosshair is hidden as a result of moving the mouse out of the crosshair area.

Parameters

<dl>

<dt> x </dt>

<dd>The x-coordinate of the mouse location.</dd>

<dt> y </dt>

<dd>The y-coordinate of the mouse location.

---- // Called when the crosshair is hidden from the chart function UltraChart1_ClientOnHideCrosshair(x, y){ // x coordinate of the crosshair var xValue = x; // y coordinate of the crosshair var yValue = y; window.status = "Crosshair hidden at (" + xValue + "," + yValue+")"; }

ClientOnShowTooltip

The event fired when the tooltip is shown as a result of moving the mouse over of the tooltip area.

Parameters

<dl>

<dt> text </dt>

<dd>The current text value for the toolip.</dd>

<dt> tooltip_ref </dt>

<dd>A reference to the tooltip’s html element.

---- // Called when the tooltip is shown on the chart function UltraChart1_ClientOnShowTooltip(text, tooltip_ref){ // If tooltip value is less than 4, set the background color of the // tooltip to red, else set it to yellow if (text < 4) tooltip_ref.style.backgroundColor = "red"; else tooltip_ref.style.backgroundColor = "yellow"; // Enable the tooltip tooltip_ref.disabled = false; // Set the font properties of the tooltip tooltip_ref.style.fontFamily = "Arial"; tooltip_ref.style.fontSize = "14px"; tooltip_ref.style.fontWeight = "bold"; }

ClientOnHideTooltip

The event fired when the tooltip is hidden as a result of moving the mouse out of the tooltip area.

Parameters

<dl>

<dt> text </dt>

<dd>The current text value for the toolip.</dd>

<dt> tooltip_ref </dt>

<dd>A reference to the tooltip’s html element.

---- // Called when the tooltip is hidden function UltraChart1_ClientOnHideTooltip(text, tooltip_ref){ // Value of tooltip var tooltipValue = text; // Set the background color to red tooltip_ref.style.backgroundColor = "red"; // Disable the tooltip tooltip_ref.disabled = true; }

ClientOnMouseClick

The event fired when chart data is clicked.

Parameters

<dl>

<dt> this_ref </dt>

<dd>A reference to the IGUltraChart object in context.</dd>

<dt> row </dt>

<dd>The row number in context.</dd>

<dt> column </dt>

<dd>The column number in context.</dd>

<dt> value </dt>

<dd>The data value in context.</dd>

<dt> row_label </dt>

<dd>The row label in context.</dd>

<dt> column_label </dt>

<dd>The column label in context.</dd>

<dt> evt_type </dt>

<dd>The javascript event type in context.</dd>

<dt> layer_id </dt>

<dd>A unique identifier for the chart layer containing the data that was clicked.

---- // Called when the chart is clicked on function UltraChart1_ClientOnMouseClick(this_ref, row, column, value, row_label, column_label, evt_type, layer_id){ var chartHtml = document.getElementById("UltraChart1"); // If chart is clicked below row 2, the HTML element that hosts the //chart’s background color is changed tored if (row < 2) chartHtml.style.backgroundColor = "red"; // If value clicked is below 4, //the HTML element that hosts the //chart’s background color is changed to blue if (value < 4) chartHtml.style.backgroundColor = "blue"; // Enable Cross Hair when chart is clicked this_ref.EnableCrossHair = true; // Enable Tooltip fading when chart is clicked this_ref.EnableTooltipFading = true; // Display which row and column was clicked window.status = "Row Clicked:: "+ row_label
" Column Clicked:: "+ column_label; }

ClientOnMouseOut

The event fired when the mouse cursor moves out of charted data.

Parameters

<dl>

<dt> this_ref </dt>

<dd>A reference to the IGUltraChart object in context.</dd>

<dt> row </dt>

<dd>The row number in context.</dd>

<dt> column </dt>

<dd>The column number in context.</dd>

<dt> value </dt>

<dd>The data value in context.</dd>

<dt> row_label </dt>

<dd>The row label in context.</dd>

<dt> column_label </dt>

<dd>The column label in context.</dd>

<dt> evt_type </dt>

<dd>The javascript event type in context.</dd>

<dt> layer_id </dt>

<dd>A unique identifier for the chart layer containing the data that was clicked.

---- // Called when the mouse moves away from the chart data function UltraChart1_ClientOnMouseOut(this_ref, row, column, value, row_label, column_label, evt_type, layer_id){ // Disable Cross Hair when mouse moves away this_ref.EnableCrossHair = false; // Display which row and column the mouse moved away from window.status = "Row Mouse Out:: "+ row_label
" Column Mouse Out:: "+ column_label; }

ClientOnMouseOver

The event fired when the mouse cursor moves over charted data.

Parameters

<dl>

<dt> this_ref </dt>

<dd>A reference to the IGUltraChart object in context.</dd>

<dt> row </dt>

<dd>The row number in context.</dd>

<dt> column </dt>

<dd>The column number in context.</dd>

<dt> value </dt>

<dd>The data value in context.</dd>

<dt> row_label </dt>

<dd>The row label in context.</dd>

<dt> column_label </dt>

<dd>The column label in context.</dd>

<dt> evt_type </dt>

<dd>The javascript event type in context.</dd>

<dt> layer_id </dt>

<dd>A unique identifier for the chart layer containing the data that was clicked.

---- // Called when the mouse moves over chart data function UltraChart1_ClientOnMouseOver(this_ref, row, column, value, row_label, column_label, evt_type, layer_id) { // Enable the crosshair this_ref.EnableCrossHair = true; // Disable the tooltip this_ref.TooltipVisible = false; // Display which row and column the mouse is over window.status = "Mouse Over:: " + row_label
" Column Clicked:: " + column_label; }