Versions Compared

Version Old Version 10 New Version 11
Changes made by

Liam Tanner

Liam Tanner

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from space TDDM and version 1

...

Setting

Description

Notes
display

Whether to show the line for this axis.

Example: true

-
title

Axis label for the graph.

These use the same settings as the Graph Title.

-
grid

Settings to control the axis grid.

-
grid → display

Whether to show the lines for the axis grid.

Example: true

-
grid → color

Colour of the axis grid lines.

Example: "#0ff000"

-
max

This is the maximum value of either axis.

This value will depend on the values used on your axis, so it could be numerical or alphanumerical, e.g. if the x axis contained a list of months   you could set the max to 'April' so that it would not show content past this value,   if you wanted to restrict it to the current financial year for example. 

If you are using a text value as your maximum this must be a value with data associated to it. 

For example, if one of your axes is labelled with days of the week and your data includes the values Monday, Tuesday, Thursday, Friday and Saturday, then you would not be able to use the setting "max":"Wednesday". This is because there is no Wednesday data in the graph. 

A numerical value doesn't have this same issue.

Example

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

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

Graph colour settings

As of Totara 13.2 it is possible to specify graph colours using both ChartJS and SVGGraph.

Setting

Description

colors

Colours used for the main content of a graph (e.g. different bars on a bar chart). See examples below.

Examples

The default colours used for graph contents are shown here:

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

You can outline as many colours as you require in the following way:

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

Progress donut settings

Setting

Description

totalsSupplied

Enable if the second column contains totals.

percentageValues

Enable if the first column contains percentages instead of count.

colorRanges

This setting allows for assigning colours to value ranges. Define an array of percentage values as boundaries for the next colour in the colour set.

backgroundColour

Set the colour of the 'empty' part of the pie chart (i.e. total minus progress value).


Example 1

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

Progress donuts based on the code example above.Image Added

Example 2

Code Block
{
"colorcolors" : ["#3a4f3ared", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
  "progress": {
}    "totalsSupplied": true,
   }  "percentageValues": false
 }
}

Graph colour settings

As of Totara 13.2 it is possible to specify graph colours using both ChartJS and SVGGraph.

...

Setting

...

Description

...

Colours used for the main content of a graph (e.g. different bars on a bar chart). See examples below.

Examples

...

 }
}
}

Progress donuts based on the code example above.Image Added

Example 3

Code Block
{"colors" : [
"#3869B1green"],
"#DA7E31",type" : {
  "#3F9852",progress": {
    "#CC2428totalsSupplied": true,
    "#958C3DbackgroundColor",: "#6B4C9A",
"#8C8C8C"
]}

You can outline as many colours as you require in the following way:

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

Progress donut settings

...

Setting

...

Description

...

Enable if the second column contains totals.

...

Enable if the first column contains percentages instead of count.

...

This setting allows for assigning colours to value ranges. Define an array of percentage values as boundaries for the next colour in the colour set.

...

Set the colour of the 'empty' part of the pie chart (i.e. total minus progress value).

Example 1

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

Progress donuts based on the code example above.Image Removed

Example 2

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

Progress donuts based on the code example above.Image Removed

Example 3

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

Progress donuts based on the code example above.Image Added

Dataset settings

Setting

Description

fill

Determines whether or not the element is filled, such as the area under the line on an area chart.

Example: true

borderDash

The dash style for the stroke of an element. The two numbers provided control the length of each dash and the length of each gap.

Example: [15, 5]

borderColor

The stroke colour of the data element (e.g. point, line, bar).

Example: #CCFFCC

borderWidth

The stroke width for the element.

Example: 3

backgroundColor

The fill colour of the data element (e.g. point, line, bar).

Example: #CCFFCC

pointStyle

The appearance of each point on a graph.

Example: circle

Tip

The settings listed above are just a selection of useful settings 

You can find the full list of settings in the ChartJS documentation.

Note

Note that these settings are only available in the ChartJS library, not SVG Graph.

Example

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

Progress donuts based on the code example above.Image RemovedA line graph based on the code example above.Image Added

Library-specific settings

...

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

ChartJS Example

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

...

Code Block
{
	"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"
			}
		}
	}
}