Results 1 to 15 of 15

Thread: [RESOLVED] JQuery Render Time & HighCharts

  1. #1

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    Resolved [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?

  2. #2

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    Re: JQuery Render Time & HighCharts

    Anyone guys can help me here.

  3. #3
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    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>
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  4. #4

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    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.
    Last edited by aNubies; Aug 7th, 2014 at 09:00 AM.

  5. #5
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    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...
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  6. #6

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    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.
    Last edited by aNubies; Aug 8th, 2014 at 01:08 AM.

  7. #7
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: JQuery Render Time & HighCharts

    I am not sure why you need a ASP.Net button for this.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  8. #8

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    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?
    Last edited by aNubies; Aug 8th, 2014 at 03:09 AM.

  9. #9

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    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?

  10. #10
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  11. #11

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    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.

  12. #12
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  13. #13

    Thread Starter
    Fanatic Member aNubies's Avatar
    Join Date
    Aug 2008
    Posts
    558

    Re: JQuery Render Time & HighCharts

    Thank you sapator .

  14. #14
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,594

    Re: [RESOLVED] JQuery Render Time & HighCharts

    No problem, thanks for the rep.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  15. #15
    Registered User
    Join Date
    Jan 2015
    Posts
    1

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width