I want to create a popover ontime of click event in bar charts. i am creating bar charts using nvd3.
chart.multibar.dispatch.on("elementClick", function(d,element) {
$('nvd3 .nv-multibar .nv-groups rect:hover').popover({
'trigger':'hover'
,'container': 'body'
,'placement': 'top'
,'white-space': 'nowrap'
,'show': true
,'html':'true'
}); }
but this popover is not working!!
any help please......?
Related
I have a d3 bar chart and I would like to have it so when a bar is clicked on the chart, HTML is loaded in another section of the page. As I've been trying to research how to do this, I am becoming more and more confused. Should I use a <div> or an <iframe>? I have this which works as far as a clicking event goes:
.on("click", function() { alert("Hello world"); })
But I don't think I can use it since I want different bars to open different content. So I also need to figure out how to tie which bar is clicked to which file is opened. Can anyone point me in the right direction? Thanks.
Add an onclick event which passes clicked bar reference to the function which loads html.
.on('click', function(d) {loadHtml(d)});
Then create a loadHtml function
function loadHtml(clickedBar)
{
if (clickedBar[0] = "foo")
{
$('#DivForLoadingHtml').load("http://mydomain.xyz/foo.htm");
}
if (clickedBar[0] = "bar")
{
$('#DivForLoadingHtml').load("http://mydomain.xyz/bar.htm");
}
}
I have a page with two kendo ui Windows. Using javascript/html5 flavor.
How can I programatically change the color of the window title bar after it has been rendered on the page?
and also is there an event tied to the user clicking on the window?
TIA
You can either change all Kendo Windows' CSS on the page, or get a specific instance, and change its titlebar CSS only:
kendoWindow.wrapper.find('.k-window-titlebar').css({
color: 'red',
'background-color': 'yellow'
});
... or
$('.k-widget.k-window .k-window-titlebar').css({
color: 'red',
'background-color': 'yellow'
});`
Example
I am looking for a way to make the vertical splitter between the grid data and the graph data not resizable. I know the Kendo Gantt Widget uses a Kendo Splitter widget, but when I try to disable the resizable option, it completely hoses the chart; the code I tried is below. The #gantt ID is where my gantt chart renders.
$("#gantt").kendoSplitter({
panes: [ { resizable: false }, { resizable: false } ]
});
Not great, but a solution could be to return false for dragstart/mousedown on the splitter bar and set the cursor to default and pointer events to none:
$("#gantt .k-resize-handle").hide();
$("#gantt .k-splitbar").on("dragstart mousedown", function(e){
return false;
}).css("cursor", "default").css("pointer-events", "none");
DEMO
I have craete KendoChart pie with legend.
For some reason legend by default is interactive and by clicking on legend items chart enables/disables pieces of the pie.
I didn't find any way to disable this behavior: http://docs.telerik.com/kendo-ui/api/dataviz/chart
Could it be disabled?
I needed to do the same thing and after some research found out in the Kendo UI documentation the following solution:
- hook to the legendItemClick and legendItemHover events of the chart
- in the handler call e.preventDefault();
Here is the code I used (MVVM-style):
In HTML:
data-bind="events: { legendItemClick: disableEvent, legendItemHover: disableEvent } "
In the ViewModel:
disableEvent: function(e) {
e.preventDefault();
}
Here is the article - http://docs.telerik.com/kendo-ui/api/dataviz/chart
Use the code Below
legend: {
position: "bottom",
visible: false
},
I am trying to implement the horizontal bar chart using jqplot.I want to enable click event for the y axis labels.
But i tried it with the jquery using class name to get access of "y axis ticks" .
$('.jqplot-yaxis-tick').click(function ()
{
alert("you have clicked the label");
});
Is there any event to do this like "jqplotDataClick" event in jqplot?
This issue was solved
From Here
just update the z-index of the .jqplot-yaxis-tick so it would be the first div to be clicked and added .live (or .on)
$('.jqplot-yaxis-tick').css({
cursor: "pointer",
zIndex: "200"
}).live('click', function (e) {
alert("you have clicked the label");
});