Populate Radar Chart from Database using jQuery ChartJS Plugin in ASP.Net MVC

Rockstar...

SOLVED CLOSED ACTIVE ANSWERED
User: Rockstar8
Posted: on Nov 12, 2018 11:16 PM
Forum: ASP.Net MVC
Answer: 1
Views: 7294
Sample Code: Download

Hi,

I have a radar chart.js how to connect this with database using MVC

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

  <script>
        window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(231,233,237)'
        };

        window.randomScalingFactor = function () {
            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
        }

        var randomScalingFactor = function () {
            return Math.round(Math.random() * 100);
        };

        var now = moment();
        var dataTime1 = moment("2016-12-18T14:58:54.026Z");
        var dataTime2 = moment("2017-01-18T20:58:54.026Z");
        var dataTime3 = moment("2017-02-15T08:58:54.026Z");
        var label1 = moment.duration(dataTime1.diff(now)).humanize(true);
        var label2 = moment.duration(dataTime2.diff(now)).humanize(true);
        var label3 = moment.duration(dataTime3.diff(now)).humanize(true);

        var color = Chart.helpers.color;
        var config = {
            type: 'radar',
            data: {
                labels: [
                    "Happiness", "Loneliness", "Health", "Managing at Home", "Finances", "Work", "Relationships", "Exercise", "Volunteer", "Attitude"],
                datasets: [{
                    label: label1,
                    backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.red,
                    pointBackgroundColor: window.chartColors.red,
                    data: [8, 1, 5, 2, 4, 10, 0, 0, 3],
                    notes: ["I am pretty happy", "I am isolated", "none", "none", "none", "none", "none", "none"]
                }, {
                    label: label2,
                    backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.blue,
                    pointBackgroundColor: window.chartColors.blue,
                    data: [10, 3, 4, 3, 5, 8, 7],
                    notes: ["Joined social club", "none", "none", "none", "none", "Was late one day", "Just broke up"]
                }, {
                    label: label3,
                    backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.purple,
                    pointBackgroundColor: window.chartColors.purple,
                    data: [0, 0, 1, 0, 0, 1, 0, 1, 2, 6],
                    notes: ["none", "none", "none", "none", "Won at bingo", "none", "none", "Leg week", "Fed the poor", "Positive Mental Attitude"]
                }]
            },
            options: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Outcome Graph'
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    }
                },
                tooltips: {
                    enabled: false,
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                            //This will be the tooltip.body
                            return datasetLabel + ': ' + tooltipItem.yLabel + ': ' + data.datasets[tooltipItem.datasetIndex].notes[tooltipItem.index];
                        }
                    },
                    custom: function (tooltip) {
                        // Tooltip Element
                        var tooltipEl = document.getElementById('chartjs-tooltip');
                        if (!tooltipEl) {
                            tooltipEl = document.createElement('div');
                            tooltipEl.id = 'chartjs-tooltip';
                            tooltipEl.innerHTML = "<table></table>"
                            document.body.appendChild(tooltipEl);
                        }
                        // Hide if no tooltip
                        if (tooltip.opacity === 0) {
                            tooltipEl.style.opacity = 0;
                            return;
                        }
                        // Set caret Position
                        tooltipEl.classList.remove('above', 'below', 'no-transform');
                        if (tooltip.yAlign) {
                            tooltipEl.classList.add(tooltip.yAlign);
                        } else {
                            tooltipEl.classList.add('no-transform');
                        }
                        function getBody(bodyItem) {
                            return bodyItem.lines;
                        }
                        // Set Text
                        if (tooltip.body) {
                            var titleLines = tooltip.title || [];
                            var bodyLines = tooltip.body.map(getBody);
                            var innerHtml = '<thead>';
                            titleLines.forEach(function (title) {
                                innerHtml += '<tr><th>' + title + '</th></tr>';
                            });
                            innerHtml += '</thead><tbody>';
                            bodyLines.forEach(function (body, i) {
                                var colors = tooltip.labelColors[i];
                                var style = 'background:' + colors.backgroundColor;
                                style += '; border-color:' + colors.borderColor;
                                style += '; border-width: 2px';
                                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                                innerHtml += '<tr><td>' + span + body + '</td></tr>';
                            });
                            innerHtml += '</tbody>';
                            var tableRoot = tooltipEl.querySelector('table');
                            tableRoot.innerHTML = innerHtml;
                        }
                        var position = this._chart.canvas.getBoundingClientRect();
                        // Display, position, and set styles for font
                        tooltipEl.style.opacity = 1;
                        tooltipEl.style.left = position.left + tooltip.caretX + 'px';
                        tooltipEl.style.top = position.top + tooltip.caretY + 'px';
                        tooltipEl.style.fontFamily = tooltip._fontFamily;
                        tooltipEl.style.fontSize = tooltip.fontSize;
                        tooltipEl.style.fontStyle = tooltip._fontStyle;
                        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
                    }
                }
            }
        };
        window.onload = function () {
            window.myRadar = new Chart(document.getElementById("canvas"), config);
        };
        var colorNames = Object.keys(window.chartColors);

    </script>

<style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        #chartjs-tooltip {
            opacity: 1;
            position: absolute;
            background: rgba(0, 0, 0, .7);
            color: white;
            border-radius: 3px;
            -webkit-transition: all .1s ease;
            transition: all .1s ease;
            pointer-events: none;
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        #chartjs-radar {
            width: 40%;
            height: 40%;
        }

        .chartjs-tooltip-key {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 10px;
        }
    </style>

<body>
    <div id="chartjs-radar">
        <canvas id="canvas"></canvas>
    </div>
</body>

table stucture

ChartId ChartFields xaxisval   
1   Prev year       2  
2   Prev year       3  
3   Prev year       5  
4   Prev year       7  
5   Prev year       8  
6   Prev year       9  
7   Current year    1  
8   Current year    3  
9   Current year    5  
10  Current year    7  
11  Current year    8  
12  Current year    9  
13  Final year      1  
14  Final year      3  
15  Final year      5  
16  Final year      7  
17  Final year      8  
18  Final year      9

Thanks,

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Nov 13, 2018 05:36 AM
Modified: on Nov 16, 2018 02:00 AM
Report

Hi Rockstar8,

Check this example. Now please take its reference and correct your code.

Model

public class ChartModel
{
    public string[] labels { get; set; }
    public List<DataSets> dataSets { get; set; } 
}

public class DataSets
{
    public string label { get; set; }
    public string[] backgroundColor { get; set; }
    public string[] borderColor { get; set; }
    public string borderWidth { get; set; }
    public int[] data { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
    public JsonResult ChartData()
    {
        ChartModel charts = new ChartModel();
        // Fetch the DataTable from DataBase.
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[3] { 
                        new System.Data.DataColumn("ChartId", typeof(int)),
                        new System.Data.DataColumn("ChartFields", typeof(string)),
                        new System.Data.DataColumn("xaxisval",typeof(int)) });
        dt.Rows.Add(1, "Prev year", 2);
        dt.Rows.Add(2, "Prev year", 3);
        dt.Rows.Add(3, "Prev year", 5);
        dt.Rows.Add(4, "Prev year", 7);
        dt.Rows.Add(5, "Prev year", 8);
        dt.Rows.Add(6, "Prev year", 9);
        dt.Rows.Add(7, "Current year", 1);
        dt.Rows.Add(8, "Current year", 3);
        dt.Rows.Add(9, "Current year", 5);
        dt.Rows.Add(10, "Current year", 7);
        dt.Rows.Add(11, "Current year", 8);
        dt.Rows.Add(12, "Current year", 9);
        dt.Rows.Add(13, "Final year", 1);
        dt.Rows.Add(14, "Final year", 3);
        dt.Rows.Add(15, "Final year", 5);
        dt.Rows.Add(16, "Final year", 7);
        dt.Rows.Add(17, "Final year", 8);
        dt.Rows.Add(18, "Final year", 9);

        charts.labels = (from p in dt.AsEnumerable() select p.Field<string>("ChartFields")).Distinct().ToArray();

        List<string> chartFields = (from p in dt.AsEnumerable() select p.Field<string>("ChartFields")).Distinct().ToList();
        List<DataSets> dataSets = new List<DataSets>();
        foreach (string chartField in chartFields)
        {
            int[] x = (from p in dt.AsEnumerable()
                        where p.Field<string>("ChartFields") == chartField
                        select p.Field<int>("xaxisval")).ToArray();
            dataSets.Add(new DataSets()
            {
                label = chartField,
                data = x,
                borderWidth = "1"
            });
        }

        charts.dataSets = dataSets;
        return Json(charts, JsonRequestBehavior.AllowGet);
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        canvas
        {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "Home/ChartData",
                method: "GET",
                success: function (data) {
                    var color = [
                                "rgba(241,28,39,0.1)",
                                "rgba(28,145,241,0.1)",
                                "rgba(231,221,28,0.1)",
                                "rgba(38,231,28,0.1)",
                                "rgba(28,231,221,0.1)",
                                "rgba(231,228,211,0.1)",
                                "rgba(3,1,3,0.1)",
                                "rgba(236,176,179,0.1)",
                                "rgba(239,107,51,0.1)",
                                "rgba(157,51,239,0.1)",
                                "rgba(16,82,248,0.1)",
                                "rgba(241,28,39,0.1)"];

                    ChartData = {};
                    ChartData.labels = data.labels;
                    ChartData.datasets = [];
                    for (index = 0; index < data.dataSets.length; index++) {
                        ChartData.datasets.push({});
                        dataset = ChartData.datasets[index];
                        dataset.backgroundColor = color[index];
                        dataset.borderColor = color[index];
                        dataset.label = data.dataSets[index].label;
                        dataset.data = [];
                        ChartData.datasets[index].data = data.dataSets[index].data;
                    }

                    var ctx = $("#canvas");
                    var options = {
                        responsive: true,
                        maintainAspectRadio: true,
                        legend: { position: 'top' },
                        title: { display: true, text: 'Chart.js Outcome Graph' },
                        scale: { ticks: { beginAtZero: true} },
                        tooltips: {
                            enable: false,
                            mode: 'label',
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                                    return datasetLabel + ' : ' + tooltipItem.yLabel;
                                }
                            }
                        },
                        scaleOverride: false,
                        scaleSteps: 5,
                        scaleStepWidth: 20,
                        scaleStartValue: 100
                    };

                    var myRadar = new Chart(ctx, {
                        type: 'radar',
                        data: ChartData,
                        options: options
                    });
                },
                error: function (data) { alert(response.responseText); }
            });
        });
    </script>
</head>
<body>
    <div id="chartjs-radar">
        <canvas id="canvas" width="400" height="150"></canvas>
    </div>
</body>
</html>

Screenshot

Populate Radar Chart from Database using jQuery ChartJS Plugin in ASP.Net MVC

Company

Explore

Follow us

Contact Us