How to plot a line graph using Json array using webrequest

Question

First of all, I'm very new to C# and Json.

I wanted to plot a graph from mysql table data in a C# GUI. I made a PHP file to select the data from mysql database table and echoed the selected contents in json array using echo json_encode(array("result"=>$result))

here is my PHP:

<?php
define('HOST','*********************');
define('USER','*********************');
define('PASS','*********************');
define('DB','***********************');

if($_SERVER['REQUEST_METHOD']=='GET'){

 $start = $_GET['start'];
 $ending  = $_GET['ending'];
}

$con = mysqli_connect(HOST,USER,PASS,DB);


$sql = "SELECT * FROM table WHERE date_time BETWEEN '$start' and '$ending'" ;
$res = mysqli_query($con,$sql);

$result = array();
while($row = mysqli_fetch_array($res)){
array_push($result,array('id'=>$row[0],'p_pairs'=>$row[1],'temp1'=>$row[2]  ,'temp2'=>$row[3],'temp3'=>$row[4],'temp4'=>$row[5],'temp5'=>$row[6],'avg_current'=>$row[7],'avg_voltage'=>$row[8],'kw'=>$row[9],'kwh'=>$row[10]));
}

echo json_encode(array($result));

mysqli_close($con);

?>

using the link, I can see the json array clearly between the datetime gap.All I wanted is to plot the graph of temperature values (temp1, temp2,..), p-pairs values and others with the date_time in a line graph to read the historical data.

All I get when I access the PHP page is:

[[{"id":"1","p_pairs":"0000-00-00 00:00:00","temp1":"2","temp2":"100","temp3":"100","temp4":"100","temp5":"100","avg_current":"100","avg_voltage":"300","kw":"300","kwh":"300"},{"id":"2","p_pairs":"0000-00-00 00:00:00","temp1":"45","temp2":"105","temp3":"230","temp4":"100","temp5":"2500","avg_current":"570","avg_voltage":"100","kw":"250","kwh":"1000"},{"id":"3","p_pairs":"2016-01-07 21:10:00","temp1":"45","temp2":"105","temp3":"230","temp4":"100","temp5":"2500","avg_current":"570","avg_voltage":"100","kw":"250","kwh":"1000"},{"id":"4","p_pairs":"2016-01-07 21:10:00","temp1":"45","temp2":"105","temp3":"230","temp4":"100","temp5":"2500","avg_current":"570","avg_voltage":"100","kw":"250","kwh":"1000"}]]

NOTE: some datetime is set as default here. I just wanted to show this array. The correct one will be perfect to plot the graph.

I can can take these array in a string using a web request from C#. using the bellow code:

        System.Net.WebClient wc = new System.Net.WebClient();
        byte[] raw = wc.DownloadData("url to php");

        string webData = System.Text.Encoding.UTF8.GetString(raw);

It'll be a big help If someone can help me to plot this in a line graph as date_time Vs temp1, temp2 or p_pairs and like that in C# GUI...

This is going to be a big help for me. Thanking you in advance.

To start, you should use Newtonsoft's JSON.net to convert webData into a usable JSON Object. Look up some tutorials on that. What do you want to generate? Are you trying to generate a jpg or png with a graph on it? Or is this for display in a website? — Nikhil
Thanks for replying. I wanted to plot them in my Winform UI. This was done after deserializing and sourcing in to a table. My current Issue is, I've six identical tables like the above mentioned. I wanted to plot the graph something like date_time vs temp1 (table1), tamp1 (table2), tamp1 (table3), tamp1 (table4), tamp1 (table5), tamp1 (table6) as line graph. All the tables are in the same databse & the structures are identical. — Althaf
It sounds like you just need a graphing library. Take a look at code.msdn.microsoft.com/mschart. Infragistics, DevExpress, and other widget makers have other tools to create graphs. — Nikhil

Eminem Eminem · Accepted Answer · 2016-03-26T19:16:29

Firstly get a class to work from. You can dynamically create a class from Json

If you are happy to have a dependency upon the System.Web.Helpers assembly, then you can use the Json class:

dynamic data = Json.Decode(json);

It is included with the MVC framework as an additional download to the .NET 4 framework. Or use the NewtonSoft one.

Next get a chart component: https://msdn.microsoft.com/en-us/library/dd489237.aspx and bind your data to the chart

How to plot a line graph using Json array using webrequest

1 Answers