locked
annotations using highcharts in asp.net RRS feed

  • 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

  • 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
  • User-1971168174 posted

    Thanks a ton Ackerly! Magic :)

    Wednesday, September 12, 2018 12:07 PM