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.
Merhaba Arkadaşlar, Sizinle Türkiye'de faaliyet gösteren bankalar ve ödeme kuruluşlarının kartlarının güncel BIN numaraları listesini…
Bu yazımda size Asp.Net üzerinden bir api'ye nasıl dizi (Array List) veri gönderebileceğinizden bahsetmek istiyorum.…
Merhaba Arkadaşlar, Bu yazımda size Postman üzerinden bir diziyi (Array List) nasıl post olarak göndereceğinizden…
Merhaba Arkadaşlar, Google Sheet üzerinden hazırladığınız bir uygulamanızı nasıl belirli saatlerde çalışmasını sağlayabileceğinizi paylaşmak istiyorum.…
Merhaba Arkadaşlar, Google Sheet hepimizin kullandığı bir uygulama. Sizlerle Sheet üzerinden nasıl Mysql veritabanına bağlanıp…
Merhaba Arkadaşlar, İnternet sayfalarında aşağıdaki şekilde kolayca Whatsapp mesaj linki ekleyebilirsiniz.
