Remove From My Forums

annotations using highcharts in asp.net

Question

User-1971168174 posted

Hi,

Can someone help me in modifying below script to show annotations.

Category is x-axis,total points is y axis. I need to show mydata passes as annotations for some points

Thanks!

aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="post.aspx.cs" Inherits="post" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
     <input type="hidden" runat="server"  id="hdn_v1"  />

     <input type="hidden" runat="server"  id="hdn_Data" />
    <script>
        $(document).ready(function () {
            debugger;
            var options = {
                chart: {
                    zoomType: 'x',

                    renderTo: 'container',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Spiritual Gifts Results'
                },

                colors: [
                    '#3BBEE3'
                ],
                xAxis: {

                    categories: [],
                    labels: {
                        rotation: 90,
                        align: 'top'
                        //y:100,
                    },
                },

                yAxis: {
                    max: 260,
                    min: 250,
                    title: {
                        text: 'Service'
                    },
                    plotLines: [{

                        color: '#FF0000',
                        dashStyle: 'ShortDash',
                        width: 2,
                        value: 255,
                        zIndex: 0,
                        label: {
                            text: 'UCL'
                        }
                    }, {
                        color: '#008000',
                        dashStyle: 'ShortDash',
                        width: 2,
                        value: 251,
                        zIndex: 0,
                        label: {
                            text: 'LCL'
                        }
                    }
                    ]

                },

                series: []
            };

            var data = document.getElementById("hdn_Data");
            // var data = "Categories,A'\n'Total Points,251,'\n',mydata,'hello1'";
            // Split the lines
            if (data.value != "") {
                var lines = data.value.split('\n');

                // Iterate over the lines and add categories or series
                $.each(lines, function (lineNo, line) {
                    var items = line.split(',');
                    // header line containes categories
                    if (lineNo == 0) {
                        $.each(items, function (itemNo, item) {
                            if (itemNo > 0) options.xAxis.categories.push(item);
                        });
                    }
                    else if (lineNo == 2) {
                        $.each(items, function (itemNo, item) {
                            options.series.toString(item)
                        });
                    }

                        // the rest of the lines contain data with their name in the first position
                    else {
                        var series = {
                            data: []
                        };
                        $.each(items, function (itemNo, item) {

                            var data = {};
                            if (itemNo == 0) {
                                series.name = item;
                            } else {
                                data.y = parseFloat(item);

                                if (item <= hdn_v1.value) {
                                    data.color = 'Red';
                                }
                                else {
                                    data.color = '#3BBEE3';

                                }
                                series.data.push(data);

                            }
                        });
                        options.series.push(series);
                        debugger;
                    }
                });

                // Create the chart
                var chart1 = new Highcharts.Chart(options);
            }
        });</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div>
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </div>
    </div>
    </form>
</body>
</html>

c# Code: Category is x-axis,total points is y axis. I need to show annotations for some points

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class post : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            hdn_v1.Value = "255";
           
            hdn_Data.Value = "Categories,A,B,C" + "'\n'" + "Total Points,251,253,254" + "'\n'" + "mydata,'annotation1','annotation1','no annotation'";
            // hdn_Data.Value = "Categories,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,p,q,r,s,t,u,v,w,x,y,z" + "'\n'" + "Total Points,199,253,252,253,344,251,259,252,253,233,222,121,234,123,123,187,182,183,184,185,186,187,188,189,190,199,253,252,253,344,251,259,252,253,233,222,121,234,123,123,187,182,183,184,185,186,187,188,189,190";
            
        }
    }
}

Tuesday, September 11, 2018 10:42 AM

Answers

User-893317190 posted

Hi neerajkumarmodi,

You could use highcharts's annotations module to help you.

Below is my code. Please don't forget to import annotations.js before you use it.

 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  
         <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

    
    <script>
        $(document).ready(function () {
          
            var options = {
                chart: {
                   
                    zoomType: 'x',

                    renderTo: 'container',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Spiritual Gifts Results'
                },
                annotations: [{
        labelOptions: {
            backgroundColor: 'rgba(255,255,255,1)',
            verticalAlign: 'top',
          
            align: 'right',
            justify: false,
            crop: true,
            style: {
                fontSize: '0.8em',
                textOutline: '1px white'
            },
            y: 15,
            x: 100
           
        },
                    labels: [
                       
                    ]
    
    }],

                colors: [
                    '#3BBEE3'
                ],
                xAxis: {
                   tickInterval: 1,
        gridLineWidth: 1,
                    categories: [],
                    labels: {
                       // rotation: 90,
                        align: 'top'
                        //y:100,
                    },
                },

                yAxis: {
                  
                    max: 260,
                    min: 250,
                    title: {
                        text: 'Service'
                    },
                    plotLines: [{

                        color: '#FF0000',
                        dashStyle: 'ShortDash',
                        width: 2,
                        value: 255,
                        zIndex: 0,
                        label: {
                            text: 'UCL'
                        }
                    }, {
                        color: '#008000',
                        dashStyle: 'ShortDash',
                        width: 2,
                        value: 251,
                        zIndex: 0,
                        label: {
                            text: 'LCL'
                        }
                    }
                    ]

                },

                series: [
              
                ]
            };

            var data = document.getElementById("hdn_Data");
           
            if (data.value != "") {
                var lines = data.value.split('\n');

                // Iterate over the lines and add categories or series
                $.each(lines, function (lineNo, line) {
                    var items = line.split(',');
                    // header line containes categories
                    if (lineNo == 0) {
                        $.each(items, function (itemNo, item) {
                            if (itemNo > 0) options.xAxis.categories.push(item);
                        });
                    }
                    else if (lineNo == 2) {
                        $.each(items, function (itemNo, item) {
                            if (itemNo > 0) {
                                 var obj = {
                            point: {
                                    //x means the index of category
                                x: itemNo-1,   
                                     // y means the yAxis of you point 
                                y: options.series[0].data[itemNo - 1].y,
                                xAxis: 0,
                             yAxis: 0
                                },
                            text: ""
                            }
                            
                            obj.text = item;


                            options.annotations[0].labels.push(obj);
                            }
                           
                        });
                    }

                        // the rest of the lines contain data with their name in the first position
                    else {
                        var series = {
                            data: []
                        };
                        $.each(items, function (itemNo, item) {

                            var data = {};
                            if (itemNo == 0) {
                                series.name = item;
                            } else {
                                data.y = parseFloat(item);

                                if (item <= hdn_v1.value) {
                                    data.color = 'Red';
                                }
                                else {
                                    data.color = '#3BBEE3';

                                }
                                series.data.push(data);

                            }
                        });
                        options.series.push(series);
                      
                    
                    }
                });

                // Create the chart
                var chart1 = new Highcharts.Chart(options);
            }
        });</script>



</head>
<body>
    <form id="form1" runat="server">
        <div>
             <input type="hidden" runat="server"  id="hdn_v1"  />

     <input type="hidden" runat="server"  id="hdn_Data" />
    <div>
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </div>
    </div>
    </form>
</body>

The result.

For more information about annotations , please refert to https://api.highcharts.com/highcharts/annotations

Best regards,

Ackerly Xu

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, September 12, 2018 8:17 AM

All replies