Creare grafico a linee con dati dinamici

**devil946** · 14-02-2017, 09:26

Questo è il mio codice attuale:

codice:

<%@LANGUAGE="VBSCRIPT"%>
<%' Controllo se l'utente si è logato
If Session("status") <> "login" Then
response.redirect "software.asp"


Response.expires = 0
Response.expiresabsolute = Now() - 1
Response.addHeader "pragma", "no-cache"
Response.addHeader "cache-control", "private"
Response.CacheControl = "no-cache"
End If
%>
<HTML>
<HEAD>
<title>TEAM-GEST: SOFTWARE PROFESSIONALE PER GESTIRE IL TUO TEAM</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/logo1.ico" />
<script type="text/javascript" src="Chart.js"></script>
<%
session("StagioneAttuale")
Categoria = request.form("Categoria")


' stringa di conn
Set Conn = Server.CreateObject("ADODB.Connection")
Connect = "Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath(""& session("MM_Percorso") &"")
Conn.Open Connect


Set rs = Server.CreateObject("adodb.recordset")
rs.Open "SELECT * FROM T_Presenze_Assenze"&session("StagioneAttuale")&" where Categoria='" & Categoria & "'", Conn,3,3


if not rs.eof then


Set rsAssenti = Server.CreateObject("adodb.recordset")
rsAssenti.Open "SELECT DISTINCT count([T_Presenze_Assenze"&session("StagioneAttuale")&"].Motivo) as ConteggioMotivo, DataInsert FROM T_Presenze_Assenze"&session("StagioneAttuale")&" where Motivo <= '5' and Categoria='" & Categoria & "' group by DataInsert", Conn,3,3
rsAssenti.movefirst


'TotaleAssenti = ValoreAssenti
'TotaleGiocatori = rs.recordcount
'PercentualeAssenti = Round((TotaleAssenti * 100)/TotaleGiocatori,0)
%>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.DataTable();
        data.addColumn('data', 'Data');
        data.addColumn('number', 'Valori');
    <%while not rsAssenti.eof
		ValoreAssenti = rsAssenti("ConteggioMotivo")
		DataAssenti = rsAssenti("DataInsert")%>
		data.addRows([
          [<%=DataAssenti%>,<%=ValoreAssenti%>]
    <%
	rsAssenti.movenext
	wend
		  %>
        ]);
        // Set chart options
        var options = {
          title: 'Prova',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>


</HEAD>
<body bgcolor="#7A8996">
<div id="chart_div" style="width: 800px; height: 410px;"></div>


<%else%>
<script type="text/javascript">
<!--window.close()-->
</script>
<%end if%>
</body>
</html>

**devil946** · 14-02-2017, 12:41

Dai ragazzi un'aiutino. Ho necessità di sapere solamente dove va posizionato il ciclo per fargli leggere tutti i dati al grafico, poichè per adesso non appare niente, e quando dico niente è NIENTE. Neanche il grafico.
Grazie

**lucavizzi** · 14-02-2017, 14:32

Originariamente inviata da devil946

Dai ragazzi un'aiutino. Ho necessità di sapere solamente dove va posizionato il ciclo per fargli leggere tutti i dati al grafico, poichè per adesso non appare niente, e quando dico niente è NIENTE. Neanche il grafico.
Grazie

Il ciclo va posizionato esattamente dove ora hai i dati statici.
Come ha cercato di spiegarti Vincent, devi usare ASP per "stampare a video" la parte di javascript che contiene i dati per il grafico.

Ti posto un esempio "statico"

codice:

var months=[ ['mese', 'Ordini'],['Gen', 95 ],['Feb', 60],['Mar', 0],['Apr', 0],['Mag', 0],['Giu', 0],['Lug', 0],['Ago', 0],['Set', 0],['Ott', 0],['Nov', 0],['Dic', 0]];
 
 google.load('visualization', '1', {packages: ['corechart']});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
  var data = google.visualization.arrayToDataTable(months);
   var options = {
   //legend: 'bottom',
   title: 'Numero di Ordini 2015',
   hAxis: {title: '2015', titleTextStyle: {color: '#333'}},
   //backgroundColor: '#f5f5f5',
   legend: {position: 'none', textStyle: {fontSize: 14}}
   };
  var chart = new google.visualization.ColumnChart(document.getElementById('ex0'));
  chart.draw(data, options);   
  
 }

In questo esempio viene usato il metodo google.visualization.arrayToDataTable() per convertire l'array months[] in dati per il grafico.

Se volessimo rendere dinamico il grafico, cioè fare in modo che mostri dati presi dal db, l'esempio diventerebbe:

codice:

var months=[ ['mese', 'Ordini'],['Gen', <%=ordini_gennaio%> ],['Feb', <%=ordini_febbraio%>],['Mar', <%=ordini_marzo%>]];// eccetera
 
 google.load('visualization', '1', {packages: ['corechart']});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
  var data = google.visualization.arrayToDataTable(months);
   var options = {
   //legend: 'bottom',
   title: 'Numero di Ordini 2015',
   hAxis: {title: '2015', titleTextStyle: {color: '#333'}},
   //backgroundColor: '#f5f5f5',
   legend: {position: 'none', textStyle: {fontSize: 14}}
   };
  var chart = new google.visualization.ColumnChart(document.getElementById('ex0'));
  chart.draw(data, options);   
  
 }

Il trucco sta nello stampare a video i dati, ecco perché negli esempi non trovi documentazione su come rendere dinamici i grafici, perché puoi semplicemente stampare nel sorgente della pagina i dati dinamici.

**devil946** · 14-02-2017, 16:22

Grazie luca ma nel tuo esempio i dati dinamici sono ricavati da recordset diversi a seconda dei mesi, mentre io ho un unico recordset con dentro sia i valori relativi alle presenze e sia i valori relativi alle date inerenti alle presenze.
Mi spiego avrò
01/01/2017 12
08/01/2017 16
15/01/2017 11
22/01/2017 8
ecc.....
quindi ecco perchè devo fare un ciclo prima di inserire i dati nel var.... javascript

**lucavizzi** · 14-02-2017, 17:15

Originariamente inviata da devil946

Grazie luca ma nel tuo esempio i dati dinamici sono ricavati da recordset diversi a seconda dei mesi, mentre io ho un unico recordset con dentro sia i valori relativi alle presenze e sia i valori relativi alle date inerenti alle presenze.
Mi spiego avrò
01/01/2017 12
08/01/2017 16
15/01/2017 11
22/01/2017 8
ecc.....
quindi ecco perchè devo fare un ciclo prima di inserire i dati nel var.... javascript

Che problema c'è a fare il ciclo?

**devil946** · 14-02-2017, 17:16

nesuno ma dove lo inserisco?

**devil946** · 14-02-2017, 17:17

Ho modificato il codice cosi:

codice:

<HEAD>
<title>TEAM-GEST: SOFTWARE PROFESSIONALE PER GESTIRE IL TUO TEAM</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/logo1.ico" />
<script type="text/javascript" src="Chart.js"></script>
<%
session("StagioneAttuale")
Categoria = request.form("Categoria")


' stringa di conn
Set Conn = Server.CreateObject("ADODB.Connection")
Connect = "Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath(""& session("MM_Percorso") &"")
Conn.Open Connect


Set rs = Server.CreateObject("adodb.recordset")
rs.Open "SELECT * FROM T_Presenze_Assenze"&session("StagioneAttuale")&" where Categoria='" & Categoria & "'", Conn,3,3


if not rs.eof then


Set rsAssenti = Server.CreateObject("adodb.recordset")
rsAssenti.Open "SELECT DISTINCT count([T_Presenze_Assenze"&session("StagioneAttuale")&"].Motivo) as ConteggioMotivo, DataInsert FROM T_Presenze_Assenze"&session("StagioneAttuale")&" where Motivo <= '5' and Categoria='" & Categoria & "' group by DataInsert", Conn,3,3
rsAssenti.movefirst
	ValoreAssenti = rsAssenti("ConteggioMotivo")
	DataAssenti = rsAssenti("DataInsert")
%>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
	var months=[ 
	['data', 'Presenti'],
	['gen', <%=ValorePresenti%> ]
	];// eccetera
 
 google.load('visualization', '1', {packages: ['corechart']});
 google.setOnLoadCallback(drawChart);
 
 function drawChart() {
  var data = google.visualization.arrayToDataTable(months);
   var options = {
   //legend: 'bottom',
   title: 'Numero di Ordini 2015',
   hAxis: {title: '2015', titleTextStyle: {color: '#333'}},
   //backgroundColor: '#f5f5f5',
   legend: {position: 'none', textStyle: {fontSize: 14}}
   };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);   
        }
</script>


</HEAD>

**lucavizzi** · 14-02-2017, 17:18

Originariamente inviata da devil946

nesuno ma dove lo inserisco?

Come ti ho già detto, devi inserirlo dove vuoi stampare i dati.

**devil946** · 14-02-2017, 17:19

do metto il ciclo while not rsAssenti.eof

rsAssenti.movenext
wend

**lucavizzi** · 14-02-2017, 17:21

Originariamente inviata da devil946

Ho modificato il codice cosi:

codice:

<HEAD>
<title>TEAM-GEST: SOFTWARE PROFESSIONALE PER GESTIRE IL TUO TEAM</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/logo1.ico" />
<script type="text/javascript" src="Chart.js"></script>
<%
session("StagioneAttuale")
Categoria = request.form("Categoria")


' stringa di conn
Set Conn = Server.CreateObject("ADODB.Connection")
Connect = "Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath(""& session("MM_Percorso") &"")
Conn.Open Connect


Set rs = Server.CreateObject("adodb.recordset")
rs.Open "SELECT * FROM T_Presenze_Assenze"&session("StagioneAttuale")&" where Categoria='" & Categoria & "'", Conn,3,3


if not rs.eof then


Set rsAssenti = Server.CreateObject("adodb.recordset")
rsAssenti.Open "SELECT DISTINCT count([T_Presenze_Assenze"&session("StagioneAttuale")&"].Motivo) as ConteggioMotivo, DataInsert FROM T_Presenze_Assenze"&session("StagioneAttuale")&" where Motivo <= '5' and Categoria='" & Categoria & "' group by DataInsert", Conn,3,3
rsAssenti.movefirst
    ValoreAssenti = rsAssenti("ConteggioMotivo")
    DataAssenti = rsAssenti("DataInsert")
%>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    var months=[ 
    ['data', 'Presenti'],
    ['gen', <%=ValorePresenti%> ]
    ];// eccetera
 
 google.load('visualization', '1', {packages: ['corechart']});
 google.setOnLoadCallback(drawChart);
 
 function drawChart() {
  var data = google.visualization.arrayToDataTable(months);
   var options = {
   //legend: 'bottom',
   title: 'Numero di Ordini 2015',
   hAxis: {title: '2015', titleTextStyle: {color: '#333'}},
   //backgroundColor: '#f5f5f5',
   legend: {position: 'none', textStyle: {fontSize: 14}}
   };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);   
        }
</script>


</HEAD>

Posta la versione statica funzionante

Discussione: Creare grafico a linee con dati dinamici

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio