dial and place are the two divisions which exist in the html code that calls the function.
I am able to open up both of them but not able to embed the graph using plot in the 'place' division after it is opening up via the 'Draw' button.
It works fine only when I open both the boxes initially.
function abcd (dial,place,xrange){
var dial = conv(dial)
var xr = document.getElementById("xrange");
var yr = document.getElementById("yrange");
var gtype = document.getElementById("pattern");
xr.value = ""; yr.value = ""; gtype.value = "Line" ;
var place = conv(place);
$(dial).dialog("close");
$(dial).dialog("open");
$(place).dialog({
autoOpen: false,
show: 'Explode',
height: 500,
width: 450,
modal: true})
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$((place)).dialog("open");
$(function () {
//manipulate input values to plot data
$.plot(document.getElementById(plac2), [ {data:d1roe,label:"abc"},
{data:d1roa, label:"xyz"} ], {
series: {stack: 0},
xaxis: {ticks: ticks},
ticks: ticks
});
});
//function open(xyz) {$(xyz).dialog("open");}
function conv (myid) {
return ( '#' + myid );
}
I figured out a quick fix for it.
The problem was that the dialog will open but will not be manipulated by flot because it was unable to extract the width and height of the dialog box. So before opening the dialog we can fix the height and width.
Specifying height in the style sheet of html did not work in my case.
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$(place).width(500); // can take this as an input as well
$(place).height(500);
$(place).dialog("open");
//ploting code
}})}
The key thing you need for flot to work is for your plac2 div to have a width and height, and be visible (i.e. drawn to the screen). So before you plot, try alerting whether your div has width and height:
var placeholder = document.getElementById(plac2);
alert($(placeholder).width()+','+$(placeholder).height());
//plotting code here
Let us know what happens.
Related
12.4 to generate a pdf,charts are drawn by chartist,because chartist is svg based. I can see the chart in browser by html(test-chartist.html right chart).But When I user the command wkhtmltopdf --dpi 300 --page-size A4 test-chartist.html test3.pdf, chart is blank in the test3.pdf. And then I add the flowing js , the result is weirdsize is not right and direction is not right too
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
can anybody help me? thank you very much
OK，I suddenly found out the answer.
If I add width and height to the chart's options, everything is fine, as below:
var options = {
width: 800,
height: 150,
donut: true,
donutWidth: 30,
startAngle: 240,
total: 30,
showLabel: true,
animation:false
};
new Chartist.Pie('#mainImg', {
series: [10,10]
},options);
I hope it can help others.
I'm working on a new project and I need to create an event where a menu list will show up once I right click on a label. Any idea how to do this?
When you click on a list from the menu box, a dialog box will appear. I do know how to create a dialog box but my problem is the right click event.
var createDialog = function(){
dialog = new Ext.LayoutDialog(id+'container', {
title: "DXFエクスポート",
width: 350,
height: 400,
shadow: true,
proxyDrag: false,
resizable: true,
modal: false,
autoScroll:true,
center: {
autoScroll:true
},
south: {
height: 60
}
});
I hope someone can give me an idea how to do mouse events.
I have a javascript function, which is opening a jquery dialog:
function new_popup() {
var editor = "victorio"; //want to give
var sex = "male"; //want to give
$("#new-dialog-form").dialog({
autoOpen: false,
height: 700,
width: 800,
modal: true,
title: "New Dialog",
buttons: { //.....buttons whatever.....
},
close: function() {
}
});
$("#new-dialog-form").load('<%=newPopupUrl%>').dialog('open');
}
I want to give the editor and the sex values for the new dialog, which opens the "new_frame.jsp", which has two labels with the IDs:
<label class="form_label" id="editor"/>
<label class="form_label" id="sex"/>
So when we open the new dialog, these 2 labels will be auto completed with the given values.
How can I give the values for the dialog, and how and where can I get and set the given values in the new jsp? Thank you for your helping!
I am trying to create a small window with a text area inside every time the click of a button happens. However when I click the button more than once, a new window is created but only the first window contains the text area. Can anyone help?
var noteNumber = 0;
$("#createNoteButton").click(function () {
var noteWindowDivId = "noteWindow" + noteNumber;
$("<div id=noteWindowDivId />").appendTo(document.body).kendoWindow ({
draggable: true, resizable: true, width: "480px",
height: "100px", title: "Note",
scrollable: false,
modal: false, actions: ["Close"]
});
$("#noteWindowDivId").data("kendoWindow").content("<textarea id=noteNumber style='width: 100%; height: 100%'> </textarea>");
noteNumber++;
}
);
Here is the dialog html:
<div id="login-prompt">
Please #Html.ActionLink("Log on", "LogOn", "Account", new { returnUrl = Request.RawUrl }, null)
or #Html.ActionLink("Register", "Register", "Account", new { returnUrl = Request.RawUrl }, null)
</div>
Here is the dialog initialization javascript:
$("#login-prompt").dialog({ autoOpen: false, width: 300, height: 100, modal: false });
And the function that opens the dialog:
function ShowLoginPrompt(context, leftOffset, topOffset) {
var position = context.position();
var loginPrompt = $("#login-prompt");
loginPrompt.dialog("option", "position", [position.left + leftOffset, position.top + topOffset]);
loginPrompt.dialog("open");
}
Regardless of the height I set during initialization, it is always auto in the resulting html.
I didn't track down the exact problem causing this but was able to correct it by stripping all custom styles and just using the default jquery dialog css file.