@using Trirand.Web.Mvc
@using Trirand.Web.Mvc.Chart;
@using Newtonsoft.Json.Linq;
@using Trirand.Web.Mvc.Chart.ChartAxis;
@using Trirand.Web.Mvc.Chart.Style;
@using Trirand.Web.Mvc.Chart.Series;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - Multiple X Axis</title>  
    <script type="text/javascript" src="~/Scripts/trirand/chart/corechart.min.js"></script>
</head>
<body>
    <div>
        <!--
        The Html.Trirand().CoreChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in 
        the controller based on runtime criteria and database data and pass the model 
        to the View using ViewData
        -->
        @(Html.Trirand().CoreChart(
            new CoreChart
            {
                Height = "600px",
                Width = "900px",
                Color = new List<string> { "#5793f3", "#d14a61", "#675bba" },
                Title = new List<Title>
                {
                    new Title()
                    {
                        Left = "center",
                        Text = "Log Lines"
                    }
                },
                Tooltip = new ToolTip
                {
                    Trigger = TriggerType.None,
                    AxisPointer = new AxisPointer
                    {
                        Type = AxisPointType.Cross
                    }
                },
                Legend = new Legend
                {
                    Top = "5%",
                    Data = new List<string> { "2015 Precipitation", "2016 Precipitation" }
                },
                Grid = new List<Grid>
                {
                    new Grid
                    {
                        Top = 70,
                        Bottom = 50
                    }
                },
                XAxis = new List<Axis>()
                {
                    new CategoryAxis()
                    {
                        Data = new object[12] {"2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"},
                        AxisTick = new AxisTick
                        {
                            AlignWithLabel = true
                        },
                        AxisLine = new AxisLine
                        {
                            OnZero = false,
                            LineStyle = new LineStyle
                            {
                                Color =  "#d14a61"
                            }
                        },
                        AxisPointer = new AxisPointer
                        {
                            Label = new AxisLabel
                            {
                                Formatter = new JRaw(@"function (params) {
                                return 'Precipitation  ' + params.value
                                + (params.seriesData.length ? ':' + params.seriesData[0].data : '');}"),
                            }
                        }
                    },
                    new CategoryAxis()
                    {
                        Data = new object[12] { "2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"},
                        AxisTick = new AxisTick
                        {
                            AlignWithLabel = true
                        },
                        AxisLine = new AxisLine
                        {
                            OnZero = false,
                            LineStyle = new LineStyle
                            {
                                Color =  "#5793f3"
                            }
                        },
                        AxisPointer = new AxisPointer
                        {
                            Label = new AxisLabel
                            {
                                Formatter = new JRaw(@"function (params) {
                                return 'Precipitation  ' + params.value
                                + (params.seriesData.length ? ':' + params.seriesData[0].data : '');}"),
                            }
                        }
                    }
            },
            YAxis = new List<Axis>()
            {
                new ValueAxis()
                {
                }
            },

            Series = new List<object>()
            {
                new Line()
                {
                    Name = "2015 Precipitation",
                    Data = new List<double> { 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3},
                    Smooth = true,
                    XAxisIndex = 1,

                },
                new Line()
                {
                    Name = "2016 Precipitation",
                    Data = new List<double> { 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3},
                    Smooth = true,
                    XAxisIndex = 1
                }
            }
        }
        , "Chart")
    )
             
        <br />
        <div>
             
        </div>
    </div>
</body>
</html>

using System.Web.Mvc;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult MultipleXAxis()
        {
            return View("");
        }
    }
}