Intregrating Dynamic Charts into Web Pages

The Highcharts Javascript file can be used to integrate charts into Web page. The following shows an example:

http://www.asecuritysite.com/calculators/chart

For this, in MVC 4.0, I created an cshtml file which allows the user to enter the x-axis and y-axis, and then for a ViewBag to be used to chart the points:

<script type=”text/javascript”>

$(function () {
$(‘#container’).highcharts({
chart: {
type: ‘spline’
},
title: {
text: ‘My chart’
},
credits: {
enabled: false
},

xAxis: {
type: ‘linear’,
},
yAxis: {
title: {
text: ‘y-axis’
},
},
tooltip: {
formatter: function() {
return ‘<b>’+ this.series.name +'</b><br/>’+
Highcharts.dateFormat(‘%e’, this.x) +’: ‘+ this.y;
}
},

series: [{
name: ‘my graph’,

data: [
@ViewBag.Graph
]
}
]
});
});

</script>

<script src=”@Url.Content(“~/Scripts/highcharts.js”)” type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/exporting.js”)” type=”text/javascript”></script>
<table width=”100%” border=”1″>

<tr>
<td  valign=top>X-axis: @Html.TextBox(“x”)<br />
Y-axis: @Html.TextBox(“y”) <br />
<input type=”submit” value=”Show graph” name=”button1″ /> <br />
<h2>Examples</h2>
<ul>
<li>Straight Line: @Html.ActionLink(“Here”, “chart”, new { sortBy = “0,1,2,3,4,5$4,5,6,7,8,9” }, null)</li>
<li>Quadratic Equation: x<sup>2</sup>@Html.ActionLink(“Here”, “chart”, new { sortBy = “-3,-2,-1,0,1,2,3$9,4,1,0,1,4,9″ }, null)</li>

</ul>

</td>
<td><div id=”container” style=”min-width: 400px; height: 400px; margin: 0 auto”></div>
</td></tr>
</table>

We can see that all we have to do is fill-up ViewBag.Graph with the form:

[0,1],[1,2],[2,3]

which define the x,y co-ordinates. I have created a command line option with:

-3,-2,-1,0,1,2,3$9,4,1,0,1,4,9

where the $ symbol is split so that we get the x and y co-ordinates. I then combine these with a combine method:

[HttpGet]
public ActionResult chart(String sortBy)
{

string xaxis = “1,2,3,4” ;
string yaxis =  “1,3,5,9” ;

if (sortBy == null)
{
ViewBag.Graph = combine(xaxis, yaxis);
ViewData[“x”] = xaxis;
ViewData[“y”] = yaxis;
}
else
{
string [] arrays = sortBy.Split(‘$’);
ViewBag.Graph = combine(arrays[0], arrays[1]);
ViewData[“x”] = arrays[0];
ViewData[“y”] = arrays[1];
}

return View();
}

public static string combine(string x, string y)
{
string[] xaxis = x.Split(‘,’);
string[] yaxis = y.Split(‘,’);
string res = “”;
try
{
for (int i = 0; i < xaxis.Length; i++)
{
if (i < xaxis.Length – 1) res += “[” + xaxis[i] + “,” + yaxis[i] + “],”;
else res += “[” + xaxis[i] + “,” + yaxis[i] + “]”;
}
}
catch {
if (res[res.Length – 1] == ‘,’)
res.Remove(res.Length – 1);
}
return (res);

}

It’s as easy as that!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s