mschart zoom and scroll - c#

This must be a stupid question but i'm kind of stuck in it. I need to display 6000+ records on a mschart using c# for a web application. But he issue is it displays without spaces, but this is unacceptable because i want to see the seperate columns for each recors. I browsed through many solutions provided online but that does not apply to my issue, I tried,
//Set automatic zooming
chart1.ChartAreas["Default"].AxisX.ScaleView.Zoomable = true;
chart1.ChartAreas["Default"].AxisY.ScaleView.Zoomable = true;
// Set automatic scrolling
chart1.ChartAreas["Default"].CursorX.AutoScroll = true;
chart1.ChartAreas["Default"].CursorY.AutoScroll = true;
But the AxisX, AxisY commands gives an error saying that is not available. please help me i tried everything i can but it doesnt work. i even tried this,
http://nuget.org/packages/MSChartExtension
eventhough it is for windows forms, but no luck..please help me.. I appreciate it very much. :)
EDIT: This is the code i came up with after the reference..but it doesnt display anything :( i am a noob at this please help :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<div id="chartdiv" style="height:400px;width:300px; ">
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript">
$.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
</script>
</div>
</form>
</body>
</html>
and i put all the javascripts that i downloaded from here to my project folder which is,
C:\Users\DELL\Documents\Visual Studio 2010\WebSites\WebSite1 .. please correct me if i am wrong

if you are still in beginning of development, i would strongly recommend using jqPlot
as it has got many options and great visual effects. It is also very easy to use with ASP.NET.
EDIT:
it seems from your code that you forgot to add references to the script files as mentioned here
you should add these in the <head></head> of your page:(change src as location of files in your project)
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

Related

How do I get started with JTSage DateBox controls and ASP.net?

I am a noob at jQuery, so please help me out.
I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)
I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.
How do I go about getting this to work? Will it work?
I have placed this in my master page.
<head runat="server">
<link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<title>Tec-NQ Boarding Register</title>
<asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
But all I get is a textbox! Where/how do I get the date control to show up?
I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.
<div class="input-group"><input type="text" data-options="{"mode":"calbox", "useInline":false, "useInlineAlign": "right"}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>
I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.
How do you get this thing to work please? It's driving me nuts.
Thanks
The answer was staring at my face!
https access priveleges
Once I downloaded the js files directly and stored them locally, everything worked off the bat!

Which Control should be used for output directly in page or should I use Response.Write?

I need to output the following... within a User Control. Currently gets outputted within the .ascx file, but I need to output it in the .ascx.cs file instead to change a control.
The current code in the .ascx file is this:
<link rel="stylesheet" href="<%=MMG.Global.FileHelper.GetCSSVersion("/scripts/jquery-select2/select2.css") %>" />
<link rel="stylesheet" href="<%=MMG.Global.FileHelper.GetCSSVersion("/styles/custom-theme/jquery-ui-1.9.1.custom.css") %>" />
<link href="<%=MMG.Global.FileHelper.GetCSSVersion("/styles/styles.css") %>" type="text/css" rel="stylesheet" media="all" />
<link href="<%=MMG.Global.FileHelper.GetCSSVersion("/styles/print.css") %>" type="text/css" rel="stylesheet" media="print" />
<link rel="stylesheet" href="<%=MMG.Global.FileHelper.GetCSSVersion("/scripts/jquery-fancybox/jquery.fancybox.css") %>" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--<script type="text/javascript" src="/scripts/jquery.stickyfooter.js"></script>
<script type="text/javascript" src="/scripts/modernizr.js"></script>
<script type="text/javascript" src="/scripts/jquery-select2/select2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-tab.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.9.1.custom.min.js"></script>-->
<%--<script type="text/javascript" src="http://tcadops.ca/consumer/adtagtc.js"></script>--%>
<script type="text/javascript" src="/scripts/adtagtc_old.js"></script>
<!-- Smooth Div Scroll Plugin
<script type="text/javascript" src="/scripts/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.kinetic.js"></script>
<script type="text/javascript" src="/scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.smoothdivscroll-1.3-min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datepicker.js"></script>
-->
<script type="text/javascript" src="//use.typekit.net/qrs7pfm.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<!--<script type="text/javascript" src="/scripts/jquery.isotope.min.js"></script>-->
<script type="text/javascript" src="/scripts/jquery-fancybox/jquery.fancybox.pack.js"></script>
<meta name="viewport" content="width=1024" />
But it will need to change to different <script> tags depending upon a statement within the .ascx.cs file. How would I change the above code to something else if using within a .ascx.cs file in an if statement?
I thought about Response.Write, but this code has functions also. Maybe there is a better way to do this?
In your .ascx file:
<% if (someCondition) { %>
<script>....</script>
<% }
else { %>
<script>(Some other script)</script>
<% } %>
Then in your code behind (ascx.cs) set the value of someCondition
Since you are loading dynamically, keep your code clean and use the conventions provided by ASP.Net. You can do this in either code-behind (or in ASCX if you prefer).
ClientScriptManager s = Page.ClientScript;
if(somecondition){
s.RegisterClientScriptInclude("myscript", "[url to script file]");
}else{
s.RegisterClientScriptInclude("myscript", "[url to other script file]");
}

SCRIPT5009: 'JSON' is undefined in IE 10 The value of the property '$' is null or undefined, not a Function object

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hello World</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-2.0.3.js">
$(document).ready(function () {
<%--$("#width").val() = $(window).width();
$("#height").val() = $(window).height();--%>
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#width").val($(window).width());
$("#height").val($(window).height());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="width" type="hidden" runat="server" />
<input id="height" type="hidden" runat="server" />
</form>
</body>
</html>
the above is my aspx code with jquery script which gives the window height and width.
this code perfectly fine on all the browsers when i run the web app from visual studio http://localhost/Mypage.aspx
but when i host it on iis and run with my machine name http://MyMachine/Mypage.aspx it gives JSON undefined and the Property "$" is null or undefined errors.( this is only in IE 10 (non-compatibility mode) , for chrome it works fine)
question 1) do we need to take care of any security constraints for IE 10?
question 2) why does it happen this way when i host it on iis and run it with machine name on my own machine?
question 3) am i missing any jquery refrence.
question 4) obvious one, any solution to this problem.
use the Meta tag as suggested by many of the people.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
but I want to give an importatnt tip. the mata tag should be the first tag in the head tag. I have read it some where if it is not the first tag it would not have its effect.
Are you sure you have the Scripts folder with jquery in the server?
I suggest you to debug with fiddler and see if jquery is loaded correctly or if there is an http error.
as suggested by I4v, adding this to the header fixed the bug for me too:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Thanks guys

Javascript Plugin Noty doesn't work on Button Click

I am very new to JQuery. I want to implement Stack Overflow style notification on top of my page. So for that matter, I downloaded a JQuery plugin from NOTY
. I have read the tutorial but it doesn't explain how to implement this properly. All I want is to display the top notification on a button click. I have imported all the .js files as mentioned in the tutorial but can't figure out how to show the bar whenever i click a button.
Not just the NOTY plug in mentioned earlier, i don't know how to use .js files on button click for any plugin available on the net.
Can somebody please help?
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="../Scripts/jquery.noty.js" type="text/javascript"></script>
<script src="../Scripts/top.js" type="text/javascript"></script>
</asp:Content>
Now what to write in the button click event?
protected void Button1_Click(object sender, EventArgs e)
{
}
You need to refer this documentation for the noty usage
on the button click write this code
var noty = noty({text: 'noty - a jquery notification library!'});
I wrote some example here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.noty.js"></script>
<script type="text/javascript" src="top.js"></script>
<script type="text/javascript" src="default.js"></script>
<script>
function myNoty()
{
var n = noty({
text: 'hello',
type: 'success',
dismissQueue: true,
layout: 'top',
theme: 'defaultTheme'
})
}
</script>
</head>
<body>
<input type="button" onclick="myNoty();" value="Click!"/>
</body>
</html>
change the options for your needs.

facebox() error object doesnt support this property or method

I have an application that contains this code:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/facebox.js" type="text/javascript"></script>
<link href="facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a rel="facebox" href="WebForm1.aspx">Open Facebox Dialog with 0 opacity</a>
</form>
</body>
</html>
In this one the facebox works very well,
Im applying the same principle in another application in which i render my anchor
dynamically :
link = new HtmlGenericControl("a");
link.InnerText = Path.GetFileName(value);
link.Attributes.Add("rel", "facebox");
link.Attributes.Add("href", "WebForm1.aspx");
panel.Controls.Add(link);<br/>
and ive got this code on my page
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/facebox.js"></script>
<link href="css/facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
In this one Im having an error on facebox(). Object doesnt support this property or method.Why m i getting this error although i do have the same code in another application
and it works perfectly there ?!?!
Thanks alot
And, is the path js/facebox.js exists inside the page location?
Remember that the link to the js file will be relative to the current page location since you are not providing ab absolute path to the file and probabliy you are using a page in a diferent location from the Master.Page of the site root .
I dont know why, but when i put the script tage inside the body it worked

Categories