[RESOLVED] JQuery Render Time & HighCharts

**aNubies** · Aug 6th, 2014, 09:02 AM

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?

**aNubies** · Aug 7th, 2014, 06:50 AM

Anyone guys can help me here.

**sapator** · Aug 7th, 2014, 07:05 AM

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>

**aNubies** · Aug 7th, 2014, 08:40 AM

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.

**sapator** · Aug 7th, 2014, 09:06 AM

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...

**aNubies** · Aug 8th, 2014, 01:04 AM

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.

**sapator** · Aug 8th, 2014, 01:30 AM

I am not sure why you need a ASP.Net button for this.

**aNubies** · Aug 8th, 2014, 03:01 AM

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?

**aNubies** · Aug 8th, 2014, 03:59 AM

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?

**sapator** · Aug 8th, 2014, 04:10 AM

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.

**aNubies** · Aug 8th, 2014, 04:43 AM

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.

**sapator** · Aug 8th, 2014, 05:14 AM

Google for Jquery and webservice, if you have problems making it work start a thread and will try to help.

**aNubies** · Aug 8th, 2014, 05:30 AM

Thank you sapator

.

**sapator** · Aug 8th, 2014, 05:38 AM

No problem, thanks for the rep.

**reneep** · Jan 21st, 2015, 06:15 AM

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 @ reneep@packtpub.com.

Thread: [RESOLVED] JQuery Render Time & HighCharts

Thread Tools

Display

[RESOLVED] JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Re: [RESOLVED] JQuery Render Time & HighCharts

Re: JQuery Render Time & HighCharts

Posting Permissions