forum

Home / DeveloperSection / Forums / Google chart with data from database

Ask Question

Google chart with data from database

Sunil Singh 1388 15-Dec-2017

I'm facing problem in binding google chart with database. 

<script type="text/javascript">

    google.charts.load("current", { packages: ["corechart"] });

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        data = new google.visualization.DataTable();

        data.addColumn('string', 'Topping');

        data.addColumn('number', 'Slices');



        data.addRows([



          ['Onions', 1],

          ['Olives', 1],

          ['Zucchini', 1],

          ['Pepperoni', 2],



        ]);



        var options = {

            title: '',

            pieHole: 0.4,

        };



        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

        chart.draw(data, options);

    }

</script>
asp.net mvc c#  asp.net mvc  razor 
Updated on 15-Dec-2017
Sunil Singh

Sunil Singh

Follow

Can you answer this question?

Answer

1 Answers

Manish Kumar

Manish Kumar

15-Dec-2017

You can bind google chart with viewbag data..

<script type="text/javascript">

    google.charts.load('current', { packages: ['corechart', 'bar'] });

    google.charts.setOnLoadCallback(drawChart);



    function drawChart() {

        var data = '@Html.Raw(Json.Encode(@ViewBag.Data))';

        var dt = new google.visualization.DataTable();

        dt.addColumn('string', 'Date');

        dt.addColumn('number', 'Product');

        var data = JSON.parse(data);

        $.each(data, function (i, v) {

            // console.log(new Date(parseInt(v.Date.substr(6))).toDateString());

            dt.addRow([new Date(parseInt(v.Date.substr(6))).toDateString(), v.Total]);

        });

        var options = {

            chart: {

                title: 'Recent Record',

                subtitle: 'Count',

            }

        };

      

        }

    }

    google.visualization.events.addListener(chart, 'select', selectHandler);

    chart.draw(dt, options);

}



</script>
MindStick Training

Liked By