Differenze tra le versioni di "Creare un grafico con il componente gb.chart"
(2 versioni intermedie di uno stesso utente non sono mostrate) | |||
Riga 93: | Riga 93: | ||
Me.Height = Screen.Height - 200 | Me.Height = Screen.Height - 200 | ||
Chart.CountDataSets = 10 | Chart.CountDataSets = 10 | ||
− | Chart.XAxe.Font = Font["Sans Serif, | + | Chart.XAxe.Font = Font["Sans Serif,10"] |
− | Chart.YAxe.Font = Font["Sans Serif, | + | Chart.YAxe.Font = Font["Sans Serif,6"] |
Chart.YAxe.MinValue = 22000.00 | Chart.YAxe.MinValue = 22000.00 | ||
Chart.YAxe.MaxValue = 68000.00 | Chart.YAxe.MaxValue = 68000.00 | ||
Riga 134: | Riga 134: | ||
Chart[9].Values = aTurn2018 | Chart[9].Values = aTurn2018 | ||
Chart[9].Text = "2018" | Chart[9].Text = "2018" | ||
− | Chart.Title.Font = Font["Sans Serif, | + | Chart.Title.Font = Font["Sans Serif,24,Bold"] |
Chart.Title.Text = ("Turnover 2009 - 2018") | Chart.Title.Text = ("Turnover 2009 - 2018") | ||
Chart.Legend.Visible = True | Chart.Legend.Visible = True | ||
− | Chart.Legend.Font = Font["Sans Serif, | + | Chart.Legend.Font = Font["Sans Serif,12"] |
Chart.Legend.Position = Align.Bottom | Chart.Legend.Position = Align.Bottom | ||
Chart.YAxe.ShowIntervalLines = True | Chart.YAxe.ShowIntervalLines = True | ||
Riga 335: | Riga 335: | ||
[http://gambaswiki.org/wiki/howto/makechart?l=it vedi anche]<br> | [http://gambaswiki.org/wiki/howto/makechart?l=it vedi anche]<br> | ||
[https://www.gambas-it.org/wiki/index.php?title=Creare_report_con_il_componente_gb.report2 gb.report2] | [https://www.gambas-it.org/wiki/index.php?title=Creare_report_con_il_componente_gb.report2 gb.report2] | ||
+ | |||
+ | |||
+ | |||
+ | =Riferimenti= | ||
+ | * http://gambaswiki.org/wiki/comp/gb.chart/chart | ||
+ | * https://gambaswiki.org/wiki/howto/makechart |
Versione delle 10:41, 14 nov 2023
Indice
Introduzione
gb.chart di Fabien Bodard è un componente instabile un tantinello buggato, praticamente abbandonato perché l’autore si è ripromesso di rifarlo da capo. Nell’attesa del nuovo vediamo come possiamo usare al meglio quello che abbiamo e che comunque soddisfa molto il sottoscritto. Di seguito creeremo un grafico sia a colonne che a linee (di confronto mese per mese) sul fatturato degli ultimi dieci anni di un’ipotetica azienda, alla fine invieremo il o i grafici a gb.report per la stampa. Vi invito a visionare il test di esempio (FTest) scritto da Bodard stesso presente all’interno del componente che ne affronta tutti gli aspetti e non solo una parte come invece fa questo progetto.
Nota: nella Software farm è presente il progetto qui descritto.
Progetto ChartReport
Avviamo Gambas e creiamo un progetto grafico nominandolo ChartReport (questo è il nome nella farm) o in qualunque altro modo vi aggrada. In Progetto > Proprietà > Componenti mettiamo la spunta a gb.chart e a gb.report2.
Il funzionamento dell'applicazione
Per meglio comprendere il codice vediamo una breve spiegazione sul funzionamento. All’apertura si crea il grafico a colonna se i colori vanno bene lo salviamo oppure prima di farlo cambiamo i colori di default con quelli personalizzati, possiamo volendo creare anche il grafico a linee e salvarlo. Alla fine agiamo sul pulsante anteprima di stampa che manda il o i grafici al report.
Il disegno della finestra FMain
Nella scheda Fmain.form della IDE, in Proprietà impostiamo: Arrangement = Vertical.
Dalla scheda Container posta al disotto delle proprietà clicchiamo su Panel per poi disegnarlo sulla finestra, lasciando un pò di spazio in basso per potervi disegnare una HBox con dei pulsanti, e lo impostiamo:
- Arrangement = Horizontal
- Expand = True
Come detto, prelevandolo dalla scheda Container, disegniamo sotto il Panel un HBox con altezza 32.
Sempre dalla scheda Container disegnamo all’interno di Hbox partendo da sinistra uno Spring, in alternativa potete disegnare un Panel con proprietà: Expand = True.
Prelevandoli dalla scheda Form, continuiamo disegnando quattro pulsanti con rispettivamente le seguenti proprietà:
Primo pulsante da sinistra:
- Name = btnPrint
- Autoresize = True
- Picture = icon:/small/preview
- Text = Print
- ToolTip = Print preview
Secondo pulsante:
- Name = btnSavePicture
- Autoresize = True
- Text = Save chart
- ToolTip = Save current chart
Terzo pulsante:
- Name = btnColors
- Autoresize = True
- ToolTip = ChangeColors
Quarto pulsante
- Name = btnType
- Autoresize = True
- ToolTip = Change view
Per finire disegnamo in senso orizzontale un separatore fra il Panel e Hbox lasciando l’altezza predefinita (8).
Il codice della finestra Fmain
Nella scheda Fmain.class della IDE scriviamo questo codice:
Property Read sHead As String Property Read sPicPaths As String[] Private $sPicPaths As New String[] Private $sHead As String Public Sub Form_Open() Dim aMonths As String[] = [("January"), ("February"), ("March"), ("April"), ("May"), ("June"), ("July"), ("August"), ("September"), ("October"), ("November"), ("December")] Dim aTurn2009 As Float[] = ReturnTurnover(54000.00, 55999.00) Dim aTurn2010 As Float[] = ReturnTurnover(55620.00, 57120.00) Dim aTurn2011 As Float[] = ReturnTurnover(56732.00, 58800.00) Dim aTurn2012 As Float[] = ReturnTurnover(58434.00, 60000.00) Dim aTurn2013 As Float[] = ReturnTurnover(59603.00, 61200.00) Dim aTurn2014 As Float[] = ReturnTurnover(60795.00, 62500.00) Dim aTurn2015 As Float[] = ReturnTurnover(62618.00, 63600.00) Dim aTurn2016 As Float[] = ReturnTurnover(63871.00, 64989.00) Dim aTurn2017 As Float[] = ReturnTurnover(65150.00, 66300.00) Dim aTurn2018 As Float[] = ReturnTurnover(66450.00, 67700.00) $sHead = ("Report 2019") DeletePic Me.Width = Screen.Width - 200 Me.Height = Screen.Height - 200 Chart.CountDataSets = 10 Chart.XAxe.Font = Font["Sans Serif,10"] Chart.YAxe.Font = Font["Sans Serif,6"] Chart.YAxe.MinValue = 22000.00 Chart.YAxe.MaxValue = 68000.00 Chart.YAxe.Step = 2000 With Chart.Colors.Values .Add(Color.Red) .Add(Color.Blue) .Add(Color.Green) .Add(Color.Cyan) .Add(Color.Orange) .Add(Color.Gray) .Add(Color.DarkBlue) .Add(Color.Yellow) .Add(Color.Violet) .Add(Color.Pink) .Add(Color.LightGray) .Add(Color.DarkGreen) End With btnColors_Click Chart.Headers.Values = aMonths Chart[0].Values = aTurn2009 Chart[0].Text = "2009" Chart[1].Values = aTurn2010 Chart[1].Text = "2010" Chart[2].Values = aTurn2011 Chart[2].Text = "2011" Chart[3].Values = aTurn2012 Chart[3].Text = "2012" Chart[4].Values = aTurn2013 Chart[4].Text = "2013" Chart[5].Values = aTurn2014 Chart[5].Text = "2014" Chart[6].Values = aTurn2015 Chart[6].Text = "2015" Chart[7].Values = aTurn2016 Chart[7].Text = "2016" Chart[8].Values = aTurn2017 Chart[8].Text = "2017" Chart[9].Values = aTurn2018 Chart[9].Text = "2018" Chart.Title.Font = Font["Sans Serif,24,Bold"] Chart.Title.Text = ("Turnover 2009 - 2018") Chart.Legend.Visible = True Chart.Legend.Font = Font["Sans Serif,12"] Chart.Legend.Position = Align.Bottom Chart.YAxe.ShowIntervalLines = True Chart.BackGround = Color.RGB(176, 220, 241) btnType_Click End Public Sub DrawingArea1_Draw() Chart.Width = DrawingArea1.ClientWidth Chart.Height = DrawingArea1.ClientHeight Chart.Draw() End Private Function ReturnTurnover(fMin As Float, fMax As Float) As Float[] Dim aTurnover As New Float[] Dim fRes As Float Randomize For i As Integer = 1 To 12 fRes = Rnd(fMin, fMax) If i = 2 Then fRes = fRes - ((fRes / 100) * 6) Else If i = 8 Then fRes = fRes - ((fRes / 100) * 50) Endif aTurnover.Add(Round(fRes, -2)) Next Return aTurnover End Public Sub btnType_Click() If btnType.Text = ("Lines") Then Chart.Legend.Title = ("The color of the years") Chart.Type = ChartType.Lines btnType.Text = ("Columns") Else Chart.Legend.Title = ("The color of the months") Chart.Type = ChartType.Columns btnType.Text = ("Lines") Endif DrawingArea1.Refresh() End Public Sub btnColors_Click() If btnColors.Text = ("Custom colors") Then Chart.Colors.Style = Chart.Colors.Custom btnColors.Text = ("Default colors") Else Chart.Colors.Style = Chart.Colors.Auto btnColors.Text = ("Custom colors") Endif DrawingArea1.Refresh() End Private Function sPicPaths_Read() As String[] Return $sPicPaths End Public Sub btnSavePicture_Click() ' Vuott tip Dim pic As Picture pic = Desktop.Screenshot(DrawingArea1.ScreenX, DrawingArea1.ScreenY, DrawingArea1.Width, DrawingArea1.Height) $sPicPaths.Push("/tmp/chart-pic" & CStr($sPicPaths.Count + 1) & ".png") pic.Save($sPicPaths[$sPicPaths.Max], 50) End Public Sub btnPrint_Click() If $sPicPaths.Count > 0 Then Report1.Preview DeletePic Me.Close Endif End Private Sub DeletePic() Dim s As String For Each s In Dir("/tmp", "chart-pic*.png", gb.File) Try Kill "/tmp" &/ s Next End Private Function sHead_Read() As String Return $sHead End
Diamo uno sguardo a quanto abbiamo appena scritto:
Per prima cosa abbiamo creato due proprietà di sola lettura per poter passare al report il titolo della relazione e le path delle immagini del o dei grafici.
Qui viene tutto simulato attraverso il codice ma nella realtà i dati saranno il frutto di interrogazioni a un database o qualcosa di simile.
Pertanto, all’apertura, attraverso la funzione ReturTurnover creiamo i fatturati mese per mese e li assegnamo ai rispettivi vettori (array).
Anche se non dovrebbe servire in quanto lo facciamo già in btnPrint_Click(), attraverso la routine DeletePic eliminiamo eventuali immagini di grafici presenti nella cartella tmp.
Impostiamo il grafico per 10 set di dati (i dieci anni confrontati).
Impostiamo i font e i valori minimo e massimo (di anni e fatturato) per gli assi del grafico orizzontale (ascisse) e verticale (ordinate).
Impostiamo l’intervallo dei valori in base al quale verrà suddiviso il fatturato e lo sfondo.
Per avere i colori personalizzati uno differente dall’altro, occorre impostarli sui dati più alti mostrati dai grafici in questo caso i 12 mesi.
Agendo sul pulsante btnColors impostiamo i colori di default e la scritta del pulsante stesso.
Passiamo il vettore dei mesi come valori per l’asse delle ascisse.
E passiamo i vettori degli anni come valori per l’asse delle ordinate.
Impostiamo il font del titolo e passiamo il valore.
Mostriamo la leggenda alla base del grafico impostandone il font.
Mostriamo le linee degli intervalli di valore.
Diamo un colore allo sfondo.
E alla fine dell’evento Open solleviamo l’evento btnType_Click per mostrare il grafico a colonne.
Infatti btnType_click alterna la creazione dei grafici a colonna e a linee a seconda di quanto scritto nella proprietà Text, alla fine attiva l’evento DrawingArea_Draw con DrawingArea1.Refresh.
Ogni volta che agiamo sul pulsante btnSavePicture per salvare le immagini nella cartella tmp, usiamo uno dei codici suggeriti da vuott in questa pagina:
https://www.gambas-it.org/wiki/index.php?title=Generare_un_file_immagine_da_una_DrawingArea
btnPrint_Click apre l’anteprima del Report, come detto cancella le immagini inviate al report e alla chiusura della finestra report chiude l’applicazione.
Le scritte in inglese sono avvolte da parentesi per poterle tradurre e creare un progetto internazionale. Per renderlo tale, al momento della creazione del progetto basta spuntare la casella Il progetto è traducibile, se non lo abbiamo fatto basta andare al menu Progetto > Proprietà > Opzioni e swithcciare su Il progetto è traducibile, nella IDE appare il nuovo pulsante Traduci e se ci clicchiamo sopra possiamo tradurre le scritte fra parentesi nell’apposita finestra.
Il disegno della finestra Report
Nel browser sulla sinistra della IDE clicchiamo col tasto destro del mouse sulla cartella Sorgenti > Nuovo > Report… e scegliamo OK nella finestra che appare e propone Report1. Doppio click su Report1 per farne apparire la finestra.
Dalla ToolBox scheda Report scegliamo una ReportLabel e disegnamola sulla finestra. Diamogli le proprietà:
- Alignement = Center
- Fixed = True (serve a ripetere il contenuto della label su tutte le pagine)
- Height = 10mm
Dalla scheda Container scegliamo un ReportVBox e disegnamolo appena sotto la label dando True alla proprietà Expand.
Appena sotto disegnamo un’altra label con le stesse proprietà della prima ma con in più:
- Text = ="Page " & page & " on " & pages (la scritta deve comprendere = il quale indica al report che trattasi di funzione).
Il codice del Report
Agiamo sulla freccia oppure sul tasto funzione F12 per passare a Report1.class e scriviamo:
Public Sub Report_Open() Dim s As String Dim hRepIm As ReportImage ReportLabel1.Text = FMain.sHead If FMain.sPicPaths.Count > 1 Then Report1.Orientation = Printer.Portrait For i As Integer = 0 To FMain.sPicPaths.Max s = FMain.sPicPaths[i] hRepIm = New ReportImage(ReportVBox1) hRepIm.Alignment = Align.Center hRepIm.Height = "11cm" hRepIm.Stretch = Report.Proportional hRepIm.Image = Image.Load(s) Next Else Report1.Orientation = Printer.Landscape s = FMain.sPicPaths[0] hRepIm = New ReportImage(ReportVBox1) hRepIm.Alignment = Align.Center hRepIm.Expand = True hRepIm.Stretch = Report.Proportional hRepIm.Image = Image.Load(s) Endif End
Anche qui diamo uno sguardo a quanto abbiamo appena scritto.
Nell’evento di apertura del report passiamo alla prima label il testo per l’intestazione del report. Se abbiamo disegnato più di un grafico allora la pagina del report si posiziona in verticale altrimenti in orizzontale. Per ogni percorso di immagine di grafico disegnamo nel ReportVBox una ReportImage con le seguenti proprietà:
- Alignement = Align.Center
- Expand = True
- Stretch = Report.Proportional
- Image = Image.Load(<percorso/immagine>)
Fatto, ora possiamo avviare il progetto per constatarne il corretto funzionamento.