Minor change cause HighStock charts syncing to fail - javascript

I am trying to modify this HighStock example: https://www.highcharts.com/demo/synchronized-charts
I have made a really small change which you can see in this JSFiddle:
https://jsfiddle.net/fshsweden/zyzdzk3j/
Basically, instead of adding all charts on top of each other into #container, I want each chart in his own #chart_1, #chart_2 etc etc like this:
<div id="container">
<div id="chart_1"></div>
<div id="chart_2"></div>
<div id="chart_3"></div>
</div>
In order to do this, I made a small change in loading and changed this
$('<div class="chart">')
.appendTo('#container')
.highcharts({
into
Highcharts.stockChart('chart_' + count, {
The charts end up in the right place, but the synchronization code
($('#container').bind('mousemove touchmove touchstart', function (e) {
no longer work (the highlight bar isnt synchronized between the charts). Can anyone explain why that is so?
Thanks
Peter

All these errors occur (check out the console output), because the example that you referred to:
I am trying to modify this HighStock example: https://www.highcharts.com/demo/synchronized-charts
is adjusted for Highcharts (Highcharts.chart()) and not for Highstock (Highcharts.stockChart()).
If you change the library to highcharts.js and the constructor to the Highcharts.chart() your code will work just fine: https://jsfiddle.net/kkulig/b41xxutj/
I've done some adjustments to make it work in Highstock too: https://jsfiddle.net/kkulig/rnv2ovru/
All changes in Tooltip.prototype.refresh function are marked with comment: //adjustment for Highstock.

As Deep3015 says, this was the short answer:
this.series.chart.tooltip.refresh(this); // Show the tooltip creates problem comment this and check jsfiddle.net/4um9ghvq and also check this post – Deep 3015
Kamil Kuligs anser is probably right too, but I don't understand it fully...

Related

Custom tooltip in lineChart of nvd3.js

How to create a custom tooltip in lineChart of nvd3.js?, i want to add a "total" value in the tooltip something like this
I've tried to call the chart.tooltip.contentGenerator, to create a custom tooltip, but the data is empty
chart.tooltip.contentGenerator(function(data) {
console.log(data) //empty
});
i'am using nvd3 version 1.8.5 and d3 version 3.5.9 only,
here's my fiddle: sample
Please try using chart.interactiveLayer.tooltip.contentGenerator. Testing your code with this line, I was able to watch values inside data variable, as you can see below:
.
From here you could construct or edit your custom tooltip as you wish. Let me know if it works for you.
[EDIT - SUGGESTION TO INCLUDE EVENT BEHAVIOR]
Looking inside NVD3, I realized that the tooltip's contentGenerator contains all specific code to add events behavior for tooltip. If you take a look at the original tooltip, it uses a class called highlight to mark focused color, but the custom tooltip has not implemented this events and does not highlith focused color.
I know it's a step back, once you have made you own code for thisd custom tooltip, but seems that the only way to achieve this is to rebuild your code to inlcude event behavior. Maybe starting from the orginal code that NVD3 includes to create tooltip usign contetGenerator will help (thats the way I would take, but it's up to you if you prefer to implement this on your current code).
If you want to take a look at this code, please find tooltip.js for your NVD3 version or visit this GitHub link
On this file, if you check at line 83, of just searching for "highlight" on the file, you can see the way event enter() is implemented for all tr elements inside table body, adding the classname highlight.
var trowEnter = tbodyEnter.selectAll("tr")
.data(function(p) { return p.series})
.enter()
.append("tr")
.classed("highlight", function(p) { return p.highlight});
My suggestion is to take all this code (I mean all inside contentGenerator function) for your custom contentGenerator, so you can asure that all HTML code is generated true to the original, even with associated behavior, and then override it to include the customization you have made for the title.
Please, try this and let me know if you can manage to solve the problem.
#Dave Miller
Thanks sir, i also figured it out sorry if i didn't share. i do it like this\
Maybe i did the long method, anyway thanks!

Change Font Awesome Icon with Javascript - Expand/Collapse Accordion

I have an accordion that can expand collapse.
I set up some FontAwesome icons to help illustrate when it's open and closed - however, I can't seem to get it to change icons.
I was basing this knowledge off other StackOverflow posts that I saw - but for some reason I can't seem to get mine to work. If I had to guess I'm definitely missing the ball with jQuery. I struggle there, so I'm assuming I'm not selecting the right element.
I put just the chunk of code for the accordion into a JSFiddle:
https://jsfiddle.net/ehkv99h9/18/
$(this).find($(".fa")).removeClass('fa-caret-right').addClass('fa-caret-down');
is what I think is tripping me up (as seen line 14 in my jsfiddle - I commented out for now since it wasn't working)
I tried writing some stuff to console.log to help determine if I was selecting the right part in my code, but I couldn't figure it out unfortunately.
What would I need to change in order to get my caret to rotate to the down position when it expands?
(One note: I have a few arrows there, I was testing out different icons, but I think it would be the same "fa-caret-right"/"fa-caret-down" vs. "fa-angle-right"/"fa-caret-down").
You need to use the latest version of FA, the 5.0.9
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
and jQuery 3.x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
then you can use the example provided by the documentation:
https://fontawesome.com/how-to-use/svg-with-js
in the section "Support for dynamic changes"
$(this)
.find('[data-fa-i2svg]')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
you can se the result in the fiddle: https://jsfiddle.net/0hkd2sor/3/
You can add this code in onclick listener for toggle Class
if(this.classList.value.indexOf("fa-caret-right") > -1){
this.classList.add("fa-caret-right");
this.classList.remove("fa-caret-right");
}else
{
this.classList.add("fa-caret-right");
this.classList.remove("fa-caret-down");
}

OpenLayers 3 - Opacity slider in layer tree does not work

I included a layer tree according to http://www.acuriousanimal.com/thebookofopenlayers3/chapter02_03_layer_groups.html and http://jsfiddle.net/joshuadickerson92/mtwbs2dg/ (JSFiddle - cannot post more than 2 links due to insufficient reputation) in my Openlayers 3 map.
I cannot get the opacity slider to work. Moving it from right to left and vice versa has no effect on the opacity of the layers at all, regardless of these parameters: data-slider-min='0' data-slider-max='1' data-slider-step='0.1'
This bit
$('input.opacity').slider().on('slide', function (ev) {
var layername = $(this).closest('li').data('layerid');
var layer = findBy(map.getLayerGroup(), 'name', layername);
layer.setOpacity(ev.value);
});
seems to be skipped over when checking the page in Firefox's debugger tool.
I've been searching for solutions for days now, but still couldn't find anything. Any help appreciated!
JSFiddle here: http://jsfiddle.net/kidalex/j34xzaa3/5/
Update: I added this chunk of JS code, and now it works! Updated fiddle here: http://jsfiddle.net/kidalex/j34xzaa3/5/
Now I'm going to investigate which ones of those 8914 lines of (tidied up) code are the cause for that.
Try publishing your whole code so we can help better.
More probably your issue is related to javascript than to OL3, because of this I can't give you a concrete solution.
Ensure your $('input.opacity').slider().on('slide', function (ev) {... function returns a good ev.value when you move the slider.
Check too your findBy function works fine a the layername variable is getting the right value.
Use your browser debugger or simply the console to check all that.
Cheers.

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

AngularJS ui-chart not working in ui-bootstrap tabs

I use ui-chart angularjs module to show a line graph, the thing is when I put it in ui-bootstrap tabs, it only show the line graph at the first tab, it wouldn't show at the second or third tab.
When I read the jqPlot documentation (ui-chart is a directive for jqPlot), it says it needs to use replot(), but I don't know how to implement this in ui-chart.
Can anyone give me a heads up on this?
Did you include all the plugins required ? You need to include the adequate plugin for each graph. I forgot it a lot of times. Otherwise, I think we might need the code to do more investigation. for example to draw a pie you have to include :
<script src=".../jqplot/plugins/jqplot.pieRenderer.js" type="text/javascript"></script>
in addition.
I've managed to accomplish that by modifying the ui-chart directive, adding the following to the end of it:
var plot = $.jqplot(elem.attr('id'), data, opts);
// search for a tabpanel (jquery-ui tabs) containing the chart
elem.closest('.tabpanel').bind('tabsactivate',
function(event, ui) {
if (plot._drawCount === 0) {
plot.replot();
}
});
The if _drawCount part is very important because reploting a chart is a heavy-weight operation.

Categories

Resources