Grafische rapportage geavanceerde instellingen

Je kunt elementen van de look and feel van een rapportgrafiek aanpassen met behulp van het veld Geavanceerde instellingen, bijv.:

• Wijzig de grafiek- en astitels
• Wijzig de lettergrootte, kleur en stijl
• Wijzig de positie en stijl van de legenda

Met ingang van Totara 13 wordt het geavanceerde instellingenveld voor Totara grafische rapporten geschreven in JSON-formaat om aangepaste instellingen te specificeren die in alle grafiekbibliotheken werken. Deze instellingen zijn niet specifiek voor een grafiekbibliotheek en zullen werken bij het gebruik van zowel ChartJS- als SVGGraph-grafieken.

Titelinstellingen

Voorbeeld

{
        "title": "Example Graph Title"
}

OR

{
        "title": {
               "text": "Example Graph Title",
                "position": "top",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "#fff",
                "padding": 5
        }
}

Legenda-instellingen

Voorbeeld

{
        "legend": {
                "display": true,
                "position": "left",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "fff",
                "padding": 5
        }
}

Tooltip instellingen

Voorbeeld

{
        "tooltips": {
                "display": true,
                "backgroundColor": "#ddd",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "#fff",
                "borderRadius": 5,
                "borderColor": "#0a7b92",
                "borderWidth": 3
        }
}

Asinstellingen

Asinstellingen moeten worden toegepast op de x- of y-as. De beschikbare instellingen voor elke as zijn gelijk.

Voorbeeld

{
        "axis": {
               "x": {
                       "display": true,
                       "max": "April",
                       "title": {
                               "text": "Horizontal Axis Label",
                               "font": "Times New Roman",
                               "fontSize": 22,
                               "fontStyle": "bold",
                               "color": "#fff000",
                               "padding": 10
                       },

                       "grid": {
                               "display": true,
                               "color": "#fff000"
                       }
               },

               "y": {
                       "display": true,
                       "title": {
                               "text": "Vertical Axis Label",
                               "font": "Times New Roman",
                               "fontSize": 22,
                               "fontStyle": "bold",
                               "color": "#f0f0ff",
                               "padding": 10
                       },

                       "grid": {
                               "display": true,
                               "color": "#3a4f3a"
                       }
               }
        }
}

Grafiek kleurinstellingen

Je kunt grafiekkleuren opgeven met zowel ChartJS als SVGGraph.

Voorbeelden

De standaardkleuren die voor de inhoud van de grafiek worden gebruikt, worden hier getoond:

{"colors" : [
"#3869B1",
"#DA7E31",
"#3F9852",
"#CC2428",
"#958C3D",
"#6B4C9A",
"#8C8C8C"
]}

Je kunt op de volgende manier zoveel kleuren schetsen als je nodig hebt:

{"colors": ["#ff0000", "#00ff00", "#0000ff"]}

Vanaf Totara 17.28 is het mogelijk om kleuren te specificeren die moeten worden geassocieerd met specifieke datasets met zowel ChartJS als SVGGraph.

{
  "categoryColors": {
    "item1": "#ff0000",
    "item2": "#00ff00"
  }
}

Je kunt op deze manier zoveel categorieën als je nodig hebt omschrijven. Als een dataset niet overeenkomt met een benoemde categorie, dan zullen de bovenstaande gewone kleuren gebruikt worden.

Als je grafiek meerdere talen ondersteunt, moet je voor elke vertaling een kleur definiëren.

Instellingen voortgangsdonut

Voorbeeld 1

{
"colors" : ["red", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
  "progress": {
    "totalsSupplied": true,
    "percentageValues": true
  }
}
}

Voorbeeld 2

{
"colors" : ["red", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
    "progress": {
    "totalsSupplied": true,
    "percentageValues": false
  }
}
}

Voorbeeld 3

{"colors" : ["green"],
"type" : {
    "progress": {
    "totalsSupplied": true,
    "backgroundColor": "red"
  }
}
}

Dataset instellingen

Voorbeeld

{
    "data-settings": {
         "0": {
             "fill": true,
             "borderDash":[15,5],
             "backgroundColor": "#CCFFCC"
          }
     }
}

Bibliotheekspecifieke instellingen

Als je meer geavanceerde instellingen wil schrijven om te profiteren van de uitgebreide mogelijkheden van je kaartbibliotheek, kun je het "aangepaste" instellingenveld gebruiken om instellingen rechtstreeks naar de bibliotheek door te geven. Deze zullen niet kruiscompatibel zijn.

Officiële documentatie voor SVGGraph

Officiële documentatie voor ChartJS

SVGGraph voorbeeld

{
        "custom": {
              "legend_columns": 3,
              "legend_title_font_weight": "italic",
              "legend_draggable": false
        }
}

Voorbeeld van ChartJS

{
        "custom": {
               "axis": {
                       "scales": {
                               "yAxes": [{
                                       "gridLines": {
                                              "display": false
                                      }
                               }]
                       }
               }
        }
}

Volledig voorbeeld

{
        "title": {
                "text": "Graph Title",
                "position": "top",
                "font": "Times New Roman",
                "fontSize": 22,
                "fontStyle": "bold",
                "color": "#ea22a9",
                "padding": 10
        },

        "legend": {
                "display": "true",
                "position": "top",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "italic",
                "color": "#ee22a9",
                "padding": 5
        },

        "tooltips": {
                "display": true,
                "backgroundColor": "#eaeaea",
                "font": "Times New Roman",
                "fontSize": 16,
                "fontStyle": "bold",
                "color": "#1f1f1f",
                "borderRadius": 5,
                "borderColor": "#ee22a9",
                "borderWidth": 1
        },

        "axis": {
               "x": {
                       "display": false,
                       "title": {
                               "text": "Horizontal Axis",
                               "font": "Times New Roman",
                               "fontSize": 16,
                               "fontStyle": "italic",
                               "color": "#ea22a9",
                               "padding": 10
                               "max": "April",
                       },

                       "grid": {
                               "display": true,
                               "color": "#eaeaea"
                       }
               },

               "y": {
                       "display": false,
                       "title": {
                               "text": "Vertical Axis",
                               "font": "Times New Roman",
                               "fontSize": 16,
                               "fontStyle": "italic",
                               "color": "#ea22a9",
                               "padding": 10
                       },

                       "grid": {
                               "display": true,
                               "color": "#eaeaea"
                       }
               }
        }
}