I want to draw graph in java script. Let me share my problem with simple example.
Ind vs Aus cricket match.
X axis- Overs
Y axis- Runs
I want to show runs scored in each over by both teams in same graph. Can i show them together?
your experience will be useful to me. hoping for help.
would be grateful for help...thanks in advance,,
Try the Google Visualization API:
It includes classes to build datatables and then visualize them with different types of charts:
Example from the Google Visualiation Code Playground:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}}
);
}
This will create a line chart with the X and Y axis which is what you are try to do.
gRaphael is a great choice for charts for web. It uses javascript to produce graphs in SVG and, in old versions of IE, VML, which makes it a great cross-browser starting point - it works in IE6 and above and doesn't need flash. Another good advantage is, using SVG/VML DOM elements controlled by a javascript object means your graph elements can be made highly interactive and manipulated in javascript at any time.
Example code (from doc barchart examples):
r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout);
That line creates a two-variable bar chart which calls mousein and mouseout callback functions on each element which you could use to show related information e.g., in their example, the exact values. A two variable bar chart is probably a good way to represent two teams' scoring by over for one innings. A graphael dot chart might be a better good option if there are multiple overs and multiple innings - one for each team. There are other chart types supported too - see the demo examples on the main project page above.
