Google column chart visualization from json object bug in MVC 4 C#

StackOverflow https://stackoverflow.com/questions/20377467

Question

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 ?

Was it helpful?

Solution

The ChartToolsDataSourceProtocol doesn't support converting strings to numerics. We're looking into fixing this for the next release.

In the meantime, the thing to do (as you suggest) is to convert the strings to numbers. Something like:

    for (i in a.rows) {
     for (j in a.cols) {
       if (a.cols[j].type == "number") {
         a.rows[i].c[j].v = Number(a.rows[i].c[j].v);
       }
     }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top