Creare grafico a linee con dati dinamici

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

non ho versioni statiche funzionanti

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

Originariamente inviata da devil946

non ho versioni statiche funzionanti

Creala

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

codice:

<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
	'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', '10' ],
	['feb', '30' ],
	['mar', '30' ],
	['apr', '50' ]
	];// 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>
<body bgcolor="#7A8996">
<div id="chart_div" style="width: 800px; height: 410px;"></div>

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

Bene,
se i dati devono stare qui:

codice:

    <script type="text/javascript">
    var months=[ 
    ['data', 'Presenti'],
    ['gen', '10' ],
    ['feb', '30' ],
    ['mar', '30' ],
    ['apr', '50' ]
    ];// eccetera

Il tuo codice sarà simile a questo

codice:

<script type="text/javascript">

var months=[
    ['data','Presenti'],
<%
while not rsAssenti.eof 
    Response.Write("['"&rsAssenti("DataInsert")&"',"&rsAssenti("ConteggioMotivo")&"],");
rsAssenti.movenext
 wend
%>
];
</script>

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

codice:

<%@LANGUAGE="VBSCRIPT"%>
<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="https://www.gstatic.com/charts/loader.js"></script>	  
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript">
var months=[ ['mese', 'Ordini'],
['Gen', 95 ],
['Feb', 60],
['Mar', 10],
['Apr', 20],
['Mag', 30],
['Giu', 40],
['Lug', 50],
['Ago', 70],
['Set', 80],
['Ott', 90],
['Nov', 120],
['Dic', 110]];
 
 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);   
 }
</script>
</HEAD>
<body bgcolor="#7A8996">
<div id="ex0" style="width: 800px; height: 410px;"></div>
</body>
</html>

Ma non da nessun risukltato

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

Non lo posso debuggare a distanza.

Crea una copia statica funzionante partendo dagli esempi, poi inserisci i dati dinamicamente nella maniera che ti ho mostrato.

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

Il problema è che il codice che mi hai inviato te statico non produce alcun risultato

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

questo funziona

codice:

<%@LANGUAGE="VBSCRIPT"%>
<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="https://www.gstatic.com/charts/loader.js"></script>	  
<script type="text/javascript" src="Chart.js"></script>
</HEAD>
<body>
<canvas id="myLineChart" width="600" height="600"></canvas> 
 
<script> 
// Definisco i dati da mostrare nel grafico 
var data = { 
 
    labels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto"], 
    datasets: [ 
        { 
            label: "Temperature 2013", 
            fillColor: "rgba(99,240,220,0.2)", 
            strokeColor: "rgba(99,240,220,1)", 
            pointColor: "rgba(99,240,220,1)", 
            pointStrokeColor: "#fff", 
            pointHighlightFill: "#fff", 
            pointHighlightStroke: "rgba(220,220,220,1)", 
            data: [8, 11, 18, 22, 24, 26, 34, 39] 
        }, 
        { 
            label: "Temperature 2014", 
            fillColor: "rgba(205,99,151,0.2)", 
            strokeColor: "rgba(205,99,151,1)", 
            pointColor: "rgba(205,99,151,1)", 
            pointStrokeColor: "#fff", 
            pointHighlightFill: "#fff", 
            pointHighlightStroke: "rgba(151,187,205,1)", 
            data: [16, 18, 22, 24, 26, 28, 32, 36] 
        } 
    ] 
}; 
 
// Ottengo il contesto 2D del Canvas in cui mostrare il grafico 
var ctx = document.getElementById("myLineChart").getContext("2d"); 
 
// Crea il grafico e visualizza i dati 
var myLineChart = new Chart(ctx).Line(data); 
</script> 
</body>
</HTML>

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

Non funzionava a te perché probabilmente inizializza il grafico su un id diverso, non presente nel tuo documento.

Con ASP devi creare una stringa simile a questa

codice:

dati2013="[8, 11, 18, 22, 24, 26, 34, 39]";

poi nel codice javascript ci metti:

codice:

data: <%=dati2013?>

stessa cosa per il 2014.

**devil946** · 14-02-2017, 18:08

Allora il codice che ti posto stampa solo un pallino, come se ricevesse solo 1 valore per la data e un valore per le assenze, non disegna gli assi e niente altro.

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="https://www.gstatic.com/charts/loader.js"></script>	  
<script type="text/javascript" src="Chart.js"></script>
<%
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
%>
</HEAD>
<body bgcolor="#7A8996">
<canvas id="myLineChart" width="800" height="600"></canvas> 
 
<script> 
// Definisco i dati da mostrare nel grafico 
var data = { 
 
    labels: [""], 
    datasets: [ 
        { 
            label: "Temperature 2013", 
            fillColor: "rgba(99,240,220,0.2)", 
            strokeColor: "rgba(99,240,220,1)", 
            pointColor: "rgba(99,240,220,1)", 
            pointStrokeColor: "#fff", 
            pointHighlightFill: "#fff", 
            pointHighlightStroke: "rgba(220,220,220,1)",
			<%
while not rsAssenti.eof 
    Response.Write("data: ['"&rsAssenti("DataInsert")&"',"&rsAssenti("ConteggioMotivo")&"],")
rsAssenti.movenext
wend
%> 
           // data: [8, 11, 18, 22, 24, 26, 34, 39] 
        } 
    ] 
}; 
 
// Ottengo il contesto 2D del Canvas in cui mostrare il grafico 
var ctx = document.getElementById("myLineChart").getContext("2d"); 
 
// Crea il grafico e visualizza i dati 
var myLineChart = new Chart(ctx).Line(data); 
</script>
<%else
%>
<script type="text/javascript">
<!--window.close()-->
</script>
<%end if%> 
</body>
</HTML>

Discussione: Creare grafico a linee con dati dinamici

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio