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/
Related
I would like to make panels visible/invisible by button.
in this sample remove/add panels.
But when adding, I need to make a panel and settings again.
I would like to just make panels visible/invisible not delete.
I have googled around and not found samples.
Is it possible??
Thanks to #Robbert reply
I could hide the panel . like this .
$(".amcharts-stock-panel-div-stockPanel1").hide();
However it does not re-adjust the each panel size.
If I call the
So I try like this .
$(".amcharts-stock-panel-div-stockPanel1").hide();
chart.panels[1].percentHeight = 1;
chart.validateNow();
it hide the panel and adjust the each panel height.
However, if you use validateNow() when percentHeight = 1;
this error happens.
amcharts.js:26 Uncaught TypeError: Cannot read property 'translate' of undefined
at b.fixVLine (amcharts.js:26)
at b.adjustBalloonCoordinate (serial.js:17)
at b.showBalloon (amcharts.js:5)
at b.handleCursorMove (serial.js:8)
at b.dispatchMovedEvent (amcharts.js:27)
at b.syncWithCursorReal (amcharts.js:28)
at b.syncWithCursor (amcharts.js:28)
at b.handleCursorChange (amstock.js:2)
at b.a.inherits.b.fire (amcharts.js:1)
at b.dispatchMovedEvent (amcharts.js:27)
my final solution is like this , not use css, but prepare variable panelBack for panel backup.
//removing ...
pos = //panel position.
var panelBack = chart.panels[pos];
chart.removePanel(chart.panels[pos]);
chart.validateNow();
//adding...
chart.addPanelAt(panelBack,1);
chart.validateNow();
By looking at the source of the demo, you'll see that the second Stock Panel gets a classname of amcharts-stock-panel-div-stockPanel1. You could hide it using CSS:
.amcharts-stock-panel-div-stockPanel1 {
display: none;
}
.amcharts-stock-panel-div-stockPanel1 * {
/* hide SVG nodes as well */
visibility: hidden;
}
However, amCharts itself is not aware that this panel is hidden, so it will not re-adjust the height of the first stock panel when "removing" it.
I would advice following the method as seen in the example.
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.
So I have a huge array of data and I'm using Highcharts's Heatmap. However I can't get the scrollbar to work, it let me scroll the whole page instead of letting me scroll inside the container. Picture :
I looked around and found out that it had something to do with min and max properties. But I have no idea how it's suppose to works, I tried messing with it after read the documentation but no luck so far.
Here's my JSFiddle : http://jsfiddle.net/ngendk2o/9/
Any help will be appreciated. Thanks
The command suppose to be:
scrollbar: {
enabled: true
}
Additional you have to set the xAxis.max visible columns on the x axis.
xAxis: {
max: 7 // herewith you define the width
}
Also your chart.width blocks the scrolling as it is defined over the total length, don't use it!
// width: data.length * 3,
See the modified jsfiddle here.
I'm trying to make a webtool for users to make a flow chart, which is hierachical. I'm trying to visualize the scope for new draggable connections.
Each node has 'startpoints' on the bottom and can receive connections on the top. (this to enhance the hierarchical structure). Now in my jsfiddle
http://jsfiddle.net/SCSaf/
You can see the 'startpoints' as a square and the 'endpoints' as a Dot. If you start dragging a connection from a square, you see a square, which is odd since it should connect to a Dot.
I tied to change this, since that would solve my problem. I couldn't get it right. I tried changing this bit:
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:25, height:21, fillStyle:'#666' },
isSource:true,
connectorStyle : { strokeStyle:"#666" },
isTarget:false,
maxConnections:5
};
connectorStyle changes only 'the arrow', I can't find an option to change the square on the tip of the Arrow.
The other option is something similar to the jsPlumb demo for draggable:
http://jsplumbtoolkit.com/draggableConnectors/jquery.html
Here you can see that on a dragstart, the receiving nodes get a red dotted line. If I could apply similar styling to the 'endpoints' that would also be OK. The problem with this example is that it would also highlight 'startpoints' from other nodes/containers. (to which it can not connect)
To be clear, the jsfiddle works as I want, only the Visuals are a bit confusing. Hope you can help.
I quite sure I tried this, but now I got it working:
add CSS:
.dragActive {
border: 2px dotted orange;
}
a var like:
var exampleDropOptions = {
tolerance:"touch",
hoverClass:"dropHover",
activeClass:"dragActive"
};
and change the endpointOptions accordingly:
var endpointOptions = {
// ....
dropOptions: exampleDropOptions
}
here's the updated JS-fiddle. Works!
http://jsfiddle.net/SCSaf/1/
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.