column chart issue with google-chart api - google-visualization

Question

I want to show column chart with google chart api and here is my code.
I want to show Month name in bottom x-axis and value to y-axis at left side of graph vetically,however i'm not able to get it
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawVisualization() {
// Create and populate the data table.
var JSONObject = { "cols": [
{ "id": "", "label": "Jan", "Pattern": "", "type": "number" },
{ "id": "", "label": "Feb", "Pattern": "", "type": "number" },
{ "id": "", "label": "Mar", "Pattern": "", "type": "number" },
{ "id": "", "label": "Apr", "Pattern": "", "type": "number" },
{ "id": "", "label": "May", "Pattern": "", "type": "number" },
{ "id": "", "label": "Jun", "Pattern": "", "type": "number" },
{ "id": "", "label": "Jul", "Pattern": "", "type": "number" },
{ "id": "", "label": "Aug", "Pattern": "", "type": "number" },
{ "id": "", "label": "Sep", "Pattern": "", "type": "number" },
{ "id": "", "label": "Oct", "Pattern": "", "type": "number" },
{ "id": "", "label": "Nov", "Pattern": "", "type": "number" },
{ "id": "", "label": "Dec", "Pattern": "", "type": "number" }
], "rows":
[{ "c": [
{ "v": "0"},
{ "v": "0", "f": null },
{ "v": "0", "f": null },
{ "v": "0", "f": null },
{ "v": "0", "f": null },
{ "v": "0", "f": null },
{ "v": "2000", "f": null },
{ "v": "0", "f": null },
{ "v": "0", "f": null },
{ "v": "1000", "f": null },
{ "v": "0", "f": null },
{ "v": "0", "f": null }
]
}]
};
var data = new google.visualization.DataTable(JSONObject);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}
​

Answer 1

You need to change the layout of your data. The Visualization API ColumnCharts (and most similar Viz API charts) expect data with the domain axis (x-axis for ColumnCharts) values in the first column and the values for each data series in the following columns (where each column is one series of data). Given your requirements and your existing data, I think you want a DataTable with two columns of data: "month" and "value" (or whatever you decide to call it). Here's an example of what it might look like:
var JSONObject = {
"cols": [
{"type": "string", "label": "Month"},
{"type": "number", "label": "Value"}
],
"rows": [
{"c":[{"v": "Jan"}, {"v": 0}]},
{"c":[{"v": "Feb"}, {"v": 0}]},
{"c":[{"v": "Mar"}, {"v": 0}]},
{"c":[{"v": "Apr"}, {"v": 0}]},
{"c":[{"v": "May"}, {"v": 0}]},
{"c":[{"v": "Jun"}, {"v": 0}]},
{"c":[{"v": "Jul"}, {"v": 2000}]},
{"c":[{"v": "Aug"}, {"v": 0}]},
{"c":[{"v": "Sep"}, {"v": 0}]},
{"c":[{"v": "Oct"}, {"v": 1000}]},
{"c":[{"v": "Nov"}, {"v": 0}]},
{"c":[{"v": "Dec"}, {"v": 0}]}
]
};