Choose a chart from the dropdown menu and showcase it

Question

Choose a chart from the dropdown menu and showcase it

I am facing a challenge in displaying two charts using a dropdown menu. I have attempted to achieve this using both JQuery and AngularJS, but I am encountering difficulties in making it work properly.

There are two charts that need to be displayed:

<div  ng-controller="ExampleCtrl">
    <nvd3-discrete-bar-chart
            data="exampleData"
            id="exampleId"
            width="800"
            height="400"
            tooltips="true"
            showXAxis="true"
            showYAxis="true">
        <svg></svg>
    </nvd3-discrete-bar-chart>

    <nvd3-discrete-bar-chart
            data="exampleData2"
            id="exampleId2"
            width="800"
            height="400"
            tooltips="true"
            showXAxis="true"
            showYAxis="true">
        <svg></svg>
    </nvd3-discrete-bar-chart>    
</div>

I intend to use a dropdown menu to toggle between the charts.

<select id="leave" onchange="leaveChange()">
  <option value="1">Second</option>
  <option value="2">First</option>

</select>

The function for selecting the chart is as follows:

function leaveChange() {
    if (document.getElementById("leave").value != "1"){
 document.getElementById("test").data="exampleData2";
    }     
    else{
        document.getElementById("test").data="exampleData";
    }        
}

If you prefer using Jquery instead, you can refer to this link for an example: http://jsfiddle.net/K3Lwj/3/

javascript jquery html css angularjs

Answer 1

Answer №1

Your decision to incorporate an Angular ng-options select menu is commendable, as mixing plain JavaScript with Angular may not align with the typical "Angular" approach to problem-solving. Instead of using onclick, I suggest utilizing Angular's ng-change and placing the select within the controller.

Here is an example that expands on your original code, adopting a more Angular-centric strategy to address the issue:

http://jsfiddle.net/9GSNs/

HTML

<div ng-app='nvd3TestApp'>
    <div ng-controller="ExampleCtrl">
        <select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart" ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
        <nvd3-discrete-bar-chart data="exampleData" id="exampleId" width="800" height="400" tooltips="true" showXAxis="true" showYAxis="true">
            <svg></svg>
        </nvd3-discrete-bar-chart>
    </div>
</div>

Javascript

angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

function ExampleCtrl($scope) {
    $scope.chartOptions = [{
        id: 1,
        name: "Option 1"
    }, {
        id: 2,
        name: "Option 2"
    }];

    var d1 = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }];

    var d2 = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }, {
        key: "Cumulative Return2",
        values: [
            ["A", 10.765957771107],
            ["B", 0],
            ["C", -32.807804682612],
            ["D", 96.45946739256],
            ["E", 0.19434030906893],
            ["F", -38.079782601442],
            ["G", -43.925743130903],
            ["H", -3.1387322875705]
        ]
    }];

    $scope.updateChart = function () {
        if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
            $scope.exampleData = d1;
        }
        if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
            $scope.exampleData = d2;
        }
    };

    $scope.$on('tooltipShow.directive', function (event) {
        //console.log('scope.tooltipShow', event);
    });

    $scope.$on('tooltipHide.directive', function (event) {
        //console.log('scope.tooltipHide', event);
    });

}

For further insights into using ngOptions in AngularJS, check out Scott Allen's informative post:

If you're looking to set a default option in a select box in Angular.js, refer to this helpful Stack Overflow discussion: How to have a default option in Angular.js select box

Answer 2

Your decision to incorporate an Angular ng-options select menu is commendable, as mixing plain JavaScript with Angular may not align with the typical "Angular" approach to problem-solving. Instead of using onclick, I suggest utilizing Angular's ng-change and placing the select within the controller.

Here is an example that expands on your original code, adopting a more Angular-centric strategy to address the issue:

http://jsfiddle.net/9GSNs/

HTML

<div ng-app='nvd3TestApp'>
    <div ng-controller="ExampleCtrl">
        <select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart" ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
        <nvd3-discrete-bar-chart data="exampleData" id="exampleId" width="800" height="400" tooltips="true" showXAxis="true" showYAxis="true">
            <svg></svg>
        </nvd3-discrete-bar-chart>
    </div>
</div>

Javascript

angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

function ExampleCtrl($scope) {
    $scope.chartOptions = [{
        id: 1,
        name: "Option 1"
    }, {
        id: 2,
        name: "Option 2"
    }];

    var d1 = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }];

    var d2 = [{
        key: "Cumulative Return",
        values: [
            ["A", -29.765957771107],
            ["B", 0],
            ["C", 32.807804682612],
            ["D", 196.45946739256],
            ["E", 0.19434030906893],
            ["F", -98.079782601442],
            ["G", -13.925743130903],
            ["H", -5.1387322875705]
        ]
    }, {
        key: "Cumulative Return2",
        values: [
            ["A", 10.765957771107],
            ["B", 0],
            ["C", -32.807804682612],
            ["D", 96.45946739256],
            ["E", 0.19434030906893],
            ["F", -38.079782601442],
            ["G", -43.925743130903],
            ["H", -3.1387322875705]
        ]
    }];

    $scope.updateChart = function () {
        if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
            $scope.exampleData = d1;
        }
        if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
            $scope.exampleData = d2;
        }
    };

    $scope.$on('tooltipShow.directive', function (event) {
        //console.log('scope.tooltipShow', event);
    });

    $scope.$on('tooltipHide.directive', function (event) {
        //console.log('scope.tooltipHide', event);
    });

}

For further insights into using ngOptions in AngularJS, check out Scott Allen's informative post:

If you're looking to set a default option in a select box in Angular.js, refer to this helpful Stack Overflow discussion: How to have a default option in Angular.js select box

Choose a chart from the dropdown menu and showcase it

Answer №1

http://jsfiddle.net/9GSNs/

HTML

Javascript

Similar questions

jQuery - accessing a different class within the object

Iterate through the call feature repeatedly, ensuring that each call has a different iteration number assigned to a variable within the

AngularJS: Troubleshooting ng-switch malfunction

I encountered a problem with React Native while attempting to update the state with a new value

Is there a way to launch only a single popup window?

Utilizing GraphQL Global Object Identification with NestJS using the code-first strategy

Paginating content without the need for a database

What is the best way to limit the number of options displayed in the vue-multiselect

What is the most efficient way to check for the presence and truthiness of a nested boolean in Node.js?

After several interactions, the CSS files fail to load

Navigating through an Angular 2 service

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide

Change the order of numbering in ordered lists

Do closures truly behave like objects, or are they something else entirely? (It appears not)

Storing values from a content script into textboxes using a button press: a simple guide

What is the best way to rate a particular image?

Issues with Pagination in a Dynamic Grid System when using Bootstrap DataTables

Automatically expanding PrimeNG Turbotable rows

When zoomed in, the div background gives off a crisp white appearance

Leveraging $scope within ui-router resolve