SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Draw wagon wheel chart using jquery for cricket?

    I am using jquery mobile I need to show wagon wheel chart for cricket as shown below using jquery or html. Can anyone help me to sort out this?

    Edit:

    wrong link removed
    Last edited by Mittineague; Jan 28, 2014 at 23:19.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums.
    I'm afraid however that the page you link to shows a bunch of PHP errors and nothing more

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wheel.jpg

    Hi,
    Sorry to send you the wrong link. Attached sample image that I need, not to be specific at least some lines need to draw from center of the image with various co-ordinate.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    It seems that a library such as grapher would be the best way to go.

    If you look under chart types, it claims to support "Wagon (cricket style wagon wheels)"

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I really don't know how to implement the graph with html page.. Below is the code, What I need to do to view in browser? Do I need to include image for background? Help me to pass some value and make this view able in browser. although I red the readme file in your mentioned link https://github.com/rcbdev/grapher. I was wondering a week for this.

    How can I include the same in html. Am doing rite in the below code? if NO, what I need to do to get the wheel with values in browser. Initialize me how to start passing value to wagon wheel. to get the output in browser

    Code:
    <html>
    	<head>
    		<script type="text/javascript" src="grapher-master/grapher.js"></script>
    	</head>
    	<body onload="wagon(123);">
    		<div id="wagon()"></div>
    	</body>
    </html>
    Last edited by Mittineague; Jan 28, 2014 at 23:23. Reason: rem dup

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    I don't have time to play with it now. But the first thing you need to do is get your syntax right.

    I would start by taking onload out of the body tag and not use a function call as an id.
    Then write your function inside a script tag in the head

    It looks like you need
    To initialise a new grapher, call g() passing in either a string of the id of the canvas you want to use, or a DOM element of the canvas.
    * though it looks like that's a typo and should be grapher(), at least in the non-min version (which you should use during development)
    I'm guessing the code would be something like
    Code JavaScript:
    var my_wheel = grapher("wagon");

    Then
    A wagon chart can be drawn by calling .wagon() and passing in an array of objects containing "runs", "length", and "angle".
    the Int 123 is not an array of objects.

    The question is what does the "array of objects" look like?
    I'm wild guessing (unfortunately I didn't see any use examples) the code would be something like
    Code JavaScript:
    var run_obj = {"runs": 5};
    var length_obj = {"length": 15};
    var angle_obj = {"angle": 45};
    var graph_data = [run_obj, length_obj, angle_obj];
    my_wheel->wagon(graph_data);
    Then before the closing body tag call the function you put inside the head.

  7. #7
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes I did the same as you mentioned. Is that rite?

    Code:
    <html>
    	<head>
    		 <script type="text/javascript" src="grapher-master/grapher.js"></script>
    	     <script>
    		 function test()
    		 {
    		 	var my_wheel = grapher("wagon");
    			var run_obj = {"runs": 5};
    			var length_obj = {"length": 15};
    			var angle_obj = {"angle": 45};
    			var graph_data = [run_obj, length_obj, angle_obj];
    			my_wheel->wagon(graph_data);
    		}
    		</script>
    	</head>
    	<body>
    		<script>
    			test();
    		</script>
       	</body>
    </html>

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    You need the
    HTML Code:
    <div id="wagon"></div>
    so there will be a place for the script to put the image.

    Give it a try and check your browser error console for error messages if it doesn't work (probably won't, but it will be a start)

  9. #9
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes I did the same as you said. See the below code. Is that code is rite?if No, What else I need to add? Nothing happens in my browser.

    Code:
    <html>
    	<head>
    		 <script type="text/javascript" src="grapher-master/grapher.js"></script>
    	     <script>
    		 	var my_wheel = grapher("wagon");
    			var run_obj = {"runs": 5};
    			var length_obj = {"length": 15};
    			var angle_obj = {"angle": 45};
    			var graph_data = [run_obj, length_obj, angle_obj];
    			my_wheel->wagon(graph_data);
    		
    		</script>
    	</head>
    	<body>
    		<script>
                            
    		</script>
       	</body>
    </html>
    I tried this code too
    Code:
    <html>
    	<head>
    		 <script type="text/javascript" src="grapher-master/grapher.js"></script>
    	     <script>
                       function test()
                       {
    		 	var my_wheel = grapher("wagon");
    			var run_obj = {"runs": 5};
    			var length_obj = {"length": 15};
    			var angle_obj = {"angle": 45};
    			var graph_data = [run_obj, length_obj, angle_obj];
    			my_wheel->wagon(graph_data);
    		}
    		</script>
    	</head>
    	<body>
    		<script>
                            test();
    		</script>
       	</body>
    </html>

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I think you need a canvas to draw on, not a div element.

    This will get you started with the basic chart.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
    
      <body>
        <canvas id="wagon"></canvas>
    
        <script src="grapher.js"></script>
        <script>
          var my_wheel = g("wagon");
          my_wheel.wagon([]);
        </script>
      </body>
    </html>
    The wagon method is expecting an array of objects containing "runs", "length", and "angle".
    I'm not sure what are reasonable values here, so I couldn't get anything to work.

    Hopefully this helps anyway.

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    After a bit of looking and playing I managed to get a display.

    And it is "g", I missed seeing that the script assigns g to grapher
    HTML Code:
    <html>
    	<head>
    		 <script type="text/javascript" src="grapher.js"></script>
    	     <script type="text/javascript">
    		 function test()
    		 {
    		 	var my_wheel = g("wagon");
    			var run_obj = {"runs": 5};
    			var length_obj = {"length": 15};
    			var angle_obj = {"angle": 45};
    			var graph_data = [run_obj, length_obj, angle_obj];
    			my_wheel.wagon(graph_data);
    		}
    		</script>
    	</head>
    	<body>
    		<canvas id="wagon"></canvas>
    		<script type="text/javascript">
    			test();
    		</script>
       	</body>
    </html>
    Frustrating not to find any use examples! Now to figure out the correct object syntax.
    I'm thinking instead of 3 objects, it's multiple objects (one for each data point) each with the 3 properties.

  12. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    OK, got it.
    "runs" is the group the data belongs to (6 max?)
    "length" is expressed as a percent of the circle's radius
    "angle" is the degree where it will be
    HTML Code:
    <html>
    	<head>
    		<style type="text/css">
    			canvas {
    			margin-left: 40%;
    			margin-top: 10%;
    			}
    		</style>
    		 <script type="text/javascript" src="grapher.js"></script>
    	     <script type="text/javascript">
    		 function test()
    		 {
    		 	var my_wheel = g("wagon");
    			var graph_data = [
    					{"runs":2, "length":.5, "angle":45},
    					{"runs":3, "length":.1, "angle":90},
    					{"runs":4, "length":.2, "angle":135},
    					{"runs":5, "length":.3, "angle":180},
    					{"runs":2, "length":.4, "angle":225},
    					{"runs":3, "length":.5, "angle":270},
    					{"runs":4, "length":.6, "angle":315},
    					{"runs":5, "length":.7, "angle":360}
    					];
    			my_wheel.wagon(graph_data);
    		}
    		</script>
    	</head>
    	<body>
    		<canvas id="wagon"></canvas>
    		<script type="text/javascript">
    			test();
    		</script>
       	</body>
    </html>
    graph.png

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Good job!
    It was the length that was getting me, I think.

  14. #14
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Pullo View Post
    Good job!
    It was the length that was getting me, I think.
    I know it sure had me baffled for a while. Nothing like lack of documentation to make things interesting

    @vyvanand ; you may find this more helpful for you getting your data to graph. The random functions though not useful to you do make for a more interesting graph, but the "push" syntax should help.
    HTML Code:
    <html>
    	<head>
    		 <script type="text/javascript" src="grapher.js"></script>
    	     <script type="text/javascript">
    		 function random_runs()
    		 {
    			var ran_num = Math.random();
    			var ran_run = Number.toInteger(ran_num * 10);
    			if (ran_run > 6)
    			{
    				ran_run = Number.toInteger(ran_run / 2);
    			}
    			return ran_run;
    		}
    		 function random_length()
    		 {
    			var ran_num = Math.random();
    			var ran_len = ran_num.toFixed(2);
    			return ran_len;
    		}
    			
    		 function test()
    		 {
    		 	var my_wheel = g("wagon");
    /*
    			var graph_data = [
    					{"runs":2, "length":.5, "angle":45},
    					{"runs":3, "length":.1, "angle":90},
    					{"runs":4, "length":.2, "angle":135},
    					{"runs":5, "length":.3, "angle":180},
    					{"runs":2, "length":.4, "angle":225},
    					{"runs":3, "length":.5, "angle":270},
    					{"runs":4, "length":.6, "angle":315},
    					{"runs":5, "length":.7, "angle":360}
    					];
    */
    			var graph_data = [];
    			for (var deg = 0; deg < 360; deg++)
    			{
    				var data = { "runs": random_runs(), "length": random_length(), "angle": deg };
    				graph_data.push(data);
    			}
    			my_wheel.wagon(graph_data);
    		}
    		</script>
    	</head>
    	<body>
    		<canvas id="wagon"></canvas>
    		<script type="text/javascript">
    			test();
    		</script>
       	</body>
    </html>
    graph2.png

  15. #15
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Its really awesome... Thanks @Mittineague & @Pullo


Tags for this Thread

Bookmarks

Posting Permissions

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