从Google图表的SQL查询格式化ColdFusion JSON_Json_Charts_Coldfusion_Google Visualization

从Google图表的SQL查询格式化ColdFusion JSON

json charts coldfusion google-visualization

从Google图表的SQL查询格式化ColdFusion JSON,json,charts,coldfusion,google-visualization,Json,Charts,Coldfusion,Google Visualization,完全披露-我对任何类型的网络编码都是新手，所以请耐心等待我试图做的是查询数据，并使用它来构建动态谷歌图表。在Coldfusion中，我查询了SQL Server的数据，然后输出为JSON（我在上验证了这个JSON，它说它是有效的）。如果我试图在Google图表中直接使用这个JSON，我会得到一个错误：“未捕获错误：无效的JSON字符串”，因为JSON的格式不是Google图表想要的格式以下是ColdFusion从SQL查询创建的JSON片段： {"COLUMNS":["DATE","TEM

完全披露-我对任何类型的网络编码都是新手，所以请耐心等待

我试图做的是查询数据，并使用它来构建动态谷歌图表。在Coldfusion中，我查询了SQL Server的数据，然后输出为JSON（我在上验证了这个JSON，它说它是有效的）。如果我试图在Google图表中直接使用这个JSON，我会得到一个错误：“未捕获错误：无效的JSON字符串”，因为JSON的格式不是Google图表想要的格式

以下是ColdFusion从SQL查询创建的JSON片段：

{"COLUMNS":["DATE","TEMP_C"],"DATA":[["08\/09\/2016",27.04],["08\/09\/2016",26.98],["08\/09\/2016",27.02],      …etc

以下是谷歌图表所期望的格式：

{ 
"cols": [ 
    {"id":"","label":"SignIn Method","pattern":"","type":"string"},
    {"id":"","label":"Count","pattern":"","type":"number"} 
   ], 
"rows": [ 
    {"c":[{"v":"manual","f":null},{"v":123,"f":null}]}, 
    {"c":[{"v":"swipe","f":null},{"v":20,"f":null}]} 
   ] 
}

我一直在尝试将JSON重新构造为GoogleCharts所需的格式，但我想不出来。我一直在尝试使用这个问题中的信息：

所以我一直在做的部分是：

<cfset chartsData = structNew()>
<cfset chartsData["cols"] = arrayNew(1)>

<cfset chartsRow = structNew()>
   <cfset chartsRow["id"] = ""> 
   <cfset chartsRow["label"] = "Date">
   <cfset chartsRow["pattern"] = "">
   <cfset chartsRow["type"] = "date">

   <cfset chartsRow2["id"] = ""> 
   <cfset chartsRow2["label"] = "Temp_C">
   <cfset chartsRow2["pattern"] = "">
   <cfset chartsRow2["type"] = "number">  

   <cfset arrayAppend(chartsData["cols"], chartsRow)>
   <cfset arrayAppend(chartsData["cols"], chartsRow2)>

   <cfset chartsDataJSON = serializeJSON(chartsData)>

  <cfset chartsData2 = structNew()>
  <cfset chartsData2["rows"] = arrayNew(1)>

  <!--- use a query loop to copy query data to this struct --->
   <cfloop query="qAEBdata">
   <cfset chartsRow3 = structNew()>
   <cfset chartsRow3["c"] = []>
   <cfset chartsRow3["v"] = "#Date#">
   <cfset chartsRow3["f"] = "null">
   <cfset chartsRow3["type"] = "date">

   <cfset arrayAppend(chartsData2["rows"], chartsRow3)>
   <cfset chartsDataJSON2 = serializeJSON(chartsData2)>
</cfloop>

   <cfoutput>#chartsDataJSON#,</cfoutput>
   <cfoutput>#chartsDataJSON2#</cfoutput>

我尝试在“serializeJSON”之后添加这些方法（一次一个），但它们不会删除逗号。将“-1”增加到一个更大的数字将导致删除括号，并最终从数据中删除文本：

<cfset chartsDataJSON = reReplace(chartsDataJSON, ",$", "", "all")>
<cfset chartsDataJSON = chartsDataJSON.substring(0, len(chartsDataJSON)- 1)>
<cfset chartsDataJSON = left(chartsDataJSON, len(chartsDataJSON)-1)>

第二次更新 我找到了我愚蠢的逗号所在的位置并将其删除，它就在我输出它的位置之后，这就是为什么我无法在我试图删除它的地方删除它的原因：

<cfoutput>#chartsDataJSON#,</cfoutput>

#chartsDataJSON#，

我试图将JSON数据拉入Google图表，结果得到“无效JSON字符串”：


google.charts.load（'current'{
回调：函数（）{
var fusionObject='chartDataJSON'；
var chartsDataJSON=新的google.visualization.DataTable（fusionObject）；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
chart.draw（chartsDataJSON）；
},
软件包：['corechart']
});

但是如果我直接粘贴到JSON中，图表就会画得很好

最终更新-JSON格式正确，图表绘制正确正如Leigh所指出的，我需要为ColdFusion正确调用变量（这对我来说是个无聊的时刻）。更正代码如下：

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { callback: function () { var fusionObject = ('<cfoutput>#chartsDataJSON#</cfoutput>'); var chartsDataJSON = new google.visualization.DataTable(fusionObject); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(chartsDataJSON); }, packages: ['corechart'] }); </script> </head> <body> <div id="chart_div"></div> </body>

google.charts.load（'current'{ 回调：函数（）{ var fusionObject=（'chartsDataJSON'）； var chartsDataJSON=新的google.visualization.DataTable（fusionObject）； var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））； chart.draw（chartsDataJSON）； }, 软件包：['corechart'] });
“行”
需要添加到与
“cols”
每个
“c”
也需要一些更改
使用以下代码段

 <cfset qAEBdata = queryNew("")> <cfset queryAddColumn(qAEBdata, "Date", "varchar", ["08/09/2016","08/10/2016","08/11/2016"])> <cfset queryAddColumn(qAEBdata, "Temp_C", "decimal", [27.04,26.98,27.02])> <cfset chartsData = structNew()> <cfset chartsData["cols"] = arrayNew(1)> <cfset chartsData["rows"] = arrayNew(1)> <cfset chartsRow = structNew()> <cfset chartsRow["id"] = ""> <cfset chartsRow["label"] = "Date"> <cfset chartsRow["pattern"] = ""> <cfset chartsRow["type"] = "string"> <cfset chartsRow2["id"] = ""> <cfset chartsRow2["label"] = "Temp_C"> <cfset chartsRow2["pattern"] = ""> <cfset chartsRow2["type"] = "number"> <cfset arrayAppend(chartsData["cols"], chartsRow)> <cfset arrayAppend(chartsData["cols"], chartsRow2)> <cfloop query="qAEBdata"> <cfset chartsRow3 = structNew()> <cfset chartsRow3["c"] = []> <cfset chartsRow3Value0 = structNew()> <cfset chartsRow3Value0["v"] = "#Date#"> <cfset chartsRow3Value1 = structNew()> <cfset chartsRow3Value1["v"] = "#Temp_C#"> <cfset arrayAppend(chartsRow3["c"], chartsRow3Value0)> <cfset arrayAppend(chartsRow3["c"], chartsRow3Value1)> <cfset arrayAppend(chartsData["rows"], chartsRow3)> </cfloop> <cfset chartsDataJSON = serializeJSON(chartsData)> <cfoutput>#chartsDataJSON#</cfoutput>
这将生成以下图表…
（运行以下代码段）

google.charts.load（'current'{ 回调：函数（）{ var fusionObject={“cols”：[{“模式”：“，”标签“：”日期“，”id“，”类型“：”字符串“}，{“模式”：“，”标签“：”临时“，”id“，”类型“：”编号“}]，”行“：[{“C”：[{“v”：[{“v”：“08/09/2016”}，{“v”：27.04}，{“C”：[{“v”：“08/10/2016”}，{“v”：26.98}，{“v”：“v”：“08/11/2016”}，{“v”：“27.02}； var chartsDataJSON=新的google.visualization.DataTable（fusionObject）； var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））； chart.draw（chartsDataJSON）； }, 软件包：['corechart'] }); 为什么要重新排序与数组不同，结构没有保证的顺序。然而，我怀疑谷歌是否关心订单。最可能的问题是总体数据结构仍然不同。ie“cols”和“rows”应该是一个结构中的键，而不是两个单独的结构中的键。我只是简单地浏览了一下，但最突出的是对serializeJSON（）的多次调用。你应该只打一次电话。首先构建适当的结构/数组，然后在最后调用serializeJSON。我一直在尝试使用这个问题中的信息，看起来代码只是一个起点。它不会产生你上面发布的确切格式。试着从以下内容开始：旁注，虽然使用arrayNew 和structNew（）在技术上没有什么问题，但较新版本的CF支持这两种格式的速记格式，这在我看来更具可读性。{} -和[] -arrayNew的速记（1）。为了保留结构键的情况（这对javascript很重要），请将键名括在引号中：ie 顺便说一句，因为您提到了CF的新手，所以您可能希望提供您的工作代码，以获得关于最佳实践和可能改进的建议。请务必包括您的CF版本。谢谢@Leigh！我来看看，你总是慷慨相助。我对任何和所有的编码（5分钟）都是新手，所以非常感谢。是的，但请再次查看所需字符串的格式。生成的查询数据结构看起来仍然有点不对劲。明白了。如果你好奇，请使用trycf.com。这里有一个入门要点，您可以运行和/或修改：-）。感谢@Leigh提供的scratch pad链接--我想我能够想出ColdFusion代码来让图表工作--希望这有帮助…天哪，我刚刚找到了它。我有#chartsDataJSON#，@becaleca-没有磅符号和，CF变量永远不会被计算。因此，代码实际上是在传递文本字符串“chartsDataJSON”，而不是该名称的变量值。 <cfset chartsDataJSON = left(chartsDataJSON, len(chartsDataJSON)-2)> "cols":[{"pattern":"","label":"Date","id":"","type":"string"},{"pattern":"","label":"Temp_C","id":"","type":"number"}, <cfoutput>#chartsDataJSON#,</cfoutput>  <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { callback: function () { var fusionObject = 'chartDataJSON'; var chartsDataJSON = new google.visualization.DataTable(fusionObject); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(chartsDataJSON); }, packages: ['corechart'] }); </script>  <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { callback: function () { var fusionObject = ('<cfoutput>#chartsDataJSON#</cfoutput>'); var chartsDataJSON = new google.visualization.DataTable(fusionObject); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(chartsDataJSON); }, packages: ['corechart'] }); </script> </head> <body> <div id="chart_div"></div> </body>  <cfset qAEBdata = queryNew("")> <cfset queryAddColumn(qAEBdata, "Date", "varchar", ["08/09/2016","08/10/2016","08/11/2016"])> <cfset queryAddColumn(qAEBdata, "Temp_C", "decimal", [27.04,26.98,27.02])> <cfset chartsData = structNew()> <cfset chartsData["cols"] = arrayNew(1)> <cfset chartsData["rows"] = arrayNew(1)> <cfset chartsRow = structNew()> <cfset chartsRow["id"] = ""> <cfset chartsRow["label"] = "Date"> <cfset chartsRow["pattern"] = ""> <cfset chartsRow["type"] = "string"> <cfset chartsRow2["id"] = ""> <cfset chartsRow2["label"] = "Temp_C"> <cfset chartsRow2["pattern"] = ""> <cfset chartsRow2["type"] = "number"> <cfset arrayAppend(chartsData["cols"], chartsRow)> <cfset arrayAppend(chartsData["cols"], chartsRow2)> <cfloop query="qAEBdata"> <cfset chartsRow3 = structNew()> <cfset chartsRow3["c"] = []> <cfset chartsRow3Value0 = structNew()> <cfset chartsRow3Value0["v"] = "#Date#"> <cfset chartsRow3Value1 = structNew()> <cfset chartsRow3Value1["v"] = "#Temp_C#"> <cfset arrayAppend(chartsRow3["c"], chartsRow3Value0)> <cfset arrayAppend(chartsRow3["c"], chartsRow3Value1)> <cfset arrayAppend(chartsData["rows"], chartsRow3)> </cfloop> <cfset chartsDataJSON = serializeJSON(chartsData)> <cfoutput>#chartsDataJSON#</cfoutput> { "cols": [{ "pattern": "", "label": "Date", "id": "", "type": "string" }, { "pattern": "", "label": "Temp_C", "id": "", "type": "number" }], "rows": [{ "c": [{ "v": "08/09/2016" }, { "v": 27.04 }] }, { "c": [{ "v": "08/10/2016" }, { "v": 26.98 }] }, { "c": [{ "v": "08/11/2016" }, { "v": 27.02 }] }] }