quinta-feira, 9 de junho de 2011

Integrate Google Graph with .Net

I was working in a dashboard section in my current project and everybody knows that dashboard mean graphs. Surfing on the net I could find a lot of options free and paid. Unfortunately the client decided for a paid one. Anyway I was taking a good look at Google Graph API which is sweet! Then I built my own solution to populate the graph based in my database information.

Check out the Google Graph

Based on this sample I created my own solution, basically before building the graph I'm using the jQuery.ajax() function to perform an ajax request in an ASPX page which will return the data to populate the graph.

This is the code behind from my page which will provide the data.
public partial class chart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//Postback
string strReturn = "&Description=string,Year|number,Sales|number,Expenses";
strReturn += "&Data=2004,1000,400|2005,1170,460|2006,860,580|2007,1030,540";
Response.Write(strReturn.Trim());
}
}


As you can see I hardcoded the return value. Anyway you can get the idea about how to build your own return value.

So based in the sample provided by Google I just added few code in the script tag.
ascript type="text/javascript">
var myDataDescription = new Array();
var myData = new Array();

$.ajax({ url: 'chart.aspx', type: 'post', data: 'Type=1',
dataType: "text/html",
success: function (data) {
var desc = data.split('&Description=');
var ind = desc[1].indexOf('&');
var indFinal = (desc[1].length - (ind + 6));
var mydata = desc[1].substr(ind + 6, indFinal);
desc = desc[1].substr(0, ind - 1);
desc = desc.split('|');
mydata = mydata.split('|');

//Generate description array
for (var i = 0; i < desc.length; i++) {
var descInfo = desc[i].split(',');

myDataDescription[i] = new Array();
myDataDescription[i][0] = descInfo[0];
myDataDescription[i][1] = descInfo[1];
}

//Generate data array
for (var i = 0; i < mydata.length; i++) {
var descData = mydata[i].split(',');

myData[i] = new Array(3);
myData[i][0] = descData[0];
myData[i][1] = descData[1];
myData[i][2] = descData[2];
}

},
error: function (err) { alert('failed: ' + err); }
});

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();

for (var i = 0; i < myDataDescription.length; i++) {
var columnType = myDataDescription[i][0];
var columnName = myDataDescription[i][1];
data.addColumn(columnType, columnName);
}

data.addRows(myData.length);

for (var i = 0; i < myData.length; i++) {
var columnA = myData[i][0];
var columnB = Number(myData[i][1]);
var columnC = Number(myData[i][2]);

data.setValue(i, 0, columnA);
data.setValue(i, 1, columnB);
data.setValue(i, 2, columnC);
}

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240, title: 'Company Performance' });

}


Here you can download the source code.

quarta-feira, 8 de junho de 2011

Prevent page to be cached

Who has never had a problem with the famous back button in the browser?

If you don't, so wait until the QA starts its job!!! I thought I had blocked all the leak in my system, until the QA started hitting the BACK / NEXT button in the browser and broke down everything.

To solve the problem in IE is really easy, but in Firefox can be annoying. Safari as usual, is the best one. Apple is always surprising with their usability!

Past the code bellow in the top of your Page_Load method

//Not to cache in IE
Response.Cache.SetCacheability(HttpCacheability.NoCache);
//Not to cache in Firefox
Random rd = new Random();
Response.AddHeader("ETag", rd.Next(1111111, 9999999).ToString());
Response.AddHeader("Pragma", "no-cache");
Response.CacheControl = "no-cache";
Response.Cache.SetNoStore();
Response.Expires = -1;