Display Currency symbol in mixed (Bar and Line) Chart on ToolTip using ChartJS in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Sep 18, 2019 01:26 AM
Forum: AngularJS
Answer: 1
Views: 11315
Sample Code: Download

In y-axis-1 my data is like this : 160000, but I want to display it as 1,60,000

In y-axis-2 my data is like this: 9400000, but I want to display it as

₹94,00,000

I don't want chart legend

At the same time, when the line and bar chart interfere at a place, I want display the data with comma and INR symbols same as mentioned above.

<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css" /> 
<canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" width="281%" chart-colors="colors" chart-options="options" chart-dataset-override="datasetOverride" style="margin-top:12%"></canvas>

    //Mixed chart
    $scope.months = null;
    $http.get(apiUrl + "/api/Warehouse/GetMonthDetails")
   .then(function (response) {
       $scope.months = JSON.parse(response.data);
       $scope.options = {
           //multiTooltipTemplate: function (label) {
           //    return label.datasetLabel + ': ' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
           //},
           title: {
               display: true,
               text: 'Quantity v/s Value(in months)',
               fontSize: 18,
               position: 'bottom'
           },
           scales: {
               yAxes: [
                 {
                     id: 'y-axis-1',
                     type: 'linear',
                     display: true,
                     position: 'left'
                 },
                 {
                     id: 'y-axis-2',
                     type: 'linear',
                     display: true,
                     position: 'right'
                 }
               ]
           },
           type: 'horizontalBar'
       }
       $scope.colors = ['#00ADF9', '#949FB1'];
       $scope.labels = [];
       var qty = [];
       var value = [];
       for (var i = 0; i < $scope.months.length; i++) {
           if ($scope.months[i].Qty != 0 && $scope.months[i].Value != 0) {
               $scope.labels.push($scope.months[i].MonthName);
               qty.push($scope.months[i].Qty);
               value.push($scope.months[i].Value);
           }
       }
       $scope.data = [qty, value];
       $scope.datasetOverride = [
     {
         label: "Quantity",
         borderWidth: 1,
         type: 'bar',
         yAxisID: 'y-axis-1'
     },
     {
         label: "Value",
         borderWidth: 3,
         hoverBackgroundColor: "rgba(255,99,132,0.4)",
         hoverBorderColor: "rgba(255,99,132,1)",
         type: 'line',
         yAxisID: 'y-axis-2'
     }
       ];
   })

        [HttpGet]
        [ActionName("GetMonthDetails")]
        public string GetMonthWise()
        {
            SqlConnection myConnection = new SqlConnection();
            myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["ERPConnectionStringL"].ConnectionString;
            SqlCommand sqlCmd = new SqlCommand();
            sqlCmd.CommandType = CommandType.StoredProcedure;
            sqlCmd.CommandText = "REPORT_WH_DASHBOARD";
            sqlCmd.Connection = myConnection;
            SqlDataAdapter sda = new SqlDataAdapter(sqlCmd);
            DataSet ds = new DataSet();
            string jsonString = string.Empty;
            myConnection.Open();
            sda.Fill(ds);
            myConnection.Close();
            jsonString = JsonConvert.SerializeObject(ds.Tables[5]);
            return jsonString;
        }

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Sep 18, 2019 08:33 AM
Modified: on Sep 19, 2019 07:45 AM
Report

Hi skp,

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

For number format refer below link.

Intl.NumberFormat

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["chart.js"]);
        app.controller("MyController", function ($scope) {
            $scope.months = [];
            $scope.months.push({ MonthName: 'Jan', Qty: 1860000, Value: 1940000 });
            $scope.months.push({ MonthName: 'Feb', Qty: 1850000, Value: 1960000 });
            $scope.months.push({ MonthName: 'Mar', Qty: 1840000, Value: 1680000 });
            $scope.months.push({ MonthName: 'Apr', Qty: 1820000, Value: 1700000 });
            $scope.months.push({ MonthName: 'May', Qty: 1830000, Value: 1930000 });
            $scope.months.push({ MonthName: 'Jun', Qty: 1800000, Value: 1540000 });
            $scope.months.push({ MonthName: 'Jul', Qty: 1810000, Value: 1960000 });

            $scope.colors = ['#00ADF9', '#949FB1'];
            $scope.labels = [];
            var qty = [];
            var value = [];
            for (var i = 0; i < $scope.months.length; i++) {
                if ($scope.months[i].Qty != 0 && $scope.months[i].Value != 0) {
                    $scope.labels.push($scope.months[i].MonthName);
                    qty.push($scope.months[i].Qty);
                    value.push($scope.months[i].Value);
                }
            }
            $scope.data = [qty, value];
            var i = 0;
            $scope.options = {
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';

                            var datasetValueINR = new Intl.NumberFormat('en-IN', {
                                maximumSignificantDigits: 3,
                                style: 'currency',
                                currency: 'INR'
                            }).format(tooltipItem.yLabel);

                            var datasetValue = new Intl.NumberFormat('en-IN', {
                                maximumSignificantDigits: 3
                            }).format(tooltipItem.yLabel);

                            if (datasetLabel == 'Quantity') {
                                return datasetLabel + ' : ' + datasetValue;
                            } else if (datasetLabel == 'Value') {
                                return datasetLabel + ' : ' + datasetValueINR;
                            }
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Quantity v/s Value(in months)',
                    fontSize: 18,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        id: 'y-axis-1',
                        type: 'linear',
                        display: true,
                        position: 'left'
                    }, {
                        id: 'y-axis-2',
                        type: 'linear',
                        display: true,
                        position: 'right'
                    }]
                }
            }
            $scope.datasetOverride = [{
                label: "Quantity",
                borderWidth: 1,
                type: 'bar',
                yAxisID: 'y-axis-1'
            }, {
                label: "Value",
                borderWidth: 3,
                hoverBackgroundColor: "rgba(255,99,132,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                type: 'line',
                yAxisID: 'y-axis-2'
            }];
        });
    </script>
    <canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" width="281%"
        chart-colors="colors" chart-options="options" chart-dataset-override="datasetOverride"
        style="margin-top: 12%"></canvas>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display Currency symbol in mixed (Bar and Line) Chart on ToolTip using ChartJS in AngularJS

Company

Explore

Follow us

Contact Us