Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Project Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
Highcharts .NET 
  • Highcharts .NET
  • Highstock .NET
Demos 
  • Demos
  • API
  • Docs
  • See on NuGet
  • Download 
  • Demo
  • API
  • Docs
  • See on NuGet
  • Download 
Highcharts .NET
 Highcharts  Highstock
  • Line charts
    • Basic line
    • Ajax loaded data, clickable points
    • With data labels
    • With annotations
    • Time series, zoomable
    • Spline with inverted axes
    • Spline with symbols
    • Spline with plot bands
    • Time data with irregular intervals
    • Logarithmic axis
  • Area charts
    • Basic area
    • Area with negative values
    • Stacked area
    • Percentage area
    • Area with missing points
    • Inverted axes
    • Area-spline
    • Area range
    • Area range and line
    • Sparkline charts
    • Streamgraph
  • Column and bar charts
    • Basic bar
    • Stacked bar
    • Bar with negative stack
    • Basic column
    • Column with negative values
    • Stacked column
    • Stacked and grouped column
    • Stacked percentage column
    • Column with rotated labels
    • Column with drilldown
    • Fixed placement columns
    • Data defined in a HTML table
    • Column range
  • Pie charts
    • Pie chart
    • Pie with legend
    • Semi circle donut
    • Pie with drilldown
    • Pie with gradient fill
    • Pie with monochrome fill
  • Scatter and bubble charts
    • Scatter plot
    • Bubble chart
    • 3D bubbles
  • Dynamic charts
    • Spline updating each second
    • Click to add a point
    • Master-detail chart
  • Combinations
    • Dual axes, line and column
    • Multiple axes
    • Scatter with regression line
    • Advanced timeline
  • 3D charts
    • 3D column
    • 3D column with null and 0 values
    • 3D column with stacking and grouping
    • 3D pie
    • 3D donut
    • 3D scatter chart
  • Gauges
    • Angular gauge
    • Activity gauge
    • Clock
    • Gauge with dual axes
    • VU meter
    • Bullet graph
  • Heat and tree maps
    • Heat map
    • Large heat map
    • Tile map, honeycomb
    • Tree map with color axis
    • Tree map with levels
    • Large tree map
  • More chart types
    • Polar chart
    • Spiderweb
    • Wind rose
    • Box plot
    • Error bar
    • Waterfall
    • Funnel chart
    • Pyramid chart
    • Polygon series
    • General drawing
list

Controller Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult LineAjax()
        {
            return View();
        }

               
    }
}

Controller Code

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering

<script type="text/javascript">

    function loadAjaxData() {
        $.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/analytics.csv', function (csv) {
            var visitorData = new Array();
            var uniquesData = new Array();
            var index = csv.indexOf("Sessions") + 9;
            var data = csv.substring(index, csv.length);

            var dataArray = data.split("\n");

            for (var i = 0; i < dataArray.length - 1; i++) {
                var value = dataArray[i];

                var splitArray = value.split(",\"");
                var entry = {
                    x: new Date(splitArray[0]),
                    y: parseFloat(splitArray[1].slice(0, -1).replace(",", ""))
                }


                var uniqueEntry = {
                    x: new Date(splitArray[0]),
                    y: parseFloat(splitArray[2].slice(0, -1).replace(",", ""))
                }

                visitorData.push(entry);
                uniquesData.push(uniqueEntry);
            }

            Highcharts.charts[0].series[0].setData(visitorData, true);
            Highcharts.charts[0].series[1].setData(uniquesData, true);

            window.setTimeout(function () { Highcharts.charts[0].redraw(); }, 500);
        });
    }

    function handleClick(e) {
        console.log(e.point);

        hs.htmlExpand(null, {
            pageOrigin: {
                x: e.pageX || e.clientX,
                y: e.pageY || e.clientY
            },
            headingText: this.name,
            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', e.point.x) + ':<br/> ' +
                e.point.y + ' visits',
            width: 200
        });
    }

</script>

@{ var chartOptions =
       new Highcharts
       {
           Chart = new Highsoft.Web.Mvc.Charts.Chart
           {
              //Events = new ChartEvents
              //{
              //    Load = "loadAjaxData"
              //},
              Type = ChartType.Line
           },
           Data = new Data
           {
               CsvURL = "https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/analytics.csv",
               BeforeParse = "function beforeParse(csv) { return csv.replace(/\n\n/g, '\n' ); }"
           },
           Title = new Title
           {
               Text = "Daily visits at www.highcharts.com"
           },
           Subtitle = new Subtitle
           {
               Text = "Source: Google Analytics"
           },
           XAxis = new List<XAxis>
                  {
                   new XAxis
                   {
                       Type = "datetime",
                       TickInterval = 7 * 24 * 3600 * 1000, // one week
                       TickWidth = 0,
                       GridLineWidth = 1,
                       Labels = new XAxisLabels
                       {
                           Align = XAxisLabelsAlign.Left,
                           X = 3,
                           Y = -3
                       },
                       Crosshair = new XAxisCrosshair
                       {
                           Width = 1
                       }
                   }
                                  },
           YAxis = new List<YAxis>
                  {
                   new YAxis
                   {

                       Labels = new YAxisLabels
                       {
                           Align = YAxisLabelsAlign.Left,
                           X = 3,
                           Y = 16,
                           Format = "{value:.,0f}"
                       },
                       ShowFirstLabel = false
                   },
                   new YAxis
                   {
                       LinkedTo = 0,
                       GridLineWidth = 0,
                       Opposite = true,

                       Labels = new YAxisLabels
                       {
                           Align = YAxisLabelsAlign.Right,
                           X = 3,
                           Y = 16,
                           Format = "{value:.,0f}"
                       },
                       ShowFirstLabel = false
                   }
                                  },
           Legend = new Legend
           {
               Align = LegendAlign.Left,
               VerticalAlign = LegendVerticalAlign.Top,
               Y = 20,
               Floating = true,
               BorderWidth = 0
           },
           Tooltip = new Tooltip
           {
               Shared = true
           },
           PlotOptions = new PlotOptions
           {
               Series = new PlotOptionsSeries
               {
                   Cursor = PlotOptionsSeriesCursor.Pointer,
                   Events = new PlotOptionsSeriesEvents
                   {
                       Click = "handleClick"
                   },
                   Marker = new PlotOptionsSeriesMarker
                   {
                       LineWidth = 1
                   }
               }
           },
           Series = new List<Series>
                  {
                   new LineSeries
                   {
                       Color = "black",
                       Name = "All Visit",
                       LineWidth = 4,
                       Marker = new LineSeriesMarker
                       {
                           Radius = 4
                       }
                   },
                   new LineSeries
                   {
                       Name = "New Visitors"
                   }
                                  }
       };

    chartOptions.ID = "chart";
    var renderer = new HighchartsRenderer(chartOptions);
}

@Html.Raw(renderer.RenderHtml())

© 2023 Highcharts. All rights reserved.