I'm a beginner with Highcharts and I have a requirement for two charts (let's call them Chart A and Chart B). Creating one chart is straightforward. What I need is, upon clicking on a bar in Chart A, a new chart (Chart B) should open next to the existing <div> containing Chart A. Both charts should be visible at the same time after clicking on a bar. Furthermore, each click on a different bar in Chart A should display a unique chart in Chart B.
If you want to create a second chart in a specific div when clicking on a bar, you can easily achieve this by binding a click event to the bar. Here's how you can do it: http://jsfiddle.net/Yrygy/147/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
bar: {
point: {
events: {
click: renderSecond
}
}
}
},
series: [{
data: [{
y: 100,
name: 'test'
}, {
y: 34,
name: 'click'
}, {
y: 67,
name: 'other'
}]
}]
});
function renderSecond(e) {
var point = this;
$("#detail").highcharts({
title: {
text: point.name + ':' + point.y
},
series: [{
data: [1, 2, 3]
}]
});
}
Don't forget to include the following markup:
<div id="container" style="min-width: 400px; height: 300px; margin: 0 auto"></div>
<div id="detail" style="min-width: 400px; height: 300px; margin: 0 auto"></div>
Why have two separate charts when one interactive chart can do the job? Check out this example... simply click on a bar to experience the magic.
I am struggling with implementing file upload functionality into my JSP form page without having to submit the form. I have tried various methods, including AJAX calls, but nothing seems to work as expected. On my JSP page, the upload field displays based ...
I'm trying to figure out how to parse a nested object in JSON using JavaScript. Here's the code I have so far: var myRequest = new Request('test.json'); fetch(myRequest) .then(function(response) { return response.json(); }) .then( ...
Currently, I'm working on a page where users can upload multiple files and then select the file type for each file from a dropdown menu before submitting. These 'reports' are the uploaded files that are displayed in rows, allowing users to c ...
In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...
I have recently installed the Postman plugin for Chrome and I am curious about how to use it to call my web API. Currently, I am making an AJAX call in JavaScript with the following code: alert("Getting security token"); // Do AJAX call to get security t ...
Could anyone please explain the script provided above to me? I am attempting to pass the value of $user data so that I can utilize $_REQUEST['user'] within sort.php, but I am encountering difficulties. It seems to be passing in a long URL. $(fun ...
Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...
I am currently utilizing Bootstrap and jQuery to enhance the functionality of components in my application. I am specifically looking to incorporate tooltips into certain elements. The tooltips are implemented through jQuery within my index.html page: < ...
I am struggling to keep two divs side-by-side within a parent div. Initially, I was able to position the image in the right div successfully, but when resizing the elements, everything became disorganized and I can't seem to fix it. As a beginner, I w ...
Currently, I am using Postman to test the API that I am developing with express. In this process, I am creating a series of tests. Below is a brief example: tests["Status code is 200"] = responseCode.code === 200; // Verifying the expected board var expe ...
In transitioning from Grails 2 to Grails 3, I am facing the challenge of managing my JavaScript files with the asset-pipeline plugin. The issue lies in using external libraries such as globalize and ajax-solr, which are large and consist of multiple interd ...
Looking to incorporate some jquery.gantt and it requires data in JSON format. The documentation can be found at () Here is the jQuery code snippet: $(".gantt").gantt({ source: basePath + "system/print_gantt_project_data.php?project_id=" + pro ...
I'm currently learning express.js and trying to implement a shopping cart/session functionality into my project. Below is the code I have written so far, with a question at the end. Here is my cart.js: // Ensure that the file is required correctly b ...
Each time an ajax call is made, I want to display the loading icon/image. However, in my current code, the image only appears once and then disappears. Even when there are multiple ajax calls within a for loop, the image only shows once and vanishes after ...
In an effort to create a dynamic form with different "widgets" based on field types and parameters stored in a database, I have been exploring directives for handling layout changes in response to various scenarios. After experimenting with some examples, ...
I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...
I am trying to write code that, when a button is clicked on, will find the parent elements' siblings (specifically an image within an "img_wp" div). However, my current code doesn't seem to be working. Can anyone spot where I might have gone wron ...
Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...
Currently, I am attempting to use AJAX to submit data to my table. Below is the form I have created for this purpose: <form> Total <input type="text" id="total" name="total" /><br /> Bill name<input type="text" id="bill-name" ...
<video controls> </video> video { transform: scaleX(-1) } This CSS code flips the video horizontally, but it also flips the control buttons along with it. I attempted to flip the wrapper element containing the video using .wrapper {transfor ...