The problem of width and display arises when utilizing highchart

I am attempting to create a select option that will display a different chart when changed. However, I am encountering two main issues:

1. The chart is not displaying properly within the div width. 2. How can I hide other charts when one is displayed?

JSFIDDLE

HTML

<div style="width:80%;">
<select class="selectchart" id="selectsolicitacoes"><option>By month</option><option value="#hg3">By week</option><option value="#hg2">By day</option></select><br>
<div id="hg2" style="min-width: 310px; height: 400px; margin: 0 auto; display: none;">        </div>
<div id="hg3" style="min-width: 310px; height: 400px; margin: 0 auto; display: none;">     </div>

Javascript

$(document).ready(function(){
$('#selectsolicitacoes').change(function(){
    var element = $(this).val();
    $(element).show();
});
});

Answer №1

1) Ensure that the width of your divs is correct, you can refer to this example for guidance: http://jsfiddle.net/6S9cZ/10/ which demonstrates how to set the width of your divs.

div {
   border:1px solid red;
}

2) To display only specific divs, you can hide all divs and then show only the ones you need using this method: http://jsfiddle.net/6S9cZ/11/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Refresh Javascript Functionality in Rails 5 after an Ajax Update?

After exploring my Javascript issue, I've identified the problem post an AJAX call that refreshes a div's content. The core issue is that the contents within the div become unlinked or uninitialized for the Javascript. My goal is to allow users t ...

Perform second level array grouping in JSON

I need help with grouping at the second level of a JSON string. The code I have works well for one level arrays in the JSON string. Array.prototype.groupBy = function(keyName) { var res = {}; this.forEach(function(x) { var k = x[keyName]; va ...

Vue.js - Launching Modal for Editing Data Entry

I have a list of records with corresponding buttons on the right side, as shown in this image: https://i.sstatic.net/uevzR.jpg Whenever I click on one of these buttons, I want a dialog box to appear containing various input fields such as text inputs, dro ...

Stingray Riverbed SteelApp, showcasing an image on a maintenance landing page

We have implemented a feature on riverbed stingray that displays a maintenance page whenever the system administrator needs to update the application. In order to achieve this, we designed a custom HTML page with a logo image and uploaded both the .html an ...

How can you alter the background color of a Material UI select component when it is selected?

I am attempting to modify the background color of a select element from material ui when it is selected. To help illustrate, I have provided an image that displays how it looks when not selected and selected: Select Currently, there is a large gray backgr ...

Preventing the negative consequences of being colorblind through programming techniques

My experience as a web developer has taught me that poor color contrast on a website can severely impact revenue. I am determined to change this, but have encountered an issue. On my site, there is a section where users can select a color and see it displa ...

Discover the secret to displaying numerical values within each bar of your stacked bar chart using angular-chart.js!

Currently, I am utilizing angular-chart.js for chart visualization. It is known that chart.js now supports stacked bar charts. However, I have been unable to figure out how to display numbers within each bar as shown in the following image: https://i.sst ...

Absence of loaders detected in a uniquely crafted npm package

Experiencing an issue with a private npm package loaded from a local git server for use in multiple react applications. When the package is loaded in the application, an error occurs: Error: Module parse failed: Unexpected token (22:6) You may need an app ...

Fetching database entries upon page load instead of using the keyup function in JavaScript

Here is an HTML form input provided: <input type="text" id="username" value=""> In this scenario, when a username like "John" is entered and the enter button is pressed, the script below retrieves database records: $(function(){ //var socket = ...

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

I am experiencing an issue with the LinkedIn Javascript API where it is not providing the

Could it be that the endDate of positions is causing the script to hang? function importJobsEducation() { IN.API.Profile("me") .fields(["id","positions:(company,title,summary,start-date,end-date,is-current)", "educations","skills", "headline"]) ...

Switch up the button hue as you scroll for a fresh look

Attempting to achieve: CSS change color on scroll / cut text - overflow z-index This code snippet uses the clip property to change the color of a button when scrolling. The goal is to make it change color as you move from the header to the body, but it&apo ...

Creating an optical illusion using nested left borders in HTML and CSS for a captivating and repeating visual impact

I am looking to achieve a nested border-left effect on HTML lists where the left border moves in one step with each nested level: https://i.sstatic.net/QDS3d.png What I want is something similar to this with minimal gap between the listed term and bullet ...

How do I retrieve the id of an event using a class descriptor within a JQuery Dialog constructor in Javascript?

As someone who is relatively new to JavaScript and jQuery, I must apologize in advance if my question seems basic. :) In a straightforward webpage, I am utilizing JQuery UI's Tabs and attempting to implement a double-click feature on the Tab names th ...

Tips for verifying on the click of a button

Having trouble solving my issue as a newbie to HTML and jQuery. The problem at hand is: In my website, I need to implement username validation. This validation involves checking the entered username against a MySQL database. If the database contains the ...

Mask input in AngularJS

I am currently working on developing a custom directive for creating personalized masks for input fields. While there are other libraries available, I often need to create specific input formats tailored to the company's requirements (e.g., "OS.012-08 ...

Retrieve information from the text input field and proceed with the action outcome

Currently, I am in the process of developing a form on an asp.net website. The objective is to have users land on a page named Software, where two variables are checked for empty values upon loading. If the check reveals emptiness, the Software View is ret ...

Clear existing markers from the map before inserting new markers

I have a map where initially the markers load coming from the database, Then there is a time-based Ajax request that fetches new records every minute. In my code snippet, I am using setMapOnAll(null) following the guidance from the Google Maps Documentati ...

Utilizing Laravel's URL::asset method in conjunction with a JavaScript variable

Having a go at creating an HTML tag using the Jquery snippet below $("<option />",{ 'data-src':"{{ asset(my-javascript-variable) }}", id:'my_id').appendTo($('#image')); An option tag is being added to a select element. ...

Exploring the passing of parameters in Angular JS getters

In my Angular 1.6.x project, I have a collection of checkboxes that store their state in a variable called selectedJobIds. This variable contains the ids of selected jobs along with their corresponding true or false values: $scope.selectedJobIds = { 23: ...