As I work on developing a system that generates various types of graphs, my goal is to synchronize a chart and table so that when the chart is DRILLDOWNED, the table will also update. Is there a method to convert the data currently displayed by HighCharts into JSON format? This JSON can then be utilized as input for a datatable. Thank you!
Take a look at this JsFiddle Demo
To access the id, you can use e.seriesOptions.id which serves as the key to your data. This id can then be used to fetch the relevant data and update your data table within the drillUp and drillDown events.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS
$(function() {
// Creating the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drillup: function(e) {
//alert('drill Up');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
},
drilldown: function(e) {
//alert('drill Down');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
}
}
},
title: {
text: 'DrillUp button styling'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: "Cars",
y: 4
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}]
}
})
});
I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...
Encountering a file not found error while attempting to retrieve images and text from a remote server. The error message is as follows: E/BitmapFactory(888): Unable to decode stream: java.io.FileNotFoundException: /http:/localhost/galerie/albums/userpics/ ...
I am currently developing an AngularJS web form to execute a POST request (insert) into a table utilizing WebAPI configured as OData. My objective is to receive a failed validation ModelState object back in JSON format, so I can validate the appropriate fi ...
I am trying to populate the values of <inputs> on a webpage using data from a JSON object. http://codepen.io/jimmykup/pen/exAip?editors=101 To begin, I create a JSON object with two values - one for name and one for url. var jsonObj = []; var nam ...
I am sharing my information via URL using the following code block. NSString *urlString = [NSString stringWithFormat:@"company_name=%@&email_id=%@&password=%@",_CompanyName.text,_Email.text, _Password.text]; NSString *postLength = [NSString string ...
I am trying to retrieve data in JSON format using the code provided at this link: . Despite specifying dataType: jsonp, the request is returning a status 200 and the data is received but the success handler is not being triggered, instead the error block ...
Based on my experience, when an ajax post is unable to locate a controller and everything seems to be in order, it could be due to posting to a GET attribute instead of a POST or vice versa, or there may be an issue with how the JSON data is being parsed. ...
Recently, I developed a toggle component known as Accordion. Within this component, I am iterating through an array of objects and displaying them in the following format: {object.map((o) => ( <Accordion key={o.id} title={o.question} className="i ...
Take a look at the examples below. // Content removed .aside { position: relative; float: left; width: 195px; top: 0px; bottom: 0px; background-color: #ebddca; height: 100%; } Currently, I'm still searching for the right ...
As I delve into HTML and Javascript, I am facing a challenge with resizing an image based on the window size. The goal is for the image to occupy the entire window while maintaining its aspect ratio during resizing. Additionally, if the window size exceeds ...
TL;DR In order to have access to all the data within the selected JSON object in the onItemAdd function, I am seeking clarity. Currently, only the _id and name are accessible via the config variables. Currently, my Selectize.js function successfully retr ...
So, I'm working with this unique triangle shape represented in the image below: The CSS used to create it is as follows: .triangle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; bo ...
I have integrated the owl-date-time module into my application to collect date-time parameters in two separate fields. However, I am encountering an issue where the value is being returned in a list format with an extra null value in the payload. Additiona ...
This JSON response is functioning properly with the following list. [{"id":"1","ename":"KING","sal":"5000"............ List<Emp> emp= (json.decode(response.body) as List) .map((data ...
I'm trying to display the label values within a Highcharts bar chart by utilizing the dataLabels.Formatter function. However, I've noticed that when the bar size is inconsistent, the labels are sometimes displayed inside the bar, which looks goo ...
I am having trouble generating a barcode in a new window using the barcode generator script. Despite trying to use window.focus(), I can't get the barcode to appear in the new window. Any assistance on how to generate the barcode in a separate window ...
When attempting to implement a toggle button in my project, I encountered an issue where a server control checkbox cannot be checked. However, when using an HTML control, the checkbox can be checked. What could I be overlooking? <div class="material- ...
Hey everyone, I have created two separate pages: index.php test.php Here is index.php <!DOCTYPE HTML> <html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <form method="get" action="test.p ...
Hey there, I need help with some CSS styling for my PHP code. The code below is used to display a name: while ($db_field = mysql_fetch_assoc($result)) { print $db_field['ship_name'] . "<BR>"; I really want to jazz it up with some ...
I have a JSON array containing objects which I need to pass the values to the DataTables. [{ _id: '58a2b5941a9dfe3537aad540', Country: 'India', State: 'Andhra Pradesh', District: 'Guntur', Division: ...