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

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - Scatter Bubble Gradient</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
            {
                Width = "900px",
                BackgroundColor = new JRaw(@"new coreCharts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0, color: '#f7f8fa' }, { offset: 1, color: '#cdd0d5' }])"),
                Title = new List<Title>
                {
                    new Title()
                    {
                        Text = "1995 - 2005 GDP"
                    }
                },
                Legend = new Legend()
                {
                    Right = 10,
                    Data = new List<string>() { "1990", "2005" }
                },
                XAxis = new List<Axis>()
                {
                    new ChartAxis<object>()
                    {
                        SplitLine = new SplitLine()
                        {
                            LineStyle = new LineStyle
                            {
                                Type = LineStyleType.Dashed
                            }
                        }
                    }
                },
                YAxis = new List<Axis>()
                {
                    new ChartAxis<object>()
                    {
                        SplitLine = new SplitLine()
                        {
                            LineStyle = new LineStyle
                            {
                                Type = LineStyleType.Dashed
                            }
                        },
                        Scale = true
                    }
                },
                Series = new List<Series>()
                {
                    new Scatter
                    {
                        Name = "1990",
                        Data = ViewData["data1"] as List<List<object>>,
                        SymbolSize =  new JRaw(@"function (data) {
                                                    return Math.sqrt(data[2]) / 5e2;
                                                }"),
                        Label = new ItemStyle
                        {
                            Emphasis = new Emphasis
                            {
                                Show = true,
                                Formatter = new JRaw(@"function (param) {
                                                    return param.data[3];
                                                }"),
                                Position = "top"
                            }

                        },
                        ItemStyle = new ItemStyle
                        {
                            Normal = new Normal
                            {
                                ShadowBlur = 10,
                                ShadowColor = "rgba(120, 36, 50, 0.5)",
                                ShadowOffsetY = 5,
                                Color = new JRaw(@"new coreCharts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                                    offset: 0,
                                                    color: 'rgb(251, 118, 123)'
                                                }, {
                                                    offset: 1,
                                                    color: 'rgb(204, 46, 72)'
                                                }])")
                            }
                        }
                    },
                    new Scatter
                    {
                        Name = "2005",
                        Data = ViewData["data2"] as List<List<object>>,
                        SymbolSize =  new JRaw(@"function (data) {
                                                    return Math.sqrt(data[2]) / 5e2;
                                                }"),
                        Label = new ItemStyle
                        {
                            Emphasis = new Emphasis
                            {
                                Show = true,
                                Formatter = new JRaw(@"function (param) {
                                                    return param.data[3];
                                                }"),
                                Position = "top"
                            }

                        },
                        ItemStyle = new ItemStyle
                        {
                            Normal = new Normal
                            {
                                ShadowBlur = 10,
                                ShadowColor = "rgba(25, 100, 150, 0.5)",
                                ShadowOffsetY = 5,
                                Color = new JRaw(@"new coreCharts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                                        offset: 0,
                                                        color: 'rgb(129, 227, 238)'
                                                    }, {
                                                        offset: 1,
                                                        color: 'rgb(25, 183, 207)'
                                                    }])")
                            }
                        }
                    }
                }
            }
            , "Chart")
        )

        <br />
        <div>
            
        </div>
    </div>
</body>
</html>

using System.Web.Mvc;
using System.Collections.Generic;
using Trirand.Web.Mvc.Chart;
using Trirand.Web.Mvc.Chart.ChartAxis;
using Trirand.Web.Mvc.Chart.Series;
using Trirand.Web.Mvc.Chart.Style;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult BubbleGradient()
        {
            
            List<List<object>> data1 = new List<List<object>>
            {
                new List<object> { 44056, 81.8, 23968973, "Australia", 2015 },
                new List<object> {31163, 77.4, 27662440, "Canada", 1990}, new List<object> {1516, 68, 1154605773, "China", 1990},
                new List<object> {13670, 74.7, 10582082, "Cuba", 1990}, new List<object> {28599, 75, 4986705, "Finland", 1990},
                new List<object> {29476, 77.1, 56943299, "France", 1990}, new List<object> {31476, 75.4, 78958237, "Germany", 1990},
                new List<object> {28666, 78.1, 254830, "Iceland", 1990}, new List<object> {1777, 57.7, 870601776, "India", 1990},
                new List<object> {29550, 79.1, 122249285, "Japan", 1990}, new List<object> {2076, 67.9, 20194354, "North Korea", 1990},
                new List<object> {12087, 72, 42972254, "South Korea", 1990}, new List<object> {24021, 75.4, 3397534, "New Zealand", 1990},
                new List<object> {43296, 76.8, 4240375, "Norway", 1990}, new List<object> {10088, 70.8, 38195258, "Poland", 1990},
                new List<object> {19349, 69.6, 147568552, "Russia", 1990}, new List<object> {10670, 67.3, 53994605, "Turkey", 1990},
                new List<object> {26424, 75.7, 57110117, "United Kingdom", 1990}, new List<object> {37062, 75.4, 252847810, "United States", 1990}
            };

            List<List<object>> data2 = new List<List<object>>
            {
                new List<object> { 44056, 81.8, 23968973, "Australia", 2015}, new List<object> { 43294, 81.7, 35939927, "Canada", 2015},
                new List<object> { 13334, 76.9, 1376048943, "China", 2015}, new List<object> { 21291, 78.5, 11389562, "Cuba", 2015},
                new List<object> { 38923, 80.8, 5503457, "Finland", 2015}, new List<object> { 37599, 81.9, 64395345, "France", 2015},
                new List<object> { 44053, 81.1, 80688545, "Germany", 2015}, new List<object> { 42182, 82.8, 329425, "Iceland", 2015},
                new List<object> { 5903, 66.8, 1311050527, "India", 2015}, new List<object> { 36162, 83.5, 126573481, "Japan", 2015},
                new List<object> { 1390, 71.4, 25155317, "North Korea", 2015}, new List<object> { 34644, 80.7, 50293439, "South Korea", 2015},
                new List<object> { 34186, 80.6, 4528526, "New Zealand", 2015}, new List<object> { 64304, 81.6, 5210967, "Norway", 2015},
                new List<object> { 24787, 77.3, 38611794, "Poland", 2015}, new List<object> { 23038, 73.13, 143456918, "Russia", 2015},
                new List<object> { 19360, 76.5, 78665830, "Turkey", 2015}, new List<object> { 38225, 81.4, 64715810, "United Kingdom", 2015},
                new List<object> { 53354, 79.1, 321773631, "United States", 2015}
            };

            ViewData["data1"] = data1;
            ViewData["data2"] = data2;

            return View("");
        }
    }
}