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

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - Map - USA</title>
    <script type="text/javascript" src="~/Scripts/trirand/chart/corechart.min.js"></script>
    <script type="text/javascript" src="~/Scripts/trirand/chart/maps/usa.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></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",
                            Height = "500px",
                            Title = new List<Title>
                            {
                                new Title()
                                {
                                    Left = "Right",
                                    Text = "USA Po[pulation Estimates 2012",
                                    Subtext = "Data from www.census.gov'",
                                    Sublink = "'http://www.census.gov/popest/data/datasets.html"
                                }
                            },
                            Tooltip = new ToolTip
                            {
                                Trigger = TriggerType.Item,
                                ShowDelay = 0,
                                TransitionDuration = 0.2,

                                Formatter = new JRaw(@"function (params) {
                                                        var value = (params.value + '').split('.');
                                                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                                                        return params.seriesName + '<br/>' + params.name + ': ' + value;
                                                    }")
                            },
                            VisualMap = new VisualMap
                            {
                                Left = "right",
                                Min = 500000,
                                Max = 38000000,
                                //InRange = new List<string>
                                //{
                                //    "#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"
                                //},
                                Text = new List<string> { "High", "Low" },
                                Calculable = true

                            },
                            Toolbox = new ToolBox
                            {
                                Show = true,
                                Left = "left",
                                Top = "top",
                                Feature = new Feature
                                {
                                    DataView = new DataView {  ReadOnly = true},
                                    Restore = new Restore { },
                                    SaveAsImage = new FeatureImage { }
                                }
                            },
                            Series = new List<object>()
                            {
                                // series will be defined on the-client side after fetching the data from REST call
                                // see below for details
                                new Map
                                {
                                    Name = "USA PopEstimates",
                                    Roam = true,
                                    MapName = "usa",
                                    ItemStyle = new ItemStyle
                                    {
                                        Emphasis = new Emphasis { Label = new StyleLabel { Show = true } },
                                    },
                                    TextFixed = new List<List<double>>
                                    {
                                        new List<double>
                                        {
                                            20, -20
                                        }
                                    },
                                    Data = ViewData["data1"] as List<Data>

                                }
                            }
                        }
            , "myChart")
        )


        <script type="text/javascript">

          
               

                    //option = {
                    //    series: [{
                    //        name: "USA PopEstimates",
                    //        type: 'map',
                    //        roam: true,
                    //        map: 'USA',
                    //        itemStyle: {
                    //            emphasis: { label: { show: true } }
                    //        },
                    //        textFixed: {
                    //            Alaska: [20, -20]
                    //        },
                    //        data: [
                               
                    //        ]
                    //    }]
                    //};

                  

                    //myChart.setOption(option);
              

        </script>

        <br />
        <div>
             
        </div>
    </div>
</body>
</html>
using System.Web.Mvc;
using System.Collections.Generic;
using Trirand.Web.Mvc.Chart.Data;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult USA()
        {
            List<Data> data1 = new List<Data>
            {
                new Data { Name= "Alabama", Value= 4822023 },
                new Data { Name= "Alaska", Value= 731449 },
                new Data { Name= "Arizona", Value= 6553255 },
                new Data { Name= "Arkansas", Value= 2949131 },
                new Data { Name= "California", Value= 38041430 },
                new Data { Name= "Colorado", Value= 5187582 },
                new Data { Name= "Connecticut", Value= 3590347 },
                new Data { Name= "Delaware", Value= 917092 },
                new Data { Name= "District of Columbia", Value= 632323 },
                new Data { Name= "Florida", Value= 19317568 },
                new Data { Name= "Georgia", Value= 9919945 },
                new Data { Name= "Hawaii", Value= 1392313 },
                new Data { Name= "Idaho", Value= 1595728 },
                new Data { Name= "Illinois", Value= 12875255 },
                new Data { Name= "Indiana", Value= 6537334 },
                new Data { Name= "Iowa", Value= 3074186 },
                new Data { Name= "Kansas", Value= 2885905 },
                new Data { Name= "Kentucky", Value= 4380415 },
                new Data { Name= "Louisiana", Value= 4601893 },
                new Data { Name= "Maine", Value= 1329192 },
                new Data { Name= "Maryland", Value= 5884563 },
                new Data { Name= "Massachusetts", Value= 6646144 },
                new Data { Name= "Michigan", Value= 9883360 },
                new Data { Name= "Minnesota", Value= 5379139 },
                new Data { Name= "Mississippi", Value= 2984926 },
                new Data { Name= "Missouri", Value= 6021988 },
                new Data { Name= "Montana", Value= 1005141 },
                new Data { Name= "Nebraska", Value= 1855525 },
                new Data { Name= "Nevada", Value= 2758931 },
                new Data { Name= "New Hampshire", Value= 1320718 },
                new Data { Name= "New Jersey", Value= 8864590 },
                new Data { Name= "New Mexico", Value= 2085538 },
                new Data { Name= "New York", Value= 19570261 },
                new Data { Name= "North Carolina", Value= 9752073 },
                new Data { Name= "North Dakota", Value= 699628 },
                new Data { Name= "Ohio", Value= 11544225 },
                new Data { Name= "Oklahoma", Value= 3814820 },
                new Data { Name= "Oregon", Value= 3899353 },
                new Data { Name= "Pennsylvania", Value= 12763536 },
                new Data { Name= "Rhode Island", Value= 1050292 },
                new Data { Name= "South Carolina", Value= 4723723 },
                new Data { Name= "South Dakota", Value= 833354 },
                new Data { Name= "Tennessee", Value= 6456243 },
                new Data { Name= "Texas", Value= 26059203 },
                new Data { Name= "Utah", Value= 2855287 },
                new Data { Name= "Vermont", Value= 626011 },
                new Data { Name= "Virginia", Value= 8185867 },
                new Data { Name= "Washington", Value= 6897012 },
                new Data { Name= "West Virginia", Value= 1855413 },
                new Data { Name= "Wisconsin", Value= 5726398 },
                new Data { Name= "Wyoming", Value= 576412 },
                new Data { Name= "Puerto Rico", Value= 3667084 }
                
            };

            ViewData["data1"] = data1;

            return View("");
        }
    }
}