I have MVC 4 application with C# and i am using google visualization api column chart to do some graphics for some information. But from a week or two i have some bug with the visualization of the information : the data is okay, but the drawing is totally bugged.
Here is how i convert my data to json from the code :
public class Graph {
public ColInfo[] cols { get; set; }
public DataPointSet[] rows { get; set; }
public Dictionary<string, string> p { get; set; }
}
public class ColInfo {
public string id { get; set; }
public string label { get; set; }
public string type { get; set; }
}
public class DataPointSet {
public DataPoint[] c { get; set; }
}
public class DataPoint {
public string v { get; set; } // value
public string f { get; set; } // format
}
Then an example usage:
var graph = new Graph
{
cols = new ColInfo[] {
new ColInfo { id = "A", label = "set A", type = "string" },
new ColInfo { id = "B", label = "set B", type = "string" },
new ColInfo { id = "C", label = "set C", type = "string" }
},
rows = new DataPointSet[] {
new DataPointSet { c = new DataPoint[] {
new DataPoint { v = someintValue.ToString(), f = someintValue.ToString() },
new DataPoint { v = "b", f = "One" },
} }
},
p = new Dictionary<string, string>()
};
string json;
var s = new JsonSerializer();
using (var sw = new StringWriter()) {
s.Serialize(sw, graph);
json = sw.ToString();
}
here is also a sample from the google column chart playground --> https://code.google.com/apis/ajax/playground/?type=visualization#column_chart
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var customOptions = function (title) {
var options = {
title: title,
hAxis: { textStyle: { color: '#1d3842', fontSize: 12 } },
vAxis: { title: 'Minutes', titleTextStyle: { fontSize: 14, bold: true } },
titleTextStyle: { color: '#1d3842', fontSize: 14, bold: true },
chartArea: { left: 32, right: 0,left: 52, width: 460, height: 180 },
legend: { position: 'none' },
colors: ['#556d82'],
}
return options;
}
// here in the () is an example Json i've copied from my actual site
var data = new google.visualization.DataTable('{"cols":[{"id":"r","label":"Reason","type":"string"},{"id":"m","label":"Minutes","type":"number"}],"rows":[{"c":[{"v":"Flour - Blower","f":"Flour - Blower"},{"v":"7","f":"7"}]},{"c":[{"v":"Whole Line - d","f":"Whole Line - d"},{"v":"4","f":"4"}]},{"c":[{"v":"Flour - Pipework","f":"Flour - Pipework"},{"v":"3","f":"3"}]},{"c":[{"v":"Horseshoe - Belt","f":"Horseshoe - Belt"},{"v":"1","f":"1"}]}],"p":null}');
var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart1.draw(data, customOptions('Mechanical or Electrical'));
}
google.setOnLoadCallback(drawVisualization);
</script>
I have tried with hardcoded json where on every "v:" where there is an integer value i remove the brackets and it becomes something like this ->
{"c":[{"v":"Flour - Blower","f":"Flour - Blower"},{"v": 7 ,"f":"7"}]}
When i remove all the brackets where there is a numeric value it is working fine. But how to build a json object with the proper values. How can i deal with this issue ? Should i make javascript to replace all the string values after v: that can be parsed with integer without "" or somehow to deal with this from the code behind ?