Chart.js e option

**devil946** · 20-02-2017, 13:50

Ciao a tutti, ho il seguente problema. Non mi appaiono le descrizioni sugli assi del mio grafico, cioè quali valori sono espressi, inoltre non mi appare neanche la legenda.
L'errore sta sicuramente nelle option, ma non riesco a capire dove
Grazie

codice:

<canvas id="myChart" width="700" height="500"></canvas> 
<script> 
// Definisco i dati da mostrare nel grafico 
var data = {
			<%	 Response.Write("labels: [")
				 while not rsPresentiGennaio.eof
				 Response.Write(""&Chr(34)&""&rsPresentiGennaio("DataInsert")&""&Chr(34)&",")
				 rsPresentiGennaio.movenext
				 wend
				 Response.Write("],")
			%>			  
    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: [1, 1, 2, 2, 2, 2, 2, 2, 2]
			<%   rsPresentiGennaio.movefirst
				 Response.Write("data: [")
				 while not rsPresentiGennaio.eof
				 Response.Write(""&rsPresentiGennaio("ConteggioMotivo")&",")
				 rsPresentiGennaio.movenext
				 wend
				 Response.Write("]")
			%>			 
        }
    ]	 
};
var options = {
			'title':'VERIFICHE',
			'titleTextStyle':{color: 'white', fontName: 'Trebuchet MS', fontSize: 20},	                
			backgroundColor:'#7A8996',
			'chartArea':{left:20,top:150,width:'100%',height:'100%'},
			fontSize:16,
			fontname:'Trebuchet MS',
			legend:{position: 'right', textStyle:{color: 'white', fontName: 'Trebuchet MS', fontSize: 16}},
			  };   
  
// Ottengo il contesto 2D del Canvas in cui mostrare il grafico 
var ctx = document.getElementById("myChart").getContext("2d"); 
 
// Crea il grafico e visualizza i dati 
var myNewChart = new Chart(ctx);
//myNewChart.Bar(data);
myNewChart.Line(data,options);
</script>

**cavicchiandrea** · 20-02-2017, 13:59

A) Posta il codice html che riceve il browser, non il codice asp che potrebbe celare errori
B) Posta link alla pagina pubblica per simulare il problema e vedere la pagina all'opera

**devil946** · 20-02-2017, 15:24

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="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
Gennaio = 01
Febbraio = 02


Set rsAssentiGennaio = Server.CreateObject("adodb.recordset")
rsAssentiGennaio.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 & "' and (((Month([DataInsert]))='" & Gennaio & "')) group by DataInsert order by DataInsert", Conn,3,3


Set rsPresentiGennaio = Server.CreateObject("adodb.recordset")
rsPresentiGennaio.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 & "' and (((Month([DataInsert]))='" & Gennaio & "')) group by DataInsert order by DataInsert", Conn,3,3


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


Set rsAssentiFebbraio = Server.CreateObject("adodb.recordset")
rsAssentiFebbraio.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 & "' and (((Month([DataInsert]))='" & Febbraio & "')) group by DataInsert", Conn,3,3


%>
</HEAD>
<body bgcolor="#7A8996">
<canvas id="myChart" width="700" height="500"></canvas> 
<script> 

.....
</script>
</body>
</HTML>

**cavicchiandrea** · 21-02-2017, 07:53

Scusa, forse (dubito) mi sono espresso male devi postare il codice che riceve il browser che è html non il codice asp e un link ad una pagina pubblica demo così da vedere il funzionamento ed eventuali errori che riporta la console.

**devil946** · 21-02-2017, 12:33

Questo è quello che riceve la pagina.

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="https://www.gstatic.com/charts/loader.js"></script>


<script type="text/javascript" src="Chart.js"></script>





</HEAD>


<body bgcolor="#7A8996">


<canvas id="myChart" width="700" height="500"></canvas>


<script>


// Definisco i dati da mostrare nel grafico


var data = {


			//labels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre"],


			labels: ["02/01/2017","04/01/2017","06/01/2017","09/01/2017","12/01/2017","14/01/2017","16/01/2017","18/01/2017","19/01/2017","23/01/2017","25/01/2017","27/01/2017",],


    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: [1, 1, 2, 2, 2, 2, 2, 2, 2]


			data: [3,5,2,3,3,5,3,5,3,3,5,4,]


        },


        {


			title: "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: [1, 1, 2, 2, 2, 2, 2, 2, 2]


data: [2,0,3,2,2,0,2,0,2,2,0,1,]        }


    ]


};


var options = {


			'title':'VERIFICHE',


			'titleTextStyle':{color: 'white', fontName: 'Trebuchet MS', fontSize: 20},


			backgroundColor:'#7A8996',


			'chartArea':{left:20,top:150,width:'100%',height:'100%'},


			fontSize:16,


			fontname:'Trebuchet MS',


			legend:{position: 'right', textStyle:{color: 'white', fontName: 'Trebuchet MS', fontSize: 16}},


			  };





// Ottengo il contesto 2D del Canvas in cui mostrare il grafico


var ctx = document.getElementById("myChart").getContext("2d");





// Crea il grafico e visualizza i dati


var myNewChart = new Chart(ctx);


//myNewChart.Bar(data);


myNewChart.Line(data,options);


</script>


<p>





</body>


</HTML>

Per il link non posso postare niente per adesso, vedi se riesci ad aiutarmi così altrimenti vedo che posso fare.
Grazie

**cavicchiandrea** · 21-02-2017, 13:01

Senza link ritengo che sia molto più difficili gli aiuti non potendo replicare il problema, spero di non sbagliare

**devil946** · 14-03-2017, 11:58

Ok rieccomi, di seguito il link per poter provare l'effetto.
http://www.fuoribinario.eu/prova_grafico.asp
Come vedete il risultato è a metà poichè non riesco a vedere la legenda.
Come faccio a farla comparire?
[CODE]
<%@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 bgcolor="#7A8996">
<canvas id="myChart" width="700" height="500"></canvas>
<script>
// Definisco i dati da mostrare nel grafico
var data = {
labels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre"],
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: [1, 1, 9, 2, 3, 3, 4, 8, 2]
},
{
title: "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: [9, 0, 5, 5, 2, 1, 7, 2, 2]
}
]
};
var options = {
title:"VERIFICHE",
titleTextStyle:{color: "#fff", fontName: "Trebuchet MS", fontSize: 20},
backgroundColor:"#7A8996",
chartArea:{left:20,top:150,width:'100%',height:'10 0%'},
fontSize:16,
fontname:"Trebuchet MS",
legend:{position: "right", textStyle:{color: "#fff", fontName: "Trebuchet MS", fontSize: 16}},
};

// Ottengo il contesto 2D del Canvas in cui mostrare il grafico
var ctx = document.getElementById("myChart").getContext("2d" );

// Crea il grafico e visualizza i dati
var myNewChart = new Chart(ctx);
//myNewChart.Bar(data);
myNewChart.Line(data,options);
</script>
</body>
</HTML>
[CODE]

**devil946** · 17-03-2017, 10:05

allora nessuno che mi dia una mano?

**devil946** · 17-03-2017, 10:06

ah dimenticavo, scusa per il disguido della discussione aperta più volte

**cavicchiandrea** · 17-03-2017, 11:25

Originariamente inviata da devil946

Ok rieccomi, di seguito il link per poter provare l'effetto.
Come vedete il risultato è a metà poichè non riesco a vedere la legenda.

Cosa intendi per leggenda il riquadro nero con il mese e i valori?

Discussione: Chart.js e option

Strumenti discussione

Ricerca discussione

Visualizza

Chart.js e option

Permessi di invio

<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 bgcolor="#7A8996">
	<canvas id="myChart" width="700" height="500"></canvas>
	<script>
	// Definisco i dati da mostrare nel grafico
	var data = {
	//labels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre"],
	labels: ["02/01/2017","04/01/2017","06/01/2017","09/01/2017","12/01/2017","14/01/2017","16/01/2017","18/01/2017","19/01/2017","23/01/2017","25/01/2017","27/01/2017",],
	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: [1, 1, 2, 2, 2, 2, 2, 2, 2]
	data: [3,5,2,3,3,5,3,5,3,3,5,4,]
	},
	{
	title: "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: [1, 1, 2, 2, 2, 2, 2, 2, 2]
	data: [2,0,3,2,2,0,2,0,2,2,0,1,] }
	]
	};
	var options = {
	'title':'VERIFICHE',
	'titleTextStyle':{color: 'white', fontName: 'Trebuchet MS', fontSize: 20},
	backgroundColor:'#7A8996',
	'chartArea':{left:20,top:150,width:'100%',height:'100%'},
	fontSize:16,
	fontname:'Trebuchet MS',
	legend:{position: 'right', textStyle:{color: 'white', fontName: 'Trebuchet MS', fontSize: 16}},
	};

	// Ottengo il contesto 2D del Canvas in cui mostrare il grafico
	var ctx = document.getElementById("myChart").getContext("2d");

	// Crea il grafico e visualizza i dati
	var myNewChart = new Chart(ctx);
	//myNewChart.Bar(data);
	myNewChart.Line(data,options);
	</script>
	<p>

	</body>
	</HTML>