Click here to Skip to main content
15,920,438 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

JavaScript
cshtml page
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

            @section Scripts{

    <script type="text/javascript">
      
       

                $(document).ready(function () {
                    //Load Data Here
                    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>
    }

C#
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>
Posted
Updated 5-Jul-15 19:38pm
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900