Home > Forum > ASP.NET > Slider controllered line graph in asp.net mvc application. help me!

Slider controllered line graph in asp.net mvc application. help me!

by sagar nagwekar   on Sep 16, 2013   Category: ASP.NET  |  Views: 1780    |  Points: 5   |  Starter 
  Reply
Hi all,

I am trying to show line graphs in asp.net mvc2.0 application with jQuery slider controller functionality to change the x and y axis values.


google.load("visualization", "1", { packages: ["corechart", "imagelinechart"] });
google.setOnLoadCallback(initChart);
function GetData(id, userid) {

var strView = "";

if (id == 0) {
strView = "Monthly";
}
else if (id == 1)
strView = "Weekly";
else
strView = "Daily";


$.ajaxSetup({ async: false });

$.get('<%:ResolveUrl("~/PLReport/GetData") %>', { Id: id, userid: userid },
function (data) {
var tdata = new google.visualization.DataTable();
var chart;
tdata.addColumn('string', 'Date');
tdata.addColumn('number', 'ProfitLoss');
for (var i = 0; i < data.length; i++) {

tdata.addRow([data.Date, data.ProfitLoss]);
}

if (id == 2) {
//alert("1");
var options = {
title: "PortFolio " + strView + " P/L Report",
width: 1400,
height: 600,
hAxis: { maxAlternation: 1, minTextSpacing: 20 },
// viewWindow: { min: 1100},
chartArea: { left: 70, width: 1200 }

// hAxis: { minTextSpacing: 20 },
// chartArea: { height:"60%"}
};
}
else {
//alert("2");
var options = {
title: "PortFolio " + strView + " P/L Report",
width: "auto",
height: 600
// hAxis: { maxAlternation: 1, minTextSpacing: 30 },
// viewWindow: { min: 1100},
// chartArea: {left:70, width:1100}

// hAxis: { minTextSpacing: 20 },
// chartArea: { height:"60%"}
};
}

chart = new google.visualization.LineChart(document.getElementById('chart_Show'));

$(function () {
$("#sliderx").slider({
value: 10,
range: 'min',
min: 5,
max: 20,
step: 1,
change: function (event, ui) {
alert(ui.value);
$('#header').text('debug=' + ui.value);
options.hAxis.viewWindow.min = ui.value;
//drawChart();
chart.draw(tdata, options);

}
});
});

function initChart() {
chart = new google.visualization.LineChart(document.getElementById('chart_Show'));
google.visualization.events.addListener(chart, 'ready', function () {
$('#sliderx').slider('enable');
//drawChart();
alert("2");

});
chart.draw(tdata, options);
}

chart.draw(tdata, options);

});


I am able to get the value of slider but not getting success in binding the value to x-axis of graph dynamically.

Bookmark and Share:
 
  User Reply  | Ask a question  |   Reply 


  No response found, be the first to answer this question.


Recent Post

Latest Posts