using Microsoft.AspNetCore.Http;
using System.Collections.Generic;
using Trirand.Web.Core.Chart;
using Trirand.Web.Core.Chart.ChartAxis;
using Trirand.Web.Core.Chart.ChartFeature;
using Trirand.Web.Core.Chart.Series;
using Trirand.Web.Core.Chart.Style;

namespace CoreDemo.Models
{
    public class CarSales
    {   
        public CoreChart CarChart { get; set; }

        public CarSales()
        {
            CarChart = new CoreChart
            {
                Width = "950px",
                Height = "500px",
                Title = new List<Title>
                {
                    new Title { Text = "2000-2016 USA Car Sales" }
                },
                Tooltip = new ToolTip
                {
                    Trigger = TriggerType.Axis
                },
                Toolbox = new ToolBox
                {
                    Feature = new Feature
                    {
                        DataView = new DataView { Show = true, ReadOnly = false },
                        Restore = new Restore { Show = true },
                        SaveAsImage = new FeatureImage { Show = true }
                    }
                },
                Grid = new List<Grid>
                {
                    new Grid { ContainLabel = true }
                },
                Legend = new Legend
                {
                    Data = new List<string> { "Growth Rate", "Sales" }
                },
                XAxis = new List<Axis>
                {
                    new CategoryAxis
                    {
                        AxisTick = new AxisTick { AlignWithLabel = true }
                    }
                },
                YAxis = new List<Axis>
                {
                    new ValueAxis
                    {
                        Name = "Growth Rate",
                        Min = 0,
                        Max = 50,
                        Position = "right",
                        AxisLabel = new AxisLabel { Formatter = "{value} %"}
                    },
                    new ValueAxis
                    {
                        Name = "Sales",
                        Min = 0,
                        Max = 3000,
                        Position = "left"
                    }
                },
                Series = new List<object>
                {
                    new Line
                    {
                        Name = "Growth Rate",
                        Stack = "Total",
                        Label = new ItemStyle { Normal = new Normal { Show = true, Position = "top"} },
                        LineStyle = new ItemStyle
                        {
                            Normal = new Normal
                            {
                                Width= 3,
                                ShadowColor= "rgba(0,0,0,0.4)",
                                ShadowBlur= 10,
                                ShadowOffsetY= 10
                            }
                        }
                    },
                    new Bar
                    {
                        Name = "Sales",
                        Stack = "Total",
                        YAxisIndex = 1,
                        Label = new ItemStyle { Normal = new Normal { Show = true, Position = "top"} }                       
                    }
                }
            };
        }
    }
}
@using Trirand.Web.Core
@using Trirand.Web.Core.Chart;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chart for ASP.NET Core - Mixed Chart - Car Sales USA</title>
    <script type="text/javascript" src="~/js/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(
            ViewData["CarChartModel"] as CoreChart,                       
            "Chart")
        )

        <br />
        <div>
            @await Component.InvokeAsync("CodeTabs", new { product = "chart", example = "mixed/carsales" })
        </div>
    </div>
</body>
</html>

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using CoreDemo.Models;
using Trirand.Web.Core.Chart;
using Trirand.Web.Core.Chart.Series;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        [Route("chart/mixed/carsales")]
        public ActionResult CarSales()
        {
            List<string> xAxisData = new List<string> { "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016" };
            List<int> data1 = new List<int> { 1, 13, 37, 35, 15, 13, 25, 21, 6, 45, 32, 2, 4, 13, 6, 4, 11 };
            List<int> data2 = new List<int> { 209, 236, 325, 439, 507, 576, 722, 879, 938, 1364, 1806, 1851, 1931, 2198, 2349, 2460, 2735 };


            CoreChart carChartModel = new CarSales().CarChart;
            carChartModel.XAxis[0].Data = xAxisData;

            List<object> series = (List<object>)carChartModel.Series;
            Line lineSeries = (Line)series[0];
            Bar barSeries = (Bar)series[1];

            lineSeries.Data = data1;
            barSeries.Data = data2;

            ViewData["CarChartModel"] = carChartModel;

            return View("~/Views/Chart/Mixed/CarSales.cshtml");
        }
    }
}