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 DynamicMasterDetail()
        {
            return View();
        }      
    }
}

Controller Code

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

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

<script type="text/javascript">

    $(function () {
        $.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/usdeur.json', function (data) {
            var detailChart;

            $(document).ready(function () {

                // create the detail chart
                function createDetail(masterChart) {

                    // prepare the detail chart
                    var detailData = [],
                        detailStart = data[0][0];

                    $.each(masterChart.series[0].data, function () {
                        if (this.x >= detailStart) {
                            detailData.push(this.y);
                        }
                    });

                    // create a detail chart referenced by a global variable
                    detailChart = $('#detail-container').highcharts({
                        chart: {
                            marginBottom: 120,
                            reflow: false,
                            marginLeft: 50,
                            marginRight: 20,
                            style: {
                                position: 'absolute'
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        title: {
                            text: 'Historical USD to EUR Exchange Rate'
                        },
                        subtitle: {
                            text: 'Select an area by dragging across the lower chart'
                        },
                        xAxis: {
                            type: 'datetime'
                        },
                        yAxis: {
                            title: {
                                text: null
                            },
                            maxZoom: 0.1
                        },
                        tooltip: {
                            formatter: function () {
                                var point = this.points[0];
                                return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
                                    '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
                            },
                            shared: true
                        },
                        legend: {
                            enabled: false
                        },
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: false,
                                    states: {
                                        hover: {
                                            enabled: true,
                                            radius: 3
                                        }
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'USD to EUR',
                            pointStart: detailStart,
                            pointInterval: 24 * 3600 * 1000,
                            data: detailData
                        }],

                        exporting: {
                            enabled: false
                        }

                    }).highcharts(); // return chart
                }

                // create the master chart
                function createMaster() {
                    $('#master-container').highcharts({
                        chart: {
                            reflow: false,
                            borderWidth: 0,
                            backgroundColor: null,
                            marginLeft: 50,
                            marginRight: 20,
                            zoomType: 'x',
                            events: {

                                // listen to the selection event on the master chart to update the
                                // extremes of the detail chart
                                selection: function (event) {
                                    var extremesObject = event.xAxis[0],
                                        min = extremesObject.min,
                                        max = extremesObject.max,
                                        detailData = [],
                                        xAxis = this.xAxis[0];

                                    // reverse engineer the last part of the data
                                    $.each(this.series[0].data, function () {
                                        if (this.x > min && this.x < max) {
                                            detailData.push([this.x, this.y]);
                                        }
                                    });

                                    // move the plot bands to reflect the new detail span
                                    xAxis.removePlotBand('mask-before');
                                    xAxis.addPlotBand({
                                        id: 'mask-before',
                                        from: data[0][0],
                                        to: min,
                                        color: 'rgba(0, 0, 0, 0.2)'
                                    });

                                    xAxis.removePlotBand('mask-after');
                                    xAxis.addPlotBand({
                                        id: 'mask-after',
                                        from: max,
                                        to: data[data.length - 1][0],
                                        color: 'rgba(0, 0, 0, 0.2)'
                                    });


                                    detailChart.series[0].setData(detailData);

                                    return false;
                                }
                            }
                        },
                        title: {
                            text: null
                        },
                        xAxis: {
                            type: 'datetime',
                            showLastTickLabel: true,
                            maxZoom: 14 * 24 * 3600000, // fourteen days
                            plotBands: [{
                                id: 'mask-before',
                                from: data[0][0],
                                to: data[data.length - 1][0],
                                color: 'rgba(0, 0, 0, 0.2)'
                            }],
                            title: {
                                text: null
                            }
                        },
                        yAxis: {
                            gridLineWidth: 0,
                            labels: {
                                enabled: false
                            },
                            title: {
                                text: null
                            },
                            min: 0.6,
                            showFirstLabel: false
                        },
                        tooltip: {
                            formatter: function () {
                                return false;
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        credits: {
                            enabled: false
                        },
                        plotOptions: {
                            series: {
                                fillColor: {
                                    linearGradient: [0, 0, 0, 70],
                                    stops: [
                                        [0, Highcharts.getOptions().colors[0]],
                                        [1, 'rgba(255,255,255,0)']
                                    ]
                                },
                                lineWidth: 1,
                                marker: {
                                    enabled: false
                                },
                                shadow: false,
                                states: {
                                    hover: {
                                        lineWidth: 1
                                    }
                                },
                                enableMouseTracking: false
                            }
                        },

                        series: [{
                            type: 'area',
                            name: 'USD to EUR',
                            pointInterval: 24 * 3600 * 1000,
                            pointStart: data[0][0],
                            data: data
                        }],

                        exporting: {
                            enabled: false
                        }

                    }, function (masterChart) {
                        createDetail(masterChart);
                    })
                        .highcharts(); // return chart instance
                }

                // make the container smaller and add a second container for the master chart
                var $container = $('#container')
                    .css('position', 'relative');

                $('<div id="detail-container">')
                    .appendTo($container);

                $('<div id="master-container">')
                    .css({
                        position: 'absolute',
                        top: 300,
                        height: 100,
                        width: '100%'
                    })
                    .appendTo($container);

                // create master and in its callback, create the detail chart
                createMaster();
            });
        });
    });


</script>
© 2023 Highcharts. All rights reserved.