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
Hi,
Welcome to the forums.
I’m afraid however that the page you link to shows a bunch of PHP errors and nothing more 
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.
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)”
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
<html>
<head>
<script type="text/javascript" src="grapher-master/grapher.js"></script>
</head>
<body onload="wagon(123);">
<div id="wagon()"></div>
</body>
</html>
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
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
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.
Yes I did the same as you mentioned. Is that rite?
<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>
You need the
<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)
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.
<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
<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>
I think you need a canvas to draw on, not a div element.
This will get you started with the basic chart.
<!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.
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>
<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.
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>
<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>
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>
<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>