Looking for assistance in implementing Chart.js within a modal popup

Question

Looking for assistance in implementing Chart.js within a modal popup

Here's a Chart-generated diagram:

<div class="diagram">
<canvas id="pie" class="chart chart-pie" width="150" height="150" data="ModalObj.FunctionalTest" labels="labels" colours="Colours">
</canvas>

This is a directive:

.directive('modal', function () {
    return {
        template: '<ng-include src="getTemplateUrl()"/>',
        restrict: 'E',
        controller: function($scope) {
            //function used on the ng-include to resolve the template
            $scope.getTemplateUrl = function() {
                return $scope.path;
            }
        }
    }});

In addition, I need to include the diagram in a modal if the template URL requires it; not all templates make use of the chart.

javascript angularjs twitter-bootstrap charts

Answer 1

Answer №1

DEMO: Visit this link for a demo

HTML:

<div ng-app="myApp">
    <!-- Button to trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
              <elem-modal></elem-modal>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</div>

JS:

var app = angular.module('myApp', []);
app.directive('elemModal', function () {
    return {
        template: '<p>Test</p><ng-include src="getTemplateUrl()"/>',
        restrict: 'E',
        controller: function($scope) {
            //function used on the ng-include to resolve the template
            $scope.getTemplateUrl = function() {
                return $scope.path;
            }
        },
        link: function (scope) {
            console.log(scope)
        }
    }});

Answer 2

DEMO: Visit this link for a demo

HTML:

<div ng-app="myApp">
    <!-- Button to trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
              <elem-modal></elem-modal>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</div>

JS:

var app = angular.module('myApp', []);
app.directive('elemModal', function () {
    return {
        template: '<p>Test</p><ng-include src="getTemplateUrl()"/>',
        restrict: 'E',
        controller: function($scope) {
            //function used on the ng-include to resolve the template
            $scope.getTemplateUrl = function() {
                return $scope.path;
            }
        },
        link: function (scope) {
            console.log(scope)
        }
    }});

Looking for assistance in implementing Chart.js within a modal popup

Answer №1

Similar questions

Tips for utilizing the find function with nested documents in MongoDB in conjunction with Next.js?

The content of the text does not align. Alert in React 16

AngularJS version 1.2.0 is experiencing an issue where the $http service is not properly sending requests

Adjust the position of elements based on their individual size and current position

Highlighting a row upon being clicked

Navigating to a specific page based on the selected option is the key to efficient web browsing

What could be the reason for receiving a Firebase INVALID_DYNAMIC_LINK_DOMAIN error message?

What is the best way to extract data from a JavaScript object received from multer?

The setTimeout function executes immediately without any delay

Encountering an issue while sending JSON data to a WebAPI that contains an image in bytes format - Receiving an error message stating: "The expression is too long or

Using webpack with the production parameter

Ways to rearrange div elements using JavaScript

Learn how to display a web page in a tab view similar to the toggle device toolbar option

Exploring techniques to compare two objects in JavaScript and then dynamically generate a new object with distinct values

Error encountered in React JS: Anticipated input was "CALC", "dimension", "number", but received unexpected end of input. CompileError originates from undefined CSS selector

javascript/node Struggle with JSON parsing

Error: Material UI search bar doesn't refresh interface

Encountering an issue in Next.js when using getStaticProps: reading 'map' of undefined properties

Is there a way to implement this media query within my JavaScript code?

When navigating back in Next.js, the URL changes but the content remains the same