---
title: "Google chart with data from database"  
description: "Google chart with data from database"  
author: "Sunil Singh"  
published: 2017-12-15  
updated: 2017-12-15  
canonical: https://www.mindstick.com/forum/34402/google-chart-with-data-from-database  
category: "asp.net mvc"  
tags: ["c#", "asp.net mvc", "razor"]  
reading_time: 2 minutes  

---

# Google chart with data from database

I'm facing [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) in [binding](https://www.mindstick.com/blog/146/dynamic-binding-in-c-sharp) [google](https://www.mindstick.com/articles/43833/google-lighthouse-and-how-is-it-changing-the-way-we-development-and-design-websites) [chart](https://www.mindstick.com/articles/1509/show-google-analytics-data-in-chart-in-asp-dot-net-mvc) 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>
```

## Replies

### Reply by Manish Kumar

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>
```


---

Original Source: https://www.mindstick.com/forum/34402/google-chart-with-data-from-database

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.