I am trying to use Charts.js to make the default line plot that they show in their example dynamically and put it in a div that I pop up on a user click. My code is like this:
this.chartCanvas = document.createElement('canvas');
this.div.appendChild(this.chartCanvas);
this.chartCanvas.style.height = '480px';
this.chartCanvas.style.width = '900px';
this.chartCanvas.width = 900;
this.chartCanvas.height = 480;
this.ctx = this.chartCanvas.getContext('2d');
this.chart = new Chart(this.ctx).Line(data);
When I make the call to "new Chart" my canvas height and width are set to 0 as I can see in the inspector. When I comment out this call my canvas has the proper width/height and displays as one would expect. If I manually change the canvas height/width in the inspector my chart still doesn't display.
My "data" object is just what I cut and paste directly from their line chart example here: http://www.chartjs.org/docs/#line-chart-example-usage
Can anyone provide some insight on where I might be going wrong, I am completely new to the library.
In my case the canvas needed to be wrapped inside an element with the CSS display: block;
It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup.
As this Fiddle shows, if you try and construct a chart in a hidden div and then show it on a timeout it does not work.
If you instead show the div, make the chart and then hide the div, it does work.
http://jsfiddle.net/bjudheoq/4/
//This will break it
//this.div.style.display = 'none';
this.chart = new Chart(this.ctx).Line(data);
this.div.style.display = 'none';
The above fiddle works, but if you uncomment line 40 it does not.
I found an option:
options: {
responsive: false,
...
This makes conflict with default true. I don't know it works properly at the moment.
Ofcourse set the width and height to the canvas and its parent.
Your code works, with the exception of a typo. This line...
this.chartCanvs.style.width = '900px';
...should be this:
this.chartCanvas.style.width = '900px';
// ^ your code is missing this 'a'
And here's a JS Fiddle with that typo fixed: http://jsfiddle.net/dun5dhne/
Also, I strongly recommend opening your browser's developer console when you run into problems. This kind of thing is easy to catch in the console.
Related
This is the full code that I am trying to use. It works without the tooltip functions but not when including them
The code produces a graph with 2 lines and bars.
How do I add a tooltip without it messing up my graph and actually add some interactivity?
There were a number of different errors in your fiddle:
The grid options were missing the necessary hoverable: true
Another missing # before placeholder in in $("placeholder").bind("plothover", ...
} else( should be } else { (from empiric's comment)
A superfluous var in var y = item.datapoint[1].toFixed(0); (or replace the , with a ; between the two var statements)
Change position: 'abolute' to position: 'absolute' in the CSS of the tooltip
Some of the errors are found when looking at the console of your browser.
Updated working fiddle: https://jsfiddle.net/L9gaupcu/
Is there a way to get the width of button before its added to the panel in a situation such as follows:
var myButton = Ext.widget('button', {
text : 'Hello'
});
myButton.getWidth(); //This is undefined
panel.add(myButton);
I know that since the button is't rendered on screen and I haven't explicitly given it a width, there is no way to know the width at this time. But is there an event or something else just before the button is rendered that will let me know its width before it's displayed on screen ?
Simply you can't, if you have a look to the button source code his dimensions are setted on his render.
You shouldn't work with the button width, instead you should use other layouts.
Probably there is a way, but it seems crazy:
var myButton = Ext.widget('button', {
text : 'Hello'
}),
clone=Ext.clone(myButton);
panel.add(clone);
clone.getWidth();//This is width
clone.destroy();
panel.add(myButton);
Like you can see the problem is on creating and adding it to only get his width.
It has probably no sense, but if you need to do something else change the question with something more clear. And surely we can get an answer to your problem.
In an app that I work I have this scenario:
In a responsive container I have a chart. This container is resized at a point and I need to change the chart size by calling the setSize method.
But after that I want to make the chart responsive again - to resize on window resize event.
I made a fiddle to demo this:
http://jsfiddle.net/7ka4qaef/
First click on the red button, then try to resize the window.
Is there anyway to 'forget' that I've used setSize method?
Adding this after your setSize does what you want:
$('#container').highcharts().hasUserSize = false;
Forked JSFiddle
previous query on this: stackoverflow query
hasUserSize has been removed in newest version of HighCharts.
I managed to do the same with these lines:
chart.options.chart.width = null;
chart.options.chart.height = null;
i use update function to solve this problem.
this.$refs.highcharts.chart.update({
chart: {
width: undefined,
height: undefined,
},
});
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.
I was having an issue where a flot graph would not render in a tabbed interface because the placeholder divs were children of divs with 'display: none'. The axes would be displayed, but no graph content.
I wrote the javascript function below as a wrapper for the plot function in order to solve this issue. It might be useful for others doing something similar.
function safePlot(placeholderDiv, data, options){
// Move the graph place holder to the hidden loader
// div to render
var parentContainer = placeholderDiv.parent();
$('#graphLoaderDiv').append(placeholderDiv);
// Render the graph
$.plot(placeholderDiv, data, options);
// Move the graph back to it's original parent
// container
parentContainer.append(placeholderDiv);
}
Here is the CSS for the graph loader div which can be placed
anywhere on the page.
#graphLoaderDiv{
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 150px;
}
Perhaps this is better solution. It can be used as a drop in replacement for $.plot():
var fplot = function(e,data,options){
var jqParent, jqHidden;
if (e.offsetWidth <=0 || e.offetHeight <=0){
// lets attempt to compensate for an ancestor with display:none
jqParent = $(e).parent();
jqHidden = $("<div style='visibility:hidden'></div>");
$('body').append(jqHidden);
jqHidden.append(e);
}
var plot=$.plot(e,data,options);
// if we moved it above, lets put it back
if (jqParent){
jqParent.append(e);
jqHidden.remove();
}
return plot;
};
Then just take your call to $.plot() and change it to fplot()
The only thing that works without any CSS trick is to load the plot 1 second after like this:
$('#myTab a[href="#tabname"]').on("click", function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
or for older jquery
$('#myTab a[href="#tabname"]').click (function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
The above example is applied to Bootstrap tags for Click funtion. But should work for any hidden div or object.
Working example: http://topg.org/server-desteria-factions-levels-classes-tokens-id388539
Just click the "Players" tab and you'll see the above example in action.
This one is a FAQ:
Your #graphLoaderDiv must have a width and height, and unfortunately, invisible divs do not have them. Instead, make it visible, but set its left to -10000px. Then once you are ready to show it, just set it's left to 0px (or whatever).
OK, I understand better now what you're actually saying... I still think your answer is too complicated though. I just tried this out using a tabbed interface where the graph is in a hidden tab when it's loaded. It seems to work fine for me.
http://jsfiddle.net/ryleyb/dB8UZ/
I didn't have the visibility:hidden bit in there, but it didn't seem necessary...
You could also have visibility:hidden set and then change the tabs code to something like this:
$('#tabs').tabs({
show: function(e,ui){
if (ui.index != 2) { return; }
$('#graphLoaderDiv').css('visibility','visible');
}
});
But given the information provided, none of that seems particularly necessary.
I know this is a bit old but you can also try using the Resize plugin for Flot.
http://benalman.com/projects/jquery-resize-plugin/
It is not perfect because you'll sometimes get a flash of the non-sized graph which may be shrunk. Also some formatting and positioning may be off depending on the type of graph that you are using.