Asp.Net Google Charts (Grafik) Kullanımı
Merhaba Arkadaşlar,
Bugün size Asp.Net’te Google Charts ile verileri nasıl kolay bir şekilde grafik haline getirebileceğinizi göstereceğim.
Biz burada grafik türü olarak Line Chart kullanacağız. Siz buradan bakarak istediğiniz grafik türünü seçebilirsiniz.
Önce yeni bir sayfa oluşturarak aşağıdaki kodları <head></head> arasına ekliyoruz.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1.1',
'packages':['annotatedtimeline', 'corechart']
}]
}"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'data.aspx/GetData',
data: '{}',
success: function (response) {
drawchart(response.d); // calling method
},
error: function () {
//alert("Error loading data...........");
}
});
})
google.setOnLoadCallback(drawChart);
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'tarih');
data.addColumn('number', 'sicaklik');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].tarih, dataValues[i].sicaklik]);
}
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '#.######' });
formatter.format(data, 1);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('LineCharts')).
draw(data,
{
position: "relative",
fontsize: "10px",
chartArea: { left: '5%', width: '90%', height: '150px' },
backgroundColor: '#f0f6f2',
//hAxis: { textPosition: 'none'},
curveType: 'function',
legend: { position: 'bottom' },
"tooltip": { textStyle: { fontSize: 12 } },
"hAxis": { textPosition: "none", gridlines: { color: 'red', count: 7 } },
focusTarget: 'category'
});
google.setOnLoadCallback(drawVisualization);
}
</script>
Sonra birazda ekranda ortalayarak div oluşturuyoruz.
<br />
<br />
<center><h2><strong>SICAKLIK GRAFİĞİ (°C)</strong></h2></center>
<br />
<center>
<div id="LineCharts" style="width: 90%; height: 150px;">
</div>
</center>
<br />
<br />
Şimdide verimizi çekeceğimiz sayfamızı oluşturuyoruz. Ben data.aspx sayfasını oluşturdum. Burada veriyi alacağımız metodu (GetData) [WebMethod] yapıyoruz. Bu sayfaya da aşağıdaki gibi kodları ekliyoruz.
public static DataTable GetDataMethod()
{
DataTable table = new DataTable();
table.Columns.Add("tarih", typeof(string));
table.Columns.Add("sicaklik", typeof(string));
table.Rows.Add("01.01.2016", "20");
table.Rows.Add("02.01.2016", "18");
table.Rows.Add("03.01.2016", "15");
table.Rows.Add("04.01.2016", "14");
table.Rows.Add("05.01.2016", "15");
table.Rows.Add("06.01.2016", "17");
table.Rows.Add("07.01.2016", "19");
table.Rows.Add("08.01.2016", "25");
table.Rows.Add("09.01.2016", "20");
table.Rows.Add("10.01.2016", "21");
table.Rows.Add("11.01.2016", "22");
table.Rows.Add("12.01.2016", "22");
table.Rows.Add("13.01.2016", "23");
table.Rows.Add("14.01.2016", "20");
table.Rows.Add("15.01.2016", "18");
table.Rows.Add("16.01.2016", "17");
table.Rows.Add("17.01.2016", "15");
table.Rows.Add("18.01.2016", "14");
table.Rows.Add("19.01.2016", "10");
table.Rows.Add("20.01.2016", "14");
table.Rows.Add("21.01.2016", "17");
table.Rows.Add("22.01.2016", "19");
table.Rows.Add("23.01.2016", "24");
table.Rows.Add("24.01.2016", "27");
table.Rows.Add("25.01.2016", "30");
table.Rows.Add("26.01.2016", "29");
table.Rows.Add("27.01.2016", "28");
table.Rows.Add("28.01.2016", "27");
table.Rows.Add("29.01.2016", "26");
table.Rows.Add("30.01.2016", "25");
table.Rows.Add("31.01.2016", "24");
return table;
}
[WebMethod]
public static List<ChartData> GetData()
{
DataTable table = GetDataMethod();
List<ChartData> dataList = new List<ChartData>();
foreach (DataRow dtrow in table.Rows)
{
ChartData details = new ChartData();
details.tarih = dtrow[0].ToString();
details.sicaklik = float.Parse(dtrow[1].ToString(), CultureInfo.InvariantCulture.NumberFormat);
dataList.Add(details);
}
return dataList;
}
public class ChartData
{
public string tarih { get; set; }
public float sicaklik { get; set; }
}
Ben burada veriyi statik olarak verdim. Siz istediğiniz gibi veritabanın’dan çekebilirsiniz. Sonuç olarak aşağıdaki gibi grafiği ekrana basmış oluyoruz.
Son yorumlar