Fix grafico chartjs

This commit is contained in:
Samuele E. Locatelli
2020-09-03 17:50:29 +02:00
parent 3191981b9d
commit 23f7e98dc7
8 changed files with 80 additions and 60 deletions
+1 -1
View File
@@ -6,7 +6,7 @@ using System.Threading.Tasks;
namespace GPW_data
{
public class chartJsTimeSerie
public class chartJsTSerie
{
public DateTime x { get; set; }
public decimal y { get; set; }
+2 -1
View File
@@ -23,7 +23,8 @@
background-repeat: no-repeat;
}
canvas {
background: #f0f0f0;
/*border: 1px solid #339933;
background: #fafffa;*/
width: 100%;
height: auto;
}
+22 -28
View File
@@ -1,6 +1,5 @@
.logo
{
.logo {
background-image: url(../images/logo_sw.png);
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
@@ -9,11 +8,11 @@
width: 800px;
height: 300px;
margin: 50px auto 50px auto;
vertical-align:middle;
vertical-align: middle;
background-repeat: no-repeat;
}
.logo:hover
{
.logo:hover {
background-image: url(../images/logo_sw.png);
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
@@ -22,19 +21,19 @@
width: 800px;
height: 300px;
margin: 50px auto 50px auto;
vertical-align:middle;
vertical-align: middle;
background-repeat: no-repeat;
}
canvas {
background: #f0f0f0;
/*border: 1px solid #339933;
background: #fafffa;*/
width: 100%;
height: auto;
}
.bodyMainCenter
{
.bodyMainCenter {
/* background-image: url(../images/logo_sw.png); -khtml-opacity: .50; -moz-opacity: .50; -ms-filter: "alpha(opacity=50)"; filter: alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity: .50; */
vertical-align: middle;
border-left: #0D0083 1px solid; /*border-top: #0D0083 1px solid;*/
@@ -45,28 +44,27 @@ canvas {
background-attachment: scroll;
background-repeat: no-repeat;
}
.bodyCenter
{
.bodyCenter {
vertical-align: middle;
text-align: center;
height: 100%;
width: 100%;
}
.centerMenu
{
.centerMenu {
background-color: White;
text-align: center;
border-width: thin;
border-style: groove;
border-color: Blue;
}
A:hover
{
A:hover {
color: red;
}
.bodyMain
{
.bodyMain {
/* background-image: url(../images/logo_sw.png); -khtml-opacity: .50; -moz-opacity: .50; -ms-filter: "alpha(opacity=50)"; filter: alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity: .50; */
vertical-align: top;
border-left: #0D0083 1px solid; /*border-top: #0D0083 1px solid;*/
@@ -76,16 +74,15 @@ A:hover
background-attachment: scroll;
background-repeat: no-repeat;
}
.bodyMainEmpty
{
.bodyMainEmpty {
vertical-align: top;
border-left: maroon 1px solid;
height: 100%;
width: 100%;
}
.bodyMainWhite
{
.bodyMainWhite {
vertical-align: top;
border-left: maroon 1px solid;
height: 100%;
@@ -95,21 +92,18 @@ A:hover
background-repeat: no-repeat;
}
.bodyMainWhite a:hover
{
.bodyMainWhite a:hover {
color: white;
}
.bodyMainNoLogo
{
.bodyMainNoLogo {
vertical-align: top;
border-left: maroon 1px solid;
height: 100%;
width: 100%;
}
.bodyMainLogoPiccolo
{
.bodyMainLogoPiccolo {
background-image: url(../images/sfondoMedio.png);
background-position: 97% 210px;
vertical-align: top;
@@ -120,6 +114,6 @@ A:hover
background-repeat: no-repeat;
}
.textError{
.textError {
color: red;
}
+1 -1
View File
@@ -1 +1 @@
.logo{background-image:url(../images/logo_sw.png);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=.5);opacity:.5;width:800px;height:300px;margin:50px auto 50px auto;vertical-align:middle;background-repeat:no-repeat;}.logo:hover{background-image:url(../images/logo_sw.png);-ms-filter:"alpha(opacity=100)";filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:1;width:800px;height:300px;margin:50px auto 50px auto;vertical-align:middle;background-repeat:no-repeat;}canvas{background:#f0f0f0;width:100%;height:auto;}.bodyMainCenter{vertical-align:middle;border-left:#0d0083 1px solid;text-align:center;height:100%;width:100%;background-position:center;background-attachment:scroll;background-repeat:no-repeat;}.bodyCenter{vertical-align:middle;text-align:center;height:100%;width:100%;}.centerMenu{background-color:#fff;text-align:center;border-width:thin;border-style:groove;border-color:#00f;}A:hover{color:#f00;}.bodyMain{vertical-align:top;border-left:#0d0083 1px solid;height:100%;width:100%;background-position:center;background-attachment:scroll;background-repeat:no-repeat;}.bodyMainEmpty{vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;}.bodyMainWhite{vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;background-position:center;background-attachment:scroll;background-repeat:no-repeat;}.bodyMainWhite a:hover{color:#fff;}.bodyMainNoLogo{vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;}.bodyMainLogoPiccolo{background-image:url(../images/sfondoMedio.png);background-position:97% 210px;vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;background-attachment:scroll;background-repeat:no-repeat;}.textError{color:#f00;}
.logo{background-image:url(../images/logo_sw.png);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=.5);opacity:.5;width:800px;height:300px;margin:50px auto 50px auto;vertical-align:middle;background-repeat:no-repeat;}.logo:hover{background-image:url(../images/logo_sw.png);-ms-filter:"alpha(opacity=100)";filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:1;width:800px;height:300px;margin:50px auto 50px auto;vertical-align:middle;background-repeat:no-repeat;}canvas{width:100%;height:auto;}.bodyMainCenter{vertical-align:middle;border-left:#0d0083 1px solid;text-align:center;height:100%;width:100%;background-position:center;background-attachment:scroll;background-repeat:no-repeat;}.bodyCenter{vertical-align:middle;text-align:center;height:100%;width:100%;}.centerMenu{background-color:#fff;text-align:center;border-width:thin;border-style:groove;border-color:#00f;}A:hover{color:#f00;}.bodyMain{vertical-align:top;border-left:#0d0083 1px solid;height:100%;width:100%;background-position:center;background-attachment:scroll;background-repeat:no-repeat;}.bodyMainEmpty{vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;}.bodyMainWhite{vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;background-position:center;background-attachment:scroll;background-repeat:no-repeat;}.bodyMainWhite a:hover{color:#fff;}.bodyMainNoLogo{vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;}.bodyMainLogoPiccolo{background-image:url(../images/sfondoMedio.png);background-position:97% 210px;vertical-align:top;border-left:#800000 1px solid;height:100%;width:100%;background-attachment:scroll;background-repeat:no-repeat;}.textError{color:#f00;}
+6 -6
View File
@@ -17,37 +17,37 @@ namespace GPW_Smart.Controllers
}
// GET api/TempRil/5
public List<chartJsTimeSerie> Get(int id)
public List<chartJsTSerie> Get(int id)
{
List<chartJsTimeSerie> answ = new List<chartJsTimeSerie>();
List<chartJsTSerie> answ = new List<chartJsTSerie>();
// recupero dati
var tabDati = DataProxy.DP.taRT.getByUserPeriod(id, DateTime.Today, 0);
foreach (var item in tabDati)
{
answ.Add(new chartJsTimeSerie() { x = item.dtRilievo, y = item.tempRil });
answ.Add(new chartJsTSerie() { x = item.dtRilievo, y = item.tempRil });
}
// restituisco oggetto!
return answ;
}
// GET api/TempRil/5?date=2020-09-01&numRec=10
public List<chartJsTimeSerie> Get(int id, string date, int numRec)
public List<chartJsTSerie> Get(int id, string date, int numRec)
{
DateTime dtRif = DateTime.Today;
DateTime.TryParse(date, out dtRif);
List<chartJsTimeSerie> answ = new List<chartJsTimeSerie>();
List<chartJsTSerie> answ = new List<chartJsTSerie>();
// recupero dati
var tabDati = DataProxy.DP.taRT.getByUserPeriod(id, dtRif, numRec);
foreach (var item in tabDati)
{
answ.Add(new chartJsTimeSerie() { x = item.dtRilievo, y = item.tempRil });
answ.Add(new chartJsTSerie() { x = item.dtRilievo, y = item.tempRil });
}
// restituisco oggetto!
+24 -22
View File
@@ -4,31 +4,38 @@
<asp:HiddenField runat="server" ID="hfIdxDip" />
<asp:HiddenField runat="server" ID="hfData" />
<div class="row">
<div class="col-6 text-right">Periodo</div>
<div class="col-6">
<asp:DropDownList runat="server" ID="ddlMaxNum" AutoPostBack="true">
<asp:ListItem Text="1 mese" Value="30"></asp:ListItem>
<asp:ListItem Text="2 mesi" Value="60"></asp:ListItem>
<asp:ListItem Text="3 mesi" Value="90"></asp:ListItem>
<asp:ListItem Text="6 mesi" Value="180"></asp:ListItem>
<asp:ListItem Text="1 anno" Value="366"></asp:ListItem>
<asp:ListItem Text="Tutto" Value="0"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<script>
// funzione eseguita se successo al caricamento
function OnSuccess_(reponse) {
// recupero dati restituiti
var dataTS = reponse.d;
var dataTS = reponse;
var myOptions = {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
distribution: 'linear',
}]
}
//responsive: true,
//maintainAspectRatio: true,
//scale: {
// ticks: {
// beginAtZero: true,
// max: 42,
// min: 33
// }
//},
,animation: {
, animation: {
duration: 200
},
//legend: {
@@ -36,23 +43,19 @@
//}
};
//console.log('Recieved our data', dataTS);
// recupero obj chart
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
//type: 'scatter',
data: {
datasets: [{
//backgroundColor: 'rgb(180,180,180)',
borderColor: 'rgb(60, 180, 120)',
lineTension: 0,
label: 'Temperatura Rilevata',
//data = dataTS
data: [
{ x: '2020-08-10T00:00:00', y: 36.5 },
{ x: '2020-08-15T00:00:00', y: 35.5 },
{ x: '2020-08-22T00:00:00', y: 36.1 },
{ x: '2020-08-23T00:00:00', y: 36.2 },
{ x: '2020-08-29T00:00:00', y: 36.0 }
]
data: dataTS
}]
},
options: myOptions
@@ -68,8 +71,7 @@
// caricamento pagina
$.ajax({
type: "GET",
url: "api/TempRil/<%=hfIdxDip.Value %>",
//data: "{ dataRif: '<%=hfData.Value%>', numRec: 0 }",
url: "api/TempRil/<%=hfIdxDip.Value %>?date=<%=hfData.Value%>&numRec=<%=ddlMaxNum.SelectedValue%>",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
+15 -1
View File
@@ -1,4 +1,5 @@
using GPW_data;
using SteamWare;
using System;
using System.Collections.Generic;
using System.Linq;
@@ -10,11 +11,24 @@ namespace GPW_Smart.WebUserControls
{
public partial class cmp_chart : BaseUserControl
{
protected DateTime dataRif
{
get
{
DateTime answ = DateTime.Today;
string dtRif = memLayer.ML.QSS("dataRif");
if (!string.IsNullOrEmpty(dtRif))
{
DateTime.TryParse(dtRif, out answ);
}
return answ;
}
}
protected void Page_Load(object sender, EventArgs e)
{
// imposto valori...
hfIdxDip.Value = $"{DataProxy.idxDipendente}";
hfData.Value = DateTime.Today.ToString("yyyy-MM-dd");
hfData.Value = dataRif.ToString("yyyy-MM-dd");
}
}
}
+9
View File
@@ -31,5 +31,14 @@ namespace GPW_Smart.WebUserControls
/// Per la modifica, spostare la dichiarazione di campo dal file di progettazione al file code-behind.
/// </remarks>
protected global::System.Web.UI.WebControls.HiddenField hfData;
/// <summary>
/// Controllo ddlMaxNum.
/// </summary>
/// <remarks>
/// Campo generato automaticamente.
/// Per la modifica, spostare la dichiarazione di campo dal file di progettazione al file code-behind.
/// </remarks>
protected global::System.Web.UI.WebControls.DropDownList ddlMaxNum;
}
}