Highcharts - Remove "hover" state from chart point (that was set externally) - javascript

I created a combination of chart and table. Took me for ever to be able to hover on one column and trigger the corresponding tooltip. Everything works fine except that the points in the chart (the ones that once were triggered by hovering on a table column) remain with the hover state.
In the image, it's clear what I need to accomplish. I need that, everytime I hover on another column, all the previous point are set to "normal" instead of "hover" (I doubt that's the real way to call it)
So in the image:
the blue arrow points to the right state (when the column is hovered on)
the red arrow points to the wrong state (once you hovered on a column but then hovered another)
the green arrow points to the state that all the points except the one in focus, should be
How it should be:
PS: if you hover on any of the cells, or all of them, they all get the "hover" status, but if you hover on 1 point of the chart, the rest of the points get the "normal" status, which is what I need to accomplish.
The code can be found here or here:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<div id="section_status_chart"></div>
<div id="section_status_table1">
<table id="section_status_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Status</th>
<th>Apr 12</th>
<th>Apr 13</th>
<th>Apr 14</th>
<th>Apr 15</th>
<th>Apr 16</th>
<th>Apr 17</th>
<th>Apr 18</th>
<th>Apr 19</th>
<th>Apr 20</th>
<th>Apr 21</th>
<th>Apr 22</th>
<th>Apr 23</th>
</tr>
</thead>
<tbody>
<tr>
<td>Approved</td>
<td class="font-green-meadow">2,658</td>
<td class="font-green-meadow">1,554</td>
<td class="font-green-meadow">1,653</td>
<td class="font-green-meadow">1,997</td>
<td class="font-red-intense">-966</td>
<td class="font-green-meadow">1,087</td>
<td class="font-green-meadow">1,434</td>
<td class="font-green-meadow">1,112</td>
<td class="font-green-meadow">1,546</td>
<td class="font-red-intense">-750</td>
<td class="font-green-meadow">998</td>
<td class="font-green-meadow">157</td>
</tr>
<tr>
<td>Conditionally approved</td>
<td class="font-green-meadow">1,543</td>
<td class="font-red-intense">-1,634</td>
<td class="font-green-meadow">1,976</td>
<td class="font-green-meadow">2,643</td>
<td class="font-green-meadow">1,007</td>
<td class="font-green-meadow">1,114</td>
<td class="font-green-meadow">1,435</td>
<td class="font-red-intense">-841</td>
<td class="font-green-meadow">1,182</td>
<td class="font-green-meadow">1,221</td>
<td class="font-green-meadow">2,009</td>
<td class="font-red-intense">-201</td>
</tr>
<tr>
<td>Referred</td>
<td class="font-red-intense">-652</td>
<td class="font-green-meadow">1,654</td>
<td class="font-green-meadow">1,262</td>
<td class="font-green-meadow">1,621</td>
<td class="font-red-intense">-116</td>
<td class="font-green-meadow">1,143</td>
<td class="font-green-meadow">1,004</td>
<td class="font-green-meadow">1,965</td>
<td class="font-green-meadow">2,531</td>
<td class="font-red-intense">-1,645</td>
<td class="font-green-meadow">1,442</td>
<td class="font-red-intense">-1,967</td>
</tr>
<tr>
<td>Rejected</td>
<td class="font-green-meadow">1,144</td>
<td class="font-green-meadow">1,523</td>
<td class="font-green-meadow">1,616</td>
<td class="font-red-intense">-553</td>
<td class="font-green-meadow">1,039</td>
<td class="font-green-meadow">1,343</td>
<td class="font-green-meadow">1,300</td>
<td class="font-green-meadow">1,533</td>
<td class="font-red-intense">-882</td>
<td class="font-green-meadow">1,161</td>
<td class="font-green-meadow">2,030</td>
<td class="font-red-intense">-1,932</td>
</tr>
<tr class="table-footer">
<td>Total</td>
<td class="font-red-intense">-652</td>
<td class="font-green-meadow">1,654</td>
<td class="font-green-meadow">1,262</td>
<td class="font-green-meadow">1,621</td>
<td class="font-red-intense">-116</td>
<td class="font-green-meadow">1,143</td>
<td class="font-green-meadow">1,004</td>
<td class="font-green-meadow">1,965</td>
<td class="font-green-meadow">2,531</td>
<td class="font-red-intense">-1,645</td>
<td class="font-green-meadow">1,442</td>
<td class="font-red-intense">-1,967</td>
</tr>
</tfoot>
</table>
</div>

Updated fiddle here, but this is the main code to fix the issue:
...
if (pointIndex > -1) {
for(var i = 0; i < section_status_chart.series[0].data.length; i++) {
section_status_chart.series[0].data[i].setState('');
}
section_status_chart.series[0].data[pointIndex].setState('hover');
section_status_chart.tooltip.
refresh(section_status_chart.series[0].data[pointIndex]);
}
...
Set the state back to '' for all points before setting the state on the point associated with the column. There's probably a cleaner solution than the for loop I've written, but this is the main idea.
P.S. This is a really nice feature you've made!

Related

HTML: How to split list (of <tr>-s) into multiple chunks with keeping the header?

I have a list that is too long, and it is needed to fit without scrolling, but I can't figure out how to split this into 2 or 3 or 4 chunks. I copied a list below, the real list is having 200 or more rows of data. Let's say I'd like to have chunks with no more than 3 rows inside.
Is it possible to make more than one chunk of this and keeping the header too?
(The data comes from an SQL selection and constantly changing).
<div id="FIller1" class="dbtable">
<thead>
<tr>
<td class="b3">Filled ID1</td>
<td class="n3">Filled ID2</td>
<td class="n3">Filled ID3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="index"><span>110</span></td>
<td class="n2"><span>110-2</span></td>
<td class="b2"><span>AAA</span></td>
</tr>
<tr>
<td class="index"><span>111</span></td>
<td class="n2"><span>111-2</span></td>
<td class="b2"><span>BBB</span></td>
</tr>
<tr>
<td class="index"><span>112</span></td>
<td class="n2"><span>112-2</span></td>
<td class="b2"><span>CCC</span></td>
</tr>
<tr>
<td class="index"><span>113</span></td>
<td class="n2"><span>113-2</span></td>
<td class="b2"><span>DDD</span></td>
</tr>
<tr>
<td class="index"><span>114</span></td>
<td class="n2"><span>114-2</span></td>
<td class="b2"><span>EEE</span></td>
</tr>
<tr>
<td class="index"><span>115</span></td>
<td class="n2"><span>115-2</span></td>
<td class="b2"><span>FFF</span></td>
</tr>
<tr>
<td class="index"><span>116</span></td>
<td class="n2"><span>116-2</span></td>
<td class="b2"><span>GGG</span></td>
</tr>
</tbody>
</div>

Get specific HTML table element with google script

I've been looking for this same question but none of them seems to have an accurate answer.
I think this should be simpler, I want to get a specific cell from an HTML table in a website using google script.
It needs to work inside google script so pls dont suggest =importhtml, although that's exactly the function I'm looking for.
This is a website example https://prestadores.pami.org.ar/result.php?c=6-2-1-1&beneficio=110313900302&parent=00&vm=2
I need to get the date next to the FECHA DE NACIMIENTO cell, but I dont want to do messy things like indexOf since I have to do it with a few more values.
<table width="480" border="0" cellpadding="3" style="margin-left: 40px;">
<tbody><tr>
<td class="gris"><p>APELLIDO Y NOMBRE:</p></td>
<td class="grisClaro"><p>PEREZ JUANA ANTONIA </p></td>
</tr>
<tr>
<td class="gris"><p>TIPO BENEFICIARIO:</p></td>
<td class="crema"><p>JUBILACION</p></td>
</tr>
<tr>
<td class="gris"><p>N? BENEFICIO:</p></td>
<td class="grisClaro"><p>110313900302</p></td>
</tr>
<tr>
<td class="gris"><p>FECHA DE NACIMIENTO:</p></td>
<td class="crema"><p>08/03/1922</p></td>
</tr>
<tr>
<td class="gris"><p>NACIONALIDAD:</p></td>
<td class="grisClaro"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>PAIS:</p></td>
<td class="crema"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>UGL:</p></td>
<td class="crema"><p>LANUS</p></td>
</tr>
<tr>
<td class="gris"><p>DOCUMENTO:</p></td>
<td class="grisClaro"><p>DNI123456</p></td>
</tr>
<tr>
<td class="gris"><p>SEXO:</p></td>
<td class="crema"><p>FEMENINO</p></td>
</tr>
<tr>
<td class="gris"><p>ESTADO CIVIL:</p></td>
<td class="grisClaro"><p>SEPARADO/A LEGAL</p></td>
</tr>
<tr>
<td class="gris"><p>VENCIMIENTO AFILIACION:</p></td>
<td class="crema"><p></p></td>
</tr>
<tr>
<td class="gris"><p>UNIDAD OPERATIVA:</p></td>
<td class="grisClaro"><p>NO ASIGNADA</p></td>
</tr>
<tr>
<td class="gris"><p>ALTA:</p></td>
<td class="crema"><p>01/09/1982</p></td>
</tr>
<tr>
<td class="gris"><p>BAJA:</p> </td>
<td class="grisClaro"><p>10/10/2013</p></td>
</tr>
<tr>
<td class="gris"><p>OTRA OBRA SOCIAL:</p></td>
<td class="crema"><p>NO</p></td>
</tr>
</tbody></table>
Any suggestions?
Using jQuery's contains selector, it can be done like the following easily.
let td = $('table td.gris:contains("FECHA DE NACIMIENTO")');
console.log(td);
let theDate = td.next('td').text();
console.log(theDate);

Access javascript <td table data without id, with swift3

inspecting target website shows the following HTML for a table
(excerpt from full table body)
<tr class="simRowA">
<td class="1stColumn">something</td>
<td class="2ndColumn">TARGET</td>
<td class="3rdColumn">anything</td>
<td class="4thColumn">whatever</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something2</td>
<td class="2ndColumn">TARGET2</td>
<td class="3rdColumn">anything2</td>
<td class="4thColumn">whatever2</td>
</tr>
<tr class="simRowA">
<td class="1stColumn">something3</td>
<td class="2ndColumn">TARGET3</td>
<td class="3rdColumn">anything3</td>
<td class="4thColumn">whatever3</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something4</td>
<td class="2ndColumn">TARGET4</td>
<td class="3rdColumn">anything4</td>
<td class="4thColumn">whatever4</td>
</tr>
"simRowA"(/"B") continue to alternate.
I want to extract "TARGET", "TARGET2"...etc in my Swift3 app
I've tried in NavigationDidFinish:WKWebView (other evaluatJavaScript codes are working here)
webView.evaluateJavaScript("document.getElementsByClassName('simRowA')[0].innerText;") {
(result, error) -> Void in
print(result)
}
as well as ".value" and ".text". note HTML lacks 'id'
Any suggestions how i can extract this data?
There are several things that might have gone wrong with your code, and, since some of it is missing, I'm gonna make some asumptions.
First, to correctly get to TR simRowA via getElementsByClass, you need to properly construct the table. That means, setting the <table> tag too.
<table>
<tr class="simRowA">
<td class="1stColumn">something</td>
<td class="2ndColumn">TARGET</td>
<td class="3rdColumn">anything</td>
<td class="4thColumn">whatever</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something2</td>
<td class="2ndColumn">TARGET2</td>
<td class="3rdColumn">anything2</td>
<td class="4thColumn">whatever2</td>
</tr>
<tr class="simRowA">
<td class="1stColumn">something3</td>
<td class="2ndColumn">TARGET3</td>
<td class="3rdColumn">anything3</td>
<td class="4thColumn">whatever3</td>
</tr>
<tr class="simRowB">
<td class="1stColumn">something4</td>
<td class="2ndColumn">TARGET4</td>
<td class="3rdColumn">anything4</td>
<td class="4thColumn">whatever4</td>
</tr>
</table>
Second, make sure you call stringByEvaluatingJavaScript (or, if you're using WKWebView, evaluateJavaScript) after the page is done loading, so use the delegate method webViewDidFinishLoad (or, if you're using WKWebView, didFinishNavigation).
After this, you should be getting the innerHTML of .simRowA on the console:
Optional("<td class=\"1stColumn\">something</td>\n <td class=\"2ndColumn\">TARGET</td>\n <td class=\"3rdColumn\">anything</td>\n <td class=\"4thColumn\">whatever</td>\n")

Loop through table and extract specifics cells

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.
What would be the best way to achieve this?
Code Snippet:
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
The result I want in array or variable:
Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
===============
Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.
Note: There are no fixed values, Names keep changing and more rows are added.
You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.
The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.
var entries = [];
$("#tablemain tr.parent").each(function(){
var child1 = $(this).next();
var child2 = child1.next();
var cells = {
name: $(this).find("td:nth-child(1)").text(),
arrival1: child1.find("td:nth-child(2)").text(),
departure: child2.find("td:nth-child(2)").text(),
arrival2: child1.find("td:nth-child(3)").text()
};
entries.push(cells);
});
console.log(entries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row01" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row02" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row11" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row12" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>

How do I parse html in an external file from Javascript

I feel like I should know this, but as I'm sitting down trying to access an html file from my Javascript I don't really know where to start. I am using jQuery so do I just want to use jQuery.ajax()?
The external html is a table with various premium values, stored on the same domain but in a separate directory. When a user enters their birth year previously in the form and selects whether or not they are male or female and a smoker or non-smoker, I return specific values based on their age.
In the table below if they were 21, male, non-smoker i'd want to return the value in the mns cell from row #id21.
<table id="premiumRateTable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th id="age">Age Next Birthday</th>
<th id="cover">Default Cover</th>
<th id="mns">Male Non-smoker</th>
<th id="ms">Male Smoker</th>
<th id="fns">Female Non-smoker</th>
<th id="fs">Female Smoker</th>
</tr>
</thead>
<tbody>
<tr id="id20">
<td headers="age">20</td>
<td headers="cover">$100,000</td>
<td headers="mns">$108.99</td>
<td headers="ms">$154.55</td>
<td headers="fns">$44.31</td>
<td headers="fs">$68.61</td>
</tr>
<tr id="id21">
<td headers="age">21</td>
<td headers="cover">$150,000</td>
<td headers="mns">$160.81</td>
<td headers="ms">$229.15</td>
<td headers="fns">$58.16</td>
<td headers="fs">$77.48</td>
</tr>
<tr id="id22">
<td headers="age">22</td>
<td headers="cover">$150,000</td>
<td headers="mns">$139.37</td>
<td headers="ms">$199.167</td>
<td headers="fns">$58.28</td>
<td headers="fs">$72.89</td>
</tr>
<tr id="id23">
<td headers="age">23</td>
<td headers="cover">$150,000</td>
<td headers="mns">$128.64</td>
<td headers="ms">$183.59</td>
<td headers="fns">$56.28</td>
<td headers="fs">$72.89</td>
</tr>
<tr id="id24">
<td headers="age">24</td>
<td headers="cover">$150,000</td>
<td headers="mns">$121.94</td>
<td headers="ms">$172.87</td>
<td headers="fns">$58.29</td>
<td headers="fs">$79.90</td>
</tr>
<tr id="id25">
<td headers="age">25</td>
<td headers="cover">$150,000</td>
<td headers="mns">$112.56</td>
<td headers="ms">$158.13</td>
<td headers="fns">$61.11</td>
<td headers="fs">$84.91</td>
</tr>
</tbody>
</table>
Load the table once ($(document).ready()) and add it to an invisible element at the end of the body.
var dummyDiv = $("<div id='dummyDiv'/>").css("display","none");
dummyDiv.load("otherpage.html #id"+age);
dummyDiv.css("display","none");
$("body").append(dummyDiv);
And then you can run this code from anywhere to get the values from that table.
var dummyDiv = $("#dummyDiv");
var valYouWant = "mns"; //example value to grab
var value = dummyDiv.find('td[headers="'+valYouWant+'"]').text();
//do whatever you'd like with 'value'

Categories