[RESOLVED] JQuery Render Time & HighCharts
Guys,
I'm trying to figured out how to execute the HighChart after the button click. Here are my codes:
Code:
<script type="text/javascript">
$(function () {
var option = {
chart: {
renderTo: 'container',
type: 'column'
},
series: []
};
$('#Button1').click(function() {
option.series = [{name: 'A', data: ['1,2,3,2,1']}];
var chart = new Highcharts.Chart(option);
});
});
</script>
Code:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<div id="container" style="position: absolute; left: 15px; top: 54px; min-width: 984px;
height: 400px; margin: 0 auto; width: 1157px;"></div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
This will just give me a blink of HighChart not giving me a fully working chart. So my question is how to do it and is JQuery have postback?
Re: JQuery Render Time & HighCharts
Anyone guys can help me here.
Re: JQuery Render Time & HighCharts
You did not specify what company chart these is but i guess highcharts from a Google search.
You do not need an updatepanel not a scriptmanager.
You button better be an html one.Anyhow i got a sample from there and incorporated it to asp.net.
Have a look:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" />
</div>
<div id="container">
</div>
</form>
</body>
</html>
Re: JQuery Render Time & HighCharts
It's working but when editing the data, it will go back to default data.
And why no scriptmanager and updatepanel? Does it will give conflict to the process?
-------------------------------------------------------------------------------------------
I got it now, why is it be needed to be an html button and not an asp.net button? Is it because asp.net button has a postback trigger that is why it conflicts the return data of HighChart. And if it is, how I can incorporate it with an ASP.Net Button so I can change the data that will be provided for HighChart and at the same time displaying the data right away.
Re: JQuery Render Time & HighCharts
Why do you need a scriptmanager and an updatepanel?
You certainly do not need it for the chart. If you need it for another part of the project then,ok, use it but in this scenario there is no need for them.
You said: "It's working but when editing the data, it will go back to default data."
I have no idea what your problem is, please explain better and you can post some code. I gotta run...
Re: JQuery Render Time & HighCharts
I play around the code and added 1 HTML Button and 1 ASP.Net Button. So by clicking the HTML Button it will display the chart but when clicking the ASP.Net Button the chart vanish.
So how to incorporate it into an ASP.Net button.
Re: JQuery Render Time & HighCharts
I am not sure why you need a ASP.Net button for this.
Re: JQuery Render Time & HighCharts
Because the data that HighChart will rely on is based on the server, so the user will choose one of the buttons and will display the data right away. So should I make another way around to update the data of the HighChart?
Re: JQuery Render Time & HighCharts
I found a way :). I used ScripManager.RegisterStartUpScript(), so basically the ASP.Net Button will update the data onto a textbox then it will call the function of a HighChart which is updated data.
I don't know yet if this will work base on what I'm expecting, but this would be a one of a way. Do you have any suggestion Sir?
Re: JQuery Render Time & HighCharts
You would be better of writing a web service that will get the data from the server and transport it into the markup. This situtios just screams web service. Anyway if you don't want to do that (and i don't see why), you can use the asp.net button onclick and onclientclick events. onclick is for the server call and onclientclick is for the client, only problem here is i am not sure which will fire first. If client fires first then you will have a problem and if i remember correctly the client fires first. Also about ScripManager.RegisterStartUpScript() , this works on page load so maybe it will work if you use the button as is, thus, trigger the server calls. You must try.
Re: JQuery Render Time & HighCharts
I want to try the web service instead for a change :). Yeah that was my problem the HTML Button fires first because it is a client side and ASP.Net Button follows, that is why I used the ScripManager to trigger the ServerSide first then calling the client script.
I'd better look somewhere of how to use a webservice cause never been use it in a development.
Re: JQuery Render Time & HighCharts
Google for Jquery and webservice, if you have problems making it work start a thread and will try to help.
Re: JQuery Render Time & HighCharts
Re: [RESOLVED] JQuery Render Time & HighCharts
No problem, thanks for the rep.
Re: JQuery Render Time & HighCharts
Maybe this video could help you out to solve your problems bit.ly/1u1r0kZ . Do let me know if you need a copy you can write to me @ [email protected].
