This is my code: I am programming in C# asp.net
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'controls'] });
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable(<%=Dashboard()%>
);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Monto'
}
});
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
dashboard.bind(donutRangeSlider, pieChart);
dashboard.draw(data);
}
I extract the data from SQL server:
protected string Dashboard()
{
SqlConnection conexionSQL = new SqlConnection(@"Data Source=DESKTOP-CSI0N6I\FREDDY;Initial Catalog=apci5; Integrated Security = True");
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "SELECT D.DESCRIPCION_DEPARTAMENTO , SUM(DC.PRESUPUESTO) Monto FROM Intervenciones I , Departamentos D, DETALLE_INTER_COOP DC " +
"WHERE I.COD_DEPARTAMENTO = D.COD_DEPARTAMENTO AND I.COD_INTERVENCION = DC.COD_INTERVENCION GROUP BY D.DESCRIPCION_DEPARTAMENTO " +
"ORDER BY D.DESCRIPCION_DEPARTAMENTO ";
cmd.CommandType = CommandType.Text;
cmd.Connection = conexionSQL;
conexionSQL.Open();
DataTable datos = new DataTable();
datos.Load(cmd.ExecuteReader());
conexionSQL.Close();
string strDatos;
strDatos = "[['Departamentos','Monto'], ";
foreach (DataRow dr in datos.Rows)
{
strDatos = strDatos + "[";
strDatos = strDatos + "'" + dr[0] + "'" + "," + dr[1];
strDatos = strDatos + "],";
}
strDatos = strDatos + "]";
return strDatos;
}
And these are the divs
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="chart_div" ></div>
</div>
When I run the web page, the graph does not load. I am using multiview to show different types of graphs, 3 graphs work for me, and when making a dashboard it is the only one that does not load for me. I have already tried the example that Google Chart puts and it works, but my version does not. I think it may be at the time of extracting the data from the sql server 2014.
This is an image of how it should come out:
EDIT: This is what I get as an error in the console.
These are my data that I pass
The number passes with (,) in the array
My temporary solution is to convert the decimals to integers, I do that in the same query. EXAMPLE:
PASSING SELECT DEPARTMENT_DESCRIPTION,
(SUM(DC.BUDGET)) Amount FROM .....
--->(SUM(DC.BUDGET))
TO SELECT
DC.DEPARTMENT_DESCRIPTION
, CAST((ROUND(SUM(DC.BUDGET ), 0, 0)) AS INT) Amount FROM ......
-----> CAST((ROUND(SUM(DC.BUDGET), 0, 0))
My temporary solution is to convert the decimals to integers, I do that in the same query.
EXAMPLE: PASSING SELECT DEPARTMENT_DESCRIPTION , (SUM(DC.BUDGET)) Amount FROM ..... ---> (SUM(DC.BUDGET))
TO SELECT DC.DEPARTMENT_DESCRIPTION, CAST ((ROUND(SUM(DC.BUDGET ), 0, 0)) AS INT) Amount FROM ...... -----> CAST((ROUND(SUM(DC.BUDGET), 0, 0))
Because the data that I extracted from sql to c# asp.net went from 100.10 to 100.10 and I don't know why this happened so I decided to convert it to integer and that's it.