Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
375
Crosshair not working properly in composite webchart
posted

i have a composite chart. i have enabled cross hair. the problem i face is the cross hair does not goes when i move my mouse out of chart area.

Following is my code:

protected void Page_Load(object sender, EventArgs e)
    {
        ultraChart.ChartType = ChartType.Composite;
        ultraChart.EnableCrossHair = true;
 
 
        ChartArea myChartArea = new ChartArea();
        ultraChart.CompositeChart.ChartAreas.Add(myChartArea);
 
        AxisItem axisX = new AxisItem();
        axisX.OrientationType = AxisNumber.X_Axis;
        axisX.DataType = AxisDataType.String;
        axisX.SetLabelAxisType = SetLabelAxisType.GroupBySeries;
        axisX.Labels.ItemFormatString = "<ITEM_LABEL>";
        axisX.Labels.Orientation = TextOrientation.VerticalLeftFacing;
 
        AxisItem axisY = new AxisItem();
        axisY.OrientationType = AxisNumber.Y_Axis;
        axisY.DataType = AxisDataType.Numeric;
        axisY.Labels.ItemFormatString = "<DATA_VALUE:0.#>";
 
        myChartArea.Axes.Add(axisX);
        myChartArea.Axes.Add(axisY);
 
        NumericSeries seriesA = GetNumericSeriesBound();
        NumericSeries seriesB = GetNumericSeriesUnBound();
        ultraChart.CompositeChart.Series.Add(seriesA);
        ultraChart.CompositeChart.Series.Add(seriesB);
 
        ChartLayerAppearance myColumnLayer = new ChartLayerAppearance();
        myColumnLayer.ChartType = ChartType.ColumnChart;
        myColumnLayer.ChartArea = myChartArea;
        myColumnLayer.AxisX = axisX;
        myColumnLayer.AxisY = axisY;
        myColumnLayer.Series.Add(seriesA);
        myColumnLayer.Series.Add(seriesB);
        ultraChart.CompositeChart.ChartLayers.Add(myColumnLayer);
 
 
        CompositeLegend myLegend = new CompositeLegend();
        myLegend.ChartLayers.Add(myColumnLayer);
        myLegend.Bounds = new Rectangle(0, 75, 20, 25);
        myLegend.BoundsMeasureType = MeasureType.Percentage;
        myLegend.PE.ElementType = PaintElementType.Gradient;
        myLegend.PE.FillGradientStyle = GradientStyle.ForwardDiagonal;
        myLegend.PE.Fill = Color.CornflowerBlue;
        myLegend.PE.FillStopColor = Color.Transparent;
        myLegend.Border.CornerRadius = 10;
        myLegend.Border.Thickness = 0;
        ultraChart.CompositeChart.Legends.Add(myLegend);
 
    }
 
    private static DataTable GetData()
    {
        DataTable table = new DataTable();
        table.Columns.Add("Label Column"typeof(string));
        table.Columns.Add("Value Column"typeof(double));
        table.Columns.Add("Another Value Column"typeof(double));
        table.Rows.Add(new object[] { "Point A", 1.0, 3.0 });
        table.Rows.Add(new object[] { "Point B", 2.0, 2.0 });
        table.Rows.Add(new object[] { "Point C", 3.0, 1.0 });
        table.Rows.Add(new object[] { "Point D", 4.0, 2.0 });
        table.Rows.Add(new object[] { "Point E", 5.0, 3.0 });
        return table;
    }
 
    private static NumericSeries GetNumericSeriesBound()
    {
        NumericSeries series = new NumericSeries();
        series.Label = "Series A";
        // this code populates the series from an external data source
        DataTable table = GetData();
        series.Data.DataSource = table;
        series.Data.LabelColumn = "Label Column";
        series.Data.ValueColumn = "Value Column";
        return series;
    }
    private static NumericSeries GetNumericSeriesUnBound()
    {
        NumericSeries series = new NumericSeries();
        series.Label = "Series B";
        // this code populates the series using unbound data
        series.Points.Add(new NumericDataPoint(5.0, "Point A"false));
        series.Points.Add(new NumericDataPoint(4.0, "Point B"false));
        series.Points.Add(new NumericDataPoint(3.0, "Point C"false));
        series.Points.Add(new NumericDataPoint(2.0, "Point D"false));
        series.Points.Add(new NumericDataPoint(1.0, "Point E"false));
        return series;
    }



 

 

Parents
  • 49378
    Verified Answer
    posted

    Hi utkarsh_bandekar,

    Thank you for posting in the community.

    In order to ensure that the crosshair is hidden when you mouse out of you composite chart, I suggest that you handle the onload event of the body of your page. Here is a sample implementation for such a scenario:

    Code Snippet
    1. var igChart;
    2.  
    3. function load() {
    4.  
    5.     //on mouse out of the chart's container div, hide the crosshair
    6.     document.getElementById("UltraChart1").onmouseout = function() {
    7.         if(igChart!= null) {
    8.             igChart.iGCrossHair.Visible = false;
    9.             igChart.iGCrossHair.Update();
    10.         }
    11.     }
    12. }
    13.  
    14. function UltraChart1_ClientOnMouseOver(this_ref, row, column, value, row_label, column_label, evt_type, layer_id){
    15.     //get the chart object
    16.     igChart = this_ref;
    17. }

    Please let me know if this helps.

Reply Children