Gráfico dinâmico de rosquinhas do Google a partir de dados de consulta sql
Eu quero criar um gráfico de rosquinha do Google preenchido com dados de uma consulta sq
Procurei um código de exemplo, mas não consegui fazer um gráfico aparece
Roteiro
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Global variable to hold data
google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(DrawDonut);
$(function DrawDonut() {
var options = {
pieHole: 0.4,
colors: ['#286090', '#d7d7d7']
};
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Default.aspx/GetChartData',
data: '{}',
success:
function (response) {
drawchart(response.d);
},
error: function () {
alert("Error loading data! Please try again.");
}
});
})
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'UnitID');
data.addColumn('number', 'TotalUse');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].UnitID, dataValues[i].TotalUse]);
}
new google.visualization.PieChart(document.getElementById('chart')).
draw(data, { title: "Use distributed on units" });
}
</script>
Html:
<div id="chart" style="width: 900px; height: 600px;"></div>
Código por trás
<WebMethod()>
Public Shared Function GetChartData(ByVal MemberIndex As String) As List(Of Object)
Dim query As String = "SELECT Log.[UnitID], COUNT(*) As [TotalUse] FROM Log WHERE (MemberIndex_Log = @MemberIndex AND (GramSup1 + GramSup2) > 0 AND Log.[UnitID] > 5000) GROUP BY Log.[UnitID]"
Dim constr As String = ConfigurationManager.ConnectionStrings("DefaultConnection").ConnectionString
Dim chartData As List(Of Object) = New List(Of Object)()
chartData.Add(New Object() {"UnitID", "TotalUse"})
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand(query)
cmd.CommandType = CommandType.Text
cmd.Connection = con
cmd.Parameters.AddWithValue("@MemberIndex", Convert.ToInt32(HttpContext.Current.Session("MemberIndex")))
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
chartData.Add(New Object() {sdr("UnitID"), sdr("TotalUse")})
End While
End Using
con.Close()
Return chartData
End Using
End Using
End Function
Eu quero que um gráfico de rosca dinâmico apareça, mostrando o uso das unidades (geralmente de 2 10 unidades) distribuídas no gráfic