{"id":2692,"date":"2022-06-28T17:34:19","date_gmt":"2022-06-28T22:34:19","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2692"},"modified":"2022-10-14T16:55:36","modified_gmt":"2022-10-14T21:55:36","slug":"building-a-connected-scatter-chart","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2022\/06\/28\/building-a-connected-scatter-chart\/","title":{"rendered":"Building a connected scatter chart"},"content":{"rendered":"<p>This is an example of work we did for one of our clients. This kind of approach will work with any AnyChart chart that PHPRunner and ASPRunner.NET do not support directly. Here is how you can approach this kind of task. <\/p>\n<p>A Scatter chart is a graph that represents the relationship between two variables in a data set. Normally data is stored in the database as a set of (x,y) pairs. Here is the end result our client was looking for. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/scatter_chart.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/scatter_chart-600x453.png\" alt=\"\" width=\"600\" height=\"453\" class=\"alignnone size-medium wp-image-2695\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/scatter_chart-600x453.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/scatter_chart-768x580.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/scatter_chart.png 788w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\n<!--more--><\/p>\n<h4>This is how it can be done<\/h4>\n<p>1. Create a Custom View in PHPRunner or ASPRunner.NET. Enable the View page for this custom view. This will be our chart page. <\/p>\n<p>2. Open that View page in the Page Designer, remove everything you don&#8217;t need and add the code snippet. Use the following code there:<\/p>\n<p><strong>PHP<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\necho \"<div id='container'><\/div>\";<\/textarea><\/pre>\n<\/div>\n<p><strong>C#<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nMVCFunctions.Echo(\"<div id='container'><\/div>\");<\/textarea><\/pre>\n<\/div>\n<p>The idea of this code is to create a container where the chart will be placed. <\/p>\n<p>3. For this code snippet use the following CSS code in Page Designer:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"css\" name=\"mshighlighter\" >\r\n:host {\r\nmargin-left:0px !important;\r\n}\r\n:host #container{\r\nwidth:100%;\r\nheight:530px;\r\n}<\/textarea><\/pre>\n<\/div>\n<p>4. Custom View -> View Page -> BeforeDisplay event.<\/p>\n<p>The idea of this code is to load the AnyChart library, retrieve data from the database, and pass it from the server side to Javascript using <strong>setProxyValue()<\/strong> function. The SQL query simply pulls all the data from the <strong>linechart<\/strong> table. Here is what kind of data is required to build this chart.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/linechart_data.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/linechart_data-600x262.png\" alt=\"\" width=\"600\" height=\"262\" class=\"alignnone size-medium wp-image-2700\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/linechart_data-600x262.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/linechart_data-768x335.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/06\/linechart_data.png 835w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><strong>PHP<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$pageObject->AddJSFile('https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-base.min.js');\r\n$chartData = array();\r\n$linechart_rs = DB::Query( \"select * from linechart order by x asc,y asc\" );\r\nwhile( $cdata = $linechart_rs->fetchAssoc() ){\r\n\tunset( $cdata[\"ID\"] );\r\n\tarray_push( $chartData ,$cdata );\r\n}\r\n$pageObject->setProxyValue(\"chartData\",$chartData);<\/textarea><\/pre>\n<\/div>\n<p><strong>C#<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\ndynamic cdata = XVar.Array(), chartData = null, linechart_rs = null;\r\npageObject.AddJSFile(new XVar(\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-base.min.js\"));\r\nchartData = XVar.Clone(XVar.Array());\r\nlinechart_rs = XVar.Clone(DB.Query(new XVar(\"select * from linechart order by x asc,y asc\")));\r\nwhile(XVar.Pack(cdata = XVar.Clone(linechart_rs.fetchAssoc())))\r\n{\r\n   cdata.Remove(\"ID\");\r\n   CommonFunctions.array_push((XVar)(chartData), (XVar)(cdata));\r\n}\r\npageObject.setProxyValue(new XVar(\"chartData\"), (XVar)(chartData));\r\nreturn null;<\/textarea><\/pre>\n<\/div>\n<p>5. And the final step. Custom View -> View Page -> Javascript OnLoad Event.<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nanychart.licenseKey( Runner.anychartLicense );\r\nchart = anychart.scatter();\r\n\r\nvar series = chart.line(proxy[\"chartData\"]);\r\nseries.markers(true);\r\nseries.labels(true);\r\n\r\nchart.container(\"container\");\r\nchart.xScale().minimum(0).ticks({ interval: 5 });\r\nchart.yScale().minimum(0).ticks({ interval: 5 });\r\nchart.xGrid(true);\r\nchart.yGrid(true);\r\n\r\nchart.xGrid().stroke();\r\nchart.yGrid().stroke();\r\n\r\nchart.draw();<\/textarea><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is an example of work we did for one of our clients. This kind of approach will work with any AnyChart chart that PHPRunner and ASPRunner.NET do not support directly. Here is how you can approach this kind of task. A Scatter chart is a graph that represents the relationship between two variables in a data set. Normally data is stored in the database as a set of (x,y) pairs. Here is the end result our client was looking for.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"class_list":["post-2692","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2692"}],"version-history":[{"count":10,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2692\/revisions"}],"predecessor-version":[{"id":2831,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2692\/revisions\/2831"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}