I want to create hyperlink on a graph chart by using json which fetch value from database and display in graph.I just create the graph which fetch the data from database but i m not able to create a hyperlink whenever a column click it redirect to another page. Plz help me to solve this
Here is my COde:
cshtml page
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
var chartData = null;
$.ajax({
url: '/GoogleChart/GetSalesData',
type: 'GET',
dataType: 'json',
data: '',
success: function (d) {
chartData = d;
},
error: function () {
alert('Error!');
}
}).done(function () {
drawChart(chartData);
});
});
function drawChart(d) {
var chartData = d;
var data = null;
data = google.visualization.arrayToDataTable(chartData);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(0),
calc: function () { return 0; }
}, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () { return 0; }
}, {
type: 'number',
label: data.getColumnLabel(2) ,
calc: function () { return 0; }
}, {
type: 'number',
label: data.getColumnLabel(3),
calc: function () { return 0; }
}]);
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
var options = {
title: '',
legend: 'bottom',
curveType: 'function',
pointSize: 7,
dataOpacity: 5.3,
hAxis: {
title: 'Year',
format: '#'
},
vAxis: {
minValue: 0,
maxValue: 1000000,
title: 'welcome'
},
chartArea: {
left:100, top: 50, width:'70%', height: '50%' ,
},
animation: {
duration: 1000
}
};
var runFirstTime = google.visualization.events.addListener(chart, 'ready', function ()
{
google.visualization.events.removeListener(runFirstTime);
chart.draw(data, options);
});
chart.draw(view, options);
}
google.load('visualization', '1', { packages: ['corechart'] });
</script>
}
Controller
public JsonResult GetSalesData()
{
List<salesdata> sd = new List<salesdata>();
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
sd = dc.SalesDatas.OrderBy(a => a.Year).ToList();
}
var chartData = new object[sd.Count + 1];
chartData[0] = new object[]{
"Year",
"Electronics",
"Book And Media",
"Homee And Kitchen"
};
int j = 0;
foreach (var i in sd)
{
j++;
chartData[j] = new object[] { i.Year, i.Electronics, i.BookAndMedia, i.HomeAndKitchen };
}
return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}</salesdata></salesdata>