AngularJS ui-chart not working in ui-bootstrap tabs - javascript

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.

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!

Minor change cause HighStock charts syncing to fail

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...

onsenui cannot change content

I’m using onsen ui version 1, followed https://onsen.io/v1/guide.html to make changes to DOM
This section to be exact
// Add another Onsen UI element
var content = document.getElementById("my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
The problem is nothing changed on the page.
If i dump “content” variable or dump the HTML element it shows the newly edited version on browser console. but on page still the old one.
ons object is instantiated, compile method is callable, tried different HTML elements.
Either you are doing something incorrectly or it's an angular refresh issue.
For the first scenario it's easier if you provide a codepen, so that we can see the problem. Currently the code you are mentioning is working fine for me here.
For the second scenario actually the third line ons.compile(content); should remove this problem imo, it might be a version issue, or there is some context which I am missing.
If you're doing something angular related then you should also show where you are calling these 3 lines from. In order to work it should be called from something like an ng- event (for example ng-click).
JS:
app.controller('yourControllerName', function($scope) {
$scope.addButton = function () {
var content = document.getElementById("my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
}
});
HTML:
<ons-button ng-click="addButton()">Add another button</ons-button>
Finally if you are unable to make it work you can do something like
app.controller('yourControllerName', function($scope) {
$scope.addButton = function () {
var content = document.getElementById("my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
$scope.apply(); // should fix the issue, but not recommended
}
});
PS: You can also try out onsen 2 - there you can:
experiment with the interactive tutorial
try out the vanilla version (without any external framework) - which will not have issues like this one

Is there a way to create a direct link to Isotope filter

I am using Isotope to filter our portfolio section by category. Is it possible to create an URL that will link to directly to a filter? Currently the URL is http://new-had.herrmanneasyeditdemo.com/#filter for every category.
I want to link directly to the law firm filter which is under the Industry drop down menu. Is this possible? Any help is greatly appreciated.
http://new-had.herrmanneasyeditdemo.com/#work
You could always format the link such that each filter is defined in the hash, then parse it out:
http://example.com/#filter|somekey
$(document).ready(function(){
if (location.hash.indexOf('#filter|') > -1)
{
$container.isotope({ filter: location.hash.substring(('#filter|').length)})
}
});
Two caveats:
1). If you're making a long page, you'll want to parse the hash and invoke that page navigation as well. Otherwise, you'll be pointed at a nonexistant a-name.
2). The document.ready might be a bit tricky. You may want to defer it, or place it explicitly after the isotope loading code.

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)

Categories

Resources