FlexChart

FlexChart

Annotation

This page shows how to display annotations on FlexChart.

Features

Basic

The sample below shows basic usage of AnnotationLayer and various built-in types of Annotations, including: Circle, Ellipse, Image, Line, Polygon, Rectangle, Square and Text.
You can use attachment attribute to set different attach types of annotation.

Advanced

The sample below shows how to display annotations easily on a FlexChart to show comments and useful information about data points on the plot area itself.

Description

This page shows how to display annotations on FlexChart.

AnnotationController.cs Annotation.cshtml

using System; 
using Microsoft.AspNetCore.Mvc; 
using MvcExplorer.Models; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class FlexChartController : Controller 
    { 
        public ActionResult Annotation() 
        { 
            ViewBag.BasicData = BasicSale.GetBasicSales(); 
            ViewBag.FbData = JsonDataReader.GetFromAssembly<FinanceData>("fb.json"); 
            return View(); 
        } 
    } 
} 

@using System.Drawing 
@model IEnumerable<BasicSale> 
@{ 
    List<BasicSale> basicData = ViewBag.BasicData; 
    List<FinanceData> fbData = ViewBag.FbData; 
    var circleTooltip = FlexChartRes.Annotation_CircleTooltip; 
    var squareTooltip = FlexChartRes.Annotation_SquareTooltip; 
    var lineTooltip = FlexChartRes.Annotation_LineTooltip; 
    var textTooltip = FlexChartRes.Annotation_TextTooltip; 
    var ellipseTooltip = FlexChartRes.Annotation_EllipseTooltip; 
    var rectTooltip = FlexChartRes.Annotation_RectTooltip; 
    var imageTooltip = FlexChartRes.Annotation_ImageTooltip; 
    var polygonTooltip = FlexChartRes.Annotation_PolygonTooltip; 
    var circleStyle = new SVGStyle { Fill = "#e6e6e6", Stroke = "#7b9e7e", StrokeWidth=2 }; 
    var squareStyle = new SVGStyle { Fill = "#e6e6e6", Stroke = "#918254", StrokeWidth = 2 }; 
    var lineStyle = new SVGStyle { Stroke = "#01A9DB", StrokeWidth = 4 }; 
    var textStyle = new SVGStyle { Fill = "#bbbbbb", FontSize = 26 }; 
    var ellipseStyle = new SVGStyle { Fill = "#e6e6e6", Stroke = "#c2955f", StrokeWidth = 2 }; 
    var rectStyle = new SVGStyle { Fill = "#e6e6e6", Stroke = "#937f99", StrokeWidth = 2 }; 
    var polygonStyle = new SVGStyle { Fill = "#fff", Stroke = "#01A9DB", StrokeWidth = 4 }; 
} 
  
@section Styles{ 
    <link rel="stylesheet" href="~/Content/css/AdvancedAnnotation.css" /> 
} 
  
@section Scripts{ 
    <script src="~/Scripts/AxisScrollbar.js"></script>
    <script src="~/Scripts/advancedAnnotation.js"></script>
} 
  
<h2>@Html.Raw(FlexChartRes.Annotation_Basic)</h2> 
<p>@Html.Raw(FlexChartRes.Annotation_Text0)</p> 
<c1-flex-chart binding-x="Date"> 
    <c1-items-source source-collection="basicData"></c1-items-source> 
    <c1-flex-chart-series binding="Sale" chart-type="Line"> 
    </c1-flex-chart-series> 
    <c1-annotation-layer> 
        <c1-annotation-circle attachment="DataIndex"
                              radius="40" offset="new PointF(0, -15)"
                              point-index="33" content="@FlexChartRes.Annotation_CircleContent"
                              tooltip="@circleTooltip" style="circleStyle"> 
        </c1-annotation-circle> 
        <c1-annotation-square attachment="DataIndex"
                              length="80" offset="new PointF(0, -15)"
                              point-index="45" content="@FlexChartRes.Annotation_SquareContent"
                              tooltip="@squareTooltip" style="squareStyle"> 
        </c1-annotation-square> 
        <c1-annotation-line start="new DataPoint(50, 150)" end="new DataPoint(240, 350)"
                            tooltip="@lineTooltip" style="lineStyle" content="@FlexChartRes.Annotation_LineContent"> 
        </c1-annotation-line> 
        <c1-annotation-text attachment="Relative"
                            point="new DataPoint(0.55, 0.15)" content="@FlexChartRes.Annotation_TextContent"
                            tooltip="@textTooltip" style="textStyle"> 
        </c1-annotation-text> 
        <c1-annotation-ellipse attachment="Relative"
                               width="100" height="80" content="@FlexChartRes.Annotation_EllipseContent"
                               point="new DataPoint(0.4, 0.5)"
                               tooltip="@ellipseTooltip" style="ellipseStyle"> 
        </c1-annotation-ellipse> 
        <c1-annotation-rectangle attachment="DataCoordinate"
                                 point="new DataPoint(new DateTime(2014, 2, 11), 30)"
                                 content="@FlexChartRes.Annotation_RectangleContent" tooltip="@rectTooltip" style="rectStyle"> 
        </c1-annotation-rectangle> 
        <c1-annotation-image attachment="DataCoordinate"
                             href="@Url.Content("~/Content/images/c1icon.png")"
                             point="new DataPoint(new DateTime(2014, 1, 26), 30)"
                             width="80" height="80" tooltip="@imageTooltip"> 
        </c1-annotation-image> 
        <c1-annotation-polygon tooltip="@polygonTooltip" style="polygonStyle" content="@FlexChartRes.Annotation_PolygonContent"> 
            <c1-data-point x="200" y="0"></c1-data-point> 
            <c1-data-point x="150" y="50"></c1-data-point> 
            <c1-data-point x="175" y="100"></c1-data-point> 
            <c1-data-point x="225" y="100"></c1-data-point> 
            <c1-data-point x="250" y="50"></c1-data-point> 
        </c1-annotation-polygon> 
    </c1-annotation-layer> 
</c1-flex-chart> 
  
@{ 
    var waterMarkerStyle = new SVGStyle 
    { 
        Fill = "#N45f04", 
        FillOpacity = 0.1, 
        Stroke = "rgba(124,240,10,0.2)", 
        FontSize = 60 
    }; 
    var trendLineStyle = new SVGStyle 
    { 
        Fill = "#FF0040", 
        Stroke = "#3ADF00", 
        StrokeWidth = 1, 
        StrokeOpacity = 0.5 
    }; 
    var eventStyle = new SVGStyle { Fill = "#01DFD7", Stroke = "#000" }; 
    var detailStyle = new SVGStyle { Fill = "#CCCC00", Stroke = "#0B2F3A", StrokeOpacity = 0.4 }; 
    var detailTextStyle = new SVGStyle { Fill = "#6E6E6E", FontSize = 12 }; 
    var startLineStyle = new SVGStyle { Fill = "#000", Stroke = "#000", StrokeWidth = 1 }; 
    var tradeRangeStyle = new SVGStyle 
    { 
        Fill = "#669999", 
        Stroke = "#B40431", 
        FillOpacity = 0.2, 
        StrokeWidth = 1, 
        StrokeOpacity = 0.1 
    }; 
    var news = FlexChartRes.Annotation_News; 
} 
  
<h2>@Html.Raw(FlexChartRes.Annotation_Advanced)</h2> 
<p>@Html.Raw(FlexChartRes.Annotation_Text1)</p> 
<c1-flex-chart id="anChart" class="anchart" chart-type="Line" binding-x="X"> 
    <c1-items-source source-collection="fbData"></c1-items-source> 
    <c1-flex-chart-series binding="Close" name="Close" chart-type="Line"></c1-flex-chart-series> 
    <c1-flex-chart-series binding="Volume" name="Volumn" chart-type="Column"> 
        <c1-flex-chart-axis c1-property="AxisY" max="fbData[0].Volume*8" labels="false"
                            major-tick-marks="None" axis-line="false"> 
        </c1-flex-chart-axis> 
    </c1-flex-chart-series> 
    <c1-flex-chart-axis c1-property="AxisX" axis-line="false" format="MM/dd/yy"> 
    </c1-flex-chart-axis> 
    <c1-flex-chart-axis c1-property="AxisY" position="Right"> 
    </c1-flex-chart-axis> 
    <c1-annotation-layer id="AnnotationLayer"> 
        <c1-annotation-text content="componentone.com" attachment="Relative"
                            name="waterMarker" point="new DataPoint(0.5,0.5)" style="waterMarkerStyle"> 
        </c1-annotation-text> 
        <c1-annotation-line name="trendLine1" attachment="DataCoordinate" style="trendLineStyle"
                            start="new DataPoint(new DateTime(2014, 5, 8), 64)" end="new DataPoint(new DateTime(2014, 9, 8), 84)"
                            position="Center"> 
        </c1-annotation-line> 
        <c1-annotation-line name="trendLine2" attachment="DataCoordinate" style="trendLineStyle"
                            start="new DataPoint(new DateTime(2014, 5, 8), 56)" end="new DataPoint(new DateTime(2014, 9, 8), 76)"
                            position="Center"> 
        </c1-annotation-line> 
        <c1-annotation-rectangle name="eventa" offset="new PointF(0, -10)" attachment="DataIndex"
                                 content="E" width="20" height="20" point-index="73" series-index="0"
                                 tooltip="@FlexChartRes.Annotation_Tooltip1" style="eventStyle"> 
        </c1-annotation-rectangle> 
        <c1-annotation-rectangle name="eventb" offset="new PointF(0, 10)" attachment="DataIndex"
                                 content="E" width="20" height="20" point-index="124" series-index="0" style="eventStyle"
                                 tooltip="@FlexChartRes.Annotation_Tooltip2"> 
        </c1-annotation-rectangle> 
        <c1-annotation-rectangle name="eventc" offset="new PointF(0, -10)" attachment="DataIndex"
                                 content="E" width="20" height="20" point-index="202" series-index="0" style="eventStyle"
                                 tooltip="@FlexChartRes.Annotation_Tooltip3"> 
        </c1-annotation-rectangle> 
        <c1-annotation-rectangle name="eventd" offset="new PointF(0, -20)" attachment="DataIndex"
                                 content="E" width="20" height="20" point-index="235" series-index="0" style="eventStyle"
                                 tooltip="@FlexChartRes.Annotation_Tooltip4"> 
        </c1-annotation-rectangle> 
        <c1-annotation-square name="detailContainer" length="110" is-visible="false" point="new DataPoint(55,55)" style="detailStyle"> 
        </c1-annotation-square> 
        <c1-annotation-text name="detailLow" position="Center" point="new DataPoint(52, 20)" style="detailTextStyle"> 
        </c1-annotation-text> 
        <c1-annotation-text name="detailHigh" position="Center" point="new DataPoint(52, 40)" style="detailTextStyle"> 
        </c1-annotation-text> 
        <c1-annotation-text name="detailOpen" position="Center" point="new DataPoint(52, 60)" style="detailTextStyle"> 
        </c1-annotation-text> 
        <c1-annotation-text name="detailClose" position="Center" point="new DataPoint(52, 80)" style="detailTextStyle"> 
        </c1-annotation-text> 
        <c1-annotation-text name="detailVolume" position="Center" point="new DataPoint(52, 100)" style="detailTextStyle"> 
        </c1-annotation-text> 
        <c1-annotation-line name="startLine" attachment="DataCoordinate" style="startLineStyle" tooltip="Previous close"
                            start="new DataPoint(new DateTime(2014, 4, 10), 59.16)" end="new DataPoint(new DateTime(2016, 4, 10), 59.16)"> 
        </c1-annotation-line> 
        <c1-annotation-image name="dividea" offset="new PointF(0, -20)" width="20" height="20" attachment="DataIndex"
                             point-index="42" series-index="1" href="@Url.Content("~/Content/images/divide.png")" tooltip="Dividend"> 
        </c1-annotation-image> 
        <c1-annotation-image name="divideb" offset="new PointF(0, -10)" width="20" height="20" attachment="DataIndex"
                             point-index="73" series-index="1" href="@Url.Content("~/Content/images/divide.png")" tooltip="Dividend"> 
        </c1-annotation-image> 
        <c1-annotation-image name="dividec" offset="new PointF(0, -10)" width="20" height="20" attachment="DataIndex"
                             point-index="92" series-index="1" href="@Url.Content("~/Content/images/divide.png")" tooltip="Dividend"> 
        </c1-annotation-image> 
        <c1-annotation-image name="divided" offset="new PointF(0, -10)" width="20" height="20" attachment="DataIndex"
                             point-index="142" series-index="1" href="@Url.Content("~/Content/images/divide.png")" tooltip="Dividend"> 
        </c1-annotation-image> 
        <c1-annotation-image name="dividee" offset="new PointF(0, -10)" width="20" height="20" attachment="DataIndex"
                             point-index="202" series-index="1" href="@Url.Content("~/Content/images/divide.png")" tooltip="Dividend"> 
        </c1-annotation-image> 
        <c1-annotation-rectangle name="tradeRange" offset="new PointF(0,-80)" attachment="DataCoordinate"
                                 width="465" height="430" point="new DataPoint(new DateTime(2014, 11, 26), 70)" style="tradeRangeStyle"> 
        </c1-annotation-rectangle> 
        <c1-annotation-text name="newsa" position="Center" attachment="DataCoordinate"
                            content="@(FlexChartRes.Annotation_Content1)" point="new DataPoint(new DateTime(2015, 3, 2), 80)"
                            offset="new PointF(0, 25)"> 
        </c1-annotation-text> 
        <c1-annotation-image name="newsaMarker" offset="new PointF(0, -10)" point="new DataPoint(new DateTime(2015, 3, 2), 80)"
                             href="@Url.Content("~/Content/images/flag.png")" attachment="DataCoordinate"
                             width="14" height="24" tooltip="@news"> 
        </c1-annotation-image> 
        <c1-annotation-text name="newsb" position="Center" attachment="DataCoordinate"
                            content="@FlexChartRes.Annotation_Content2" point="new DataPoint(new DateTime(2014, 7, 8), 62)"> 
        </c1-annotation-text> 
        <c1-annotation-image name="newsbMarker" offset="new PointF(7, -20)" point="new DataPoint(new DateTime(2014, 7, 8), 62)"
                             href="@Url.Content("~/Content/images/flag.png")" attachment="DataCoordinate"
                             width="14" height="24"> 
        </c1-annotation-image> 
        <c1-annotation-text name="trendDesc" position="Center" attachment="DataCoordinate"
                            content="@FlexChartRes.Annotation_Content3" point="new DataPoint(new DateTime(2014, 5, 8), 64)"
                            style="new SVGStyle {FontSize=20}" offset="new PointF(0, -30)"> 
        </c1-annotation-text> 
        <c1-annotation-image name="buyAnno" offset="new PointF(0, 15)" width="24" height="24" tooltip="Bid: $73.59"
                             attachment="DataCoordinate" point="new DataPoint(new DateTime(2014, 10, 14), 73)"
                             href="@Url.Content("~/Content/images/up.png")"> 
        </c1-annotation-image> 
        <c1-annotation-image name="cellAnno" offset="new PointF(0, -10)" width="24" height="24" tooltip="Bid: $73.59"
                             attachment="DataCoordinate" point="new DataPoint(new DateTime(2015, 1, 8), 73)"
                             href="@Url.Content("~/Content/images/down.png")"> 
        </c1-annotation-image> 
    </c1-annotation-layer> 
</c1-flex-chart> 
@section Description{ 
    @Html.Raw(FlexChartRes.Annotation_Text2) 
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Annotation

Features

Basic

Advanced

Description