Databases
StackOverflow2013
Postsdbo
POGoogle column chart visualization from json object bug in MVC 4 C#
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle column chart visualization from json object bug in MVC 4 C#
    primarykey
    data
    text
    <p>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.</p> <p>Here is how i convert my data to json from the code :</p> <pre><code>public class Graph { public ColInfo[] cols { get; set; } public DataPointSet[] rows { get; set; } public Dictionary&lt;string, string&gt; 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 } </code></pre> <p>Then an example usage:</p> <pre><code> 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&lt;string, string&gt;() }; string json; var s = new JsonSerializer(); using (var sw = new StringWriter()) { s.Serialize(sw, graph); json = sw.ToString(); } </code></pre> <p>here is also a sample from the google column chart playground --> <a href="https://code.google.com/apis/ajax/playground/?type=visualization#column_chart" rel="nofollow">https://code.google.com/apis/ajax/playground/?type=visualization#column_chart</a></p> <pre><code>&lt;!-- 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) --&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt; &lt;title&gt; Google Visualization API Sample &lt;/title&gt; &lt;script type="text/javascript" src="//www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load('visualization', '1', {packages: ['corechart']}); &lt;/script&gt; &lt;script type="text/javascript"&gt; 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); &lt;/script&gt; </code></pre> <p> </p> <p>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"},{<strong>"v": 7</strong> ,"f":"7"}]}</p> <p>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 ?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdlght
    1. USdlght
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload