How to serialize JSON without outputting quotes around certain values - json

Question

The short version of problem. In some cases I want no quotes on a string JSon value:
Color =Highcharts.getOptions().colors[0]
instead of this:
Color = "Highcharts.getOptions().colors[0]"
+++++++++++++++++++++++++++++++++++++++
The long details.... I have working code that is a model I made (as proof of concept) of a controller generating all the Json for a HighCharts.com graph on the client.
1
Client code (works)
#{
ViewBag.Title = "View";
}
<h2>High Charts Proof of Concept</h2>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
#section Scripts {
<script type="text/javascript">
$(function() {
fetchSampleChart1();
function fetchSampleChart1() {
$.ajax({
url: '/Test1/SampleChart1/',
type: 'GET',
//data: '?',
//data: 'adminEntityID=' + adminEntity + '&fieldName=' + fieldName + '&fieldValue=' + fieldValue + '&outletID=' + outlet,
complete: function (data, textStatus, xhr) {
console.log(data.responseText);
var strGraphData = $.parseJSON(data.responseText);
if (strGraphData.length == 0) {
//GraphEmptyDisplay(parmChartId, msg);
console.log("!!!!GRAPH DATA EMPTY!!!!");
return '';
}
$("#container").highcharts(strGraphData);
},
error:function(xhr, textStatus, errorThrown) {
//Inject a default error message to the modal target.
}
});
}
});
</script>
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
}
2
Controller Action it calls. Works except it emits quotes on all output where I just want it on most of output.
[HttpGet]
public ContentResult SampleChart1()
{
var sc = new HighChartGraph
{
Title = new Title() {Text = "Combination Chart"},
XAxis = new XAxis() {Categories = new string[] {"Apples", "Oranges", "Pears", "Banannas", "Plums"}},
Center = "[100,80]",
Size = 100,
ShowInLegend = false,
DataLabels = new dataLabels {Enabled = false},
Labels = new Labels
{
Items = new Items
{
Html = "Total Fruit consumption",
Style =
new Style()
{
Left = "50px",
Top = "18px",
//Color = "(Highcharts.theme && Highcharts.theme.textColor) || 'black'"
Color="yellow"
}
}
},
Series = new List<GraphSeries>
{
new GraphSeries
{
GraphType = "column",
Name = "Jane",
DataSimple = new decimal[] {3, 2, 1, 3, 4}
},
new GraphSeries
{
GraphType = "column",
Name = "John",
DataSimple = new decimal[] {2, 3, 5, 7, 6}
},
new GraphSeries
{
GraphType = "column",
Name = "Joe",
DataSimple = new decimal[] {4, 3, 3, 9, 0}
},
new GraphSeries
{
GraphType = "spline",
Name = "Average",
DataSimple = new decimal[] {3, 2.67m, 3, 6.33m, 3.33m},
Marker =
new marker
{
LineWidth = 2,
LineColor = "Highcharts.getOptions().colors[3]",
//LineColor="Black",
FillColor = "white"
}
},
new GraphSeries
{
GraphType = "pie",
Name = "Total Consumption",
DataExtended = new List<Data>
{
new Data {Name = "Jane", Y = 13, Color = "Highcharts.getOptions().colors[0]"},
//new data {Name = "Jane", Y = 13, Color = "Red"},
new Data {Name = "John", Y = 23, Color = "Highcharts.getOptions().colors[1]"},
//new data {Name = "John", Y = 23, Color = "Black"},
new Data {Name = "Joe", Y = 19, Color = "Highcharts.getOptions().colors[2]"}
//new data {Name = "Joe", Y = 19, Color = "Blue"},
}
}
}
};
//var j=new JavaScriptSerializer().Serialize(sc); // .NET Serialization will not use [JsonProperty()] attributes
var j = JsonConvert.SerializeObject(sc); // Newtonsoft Serialization WILL USE [JsonProperty()] attributes
//return Json(sc,JsonRequestBehavior.AllowGet); // cannot use it will not use our NewtonSoft serialization
return Content(j, "application/json");
}
3 Model It calls to get the JSon:
public class HighChartGraph
{
[JsonProperty(PropertyName = "title")]
public Title Title;
[JsonProperty(PropertyName = "xAxis")]
public XAxis XAxis;
[JsonProperty(PropertyName = "labels")]
public Labels Labels;
[JsonProperty(PropertyName = "center")]
public string Center;
[JsonProperty(PropertyName = "size")]
public int Size;
[JsonProperty(PropertyName = "showInLegend")]
public bool ShowInLegend;
[JsonProperty(PropertyName = "dataLabels")]
public dataLabels DataLabels;
[JsonProperty(PropertyName = "series")]
public List<GraphSeries> Series;
}
public class Title
{
[JsonProperty(PropertyName = "text")]
public string Text;
}
public class XAxis
{
[JsonProperty(PropertyName = "categories")]
public string[] Categories;
}
public class Labels
{
[JsonProperty(PropertyName = "items")]
public Items Items;
}
public class Items
{
[JsonProperty(PropertyName = "html")]
public string Html;
[JsonProperty(PropertyName = "style")]
public Style Style;
}
public class Style
{
[JsonProperty(PropertyName = "left")]
public string Left;
[JsonProperty(PropertyName = "top")]
public string Top;
[JsonProperty(PropertyName = "color")]
public string Color;
}
public class GraphSeries
{
private string _GraphType;
[JsonProperty(PropertyName = "type")]
public string GraphType
{
get { return _GraphType; }
set { _GraphType = value; }
}
[JsonProperty(PropertyName = "name")]
public string Name;
[JsonProperty(PropertyName = "marker")]
public marker Marker;
[JsonProperty(PropertyName = "data")]
public object Data
{
get
{
if (DataSimple != null) return DataSimple;
if(DataExtended !=null) return DataExtended;
return null;
}
}
[NonSerialized][ScriptIgnore]
public decimal[] DataSimple = null;
[NonSerialized][ScriptIgnore]
public List<Data> DataExtended = null;
}
public class Data
{
[JsonProperty(PropertyName = "name")]
public string Name;
[JsonProperty(PropertyName = "y")]
public long Y;
[JsonProperty(PropertyName = "color")]
public string Color;
}
public class dataLabels
{
[JsonProperty(PropertyName = "enabled")]
public bool Enabled;
}
public class marker
{
[JsonProperty(PropertyName = "linewidth")]
public int LineWidth;
[JsonProperty(PropertyName = "linecolor")]
public string LineColor;
[JsonProperty(PropertyName = "fillcolor")]
public string FillColor;
}
4 As a point of reference here is the HighCharts graph I created the model and sample code from:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/

Answer 1

HighCharts isn't taking JSON but an actual javascript object. That's why they're able to have executable stuff in it. JSON is very specifically non-executable, data only, for security reasons.
You've got a couple of options here:
Use JSON as an interchange format, but have a client side function that spins through the JSON, notices if it contains an allowed executable function, eval()'s it, and overwrites the value back into the property.
Write your own JSONish generator that reflects on the object tree and builds out an executable javascript object vs. JSON
Hook into JSON.NET and make an ExecutableString type that renders without quotes. It looks like you could make a JsonConverter to do that, along the lines of: https://stackoverflow.com/a/21766191/8037. Do like that JsonConverter, except call writer.WriteRaw or writer.WriteRawValue to write out the js.
I don't have to mention that by doing this, you end run around a lot of security features. Eval'ing any code received from an external source could be dangerous. That said, if the feature is proof of concept, and if it's only contacting a server you control and can't be injected a different way, you should be pretty safe.

Answer 2

I would simply update public class Data so that instead of putting the string for Color and LineColor property, you have some kind of enum:
new Data {Name = "Joe", Y = 19, Color = HighchartsCcolor2 }
Then on the client, you loop through your data.responseText and switch on the .Color property. There you would use the value you want based on the enum value.
This would allow you to return valid JSON and handle it however you would like on the client.