Chart.js Panel Plugin for Grafana
Create bar graphs, funnel graphs, pie graphs, doughnut graphs and polar area graphs in Grafana using Chart.js.
Installation
clone this repository into your plugin directory
git clone https://github.com/CopperHill-Consulting/grafana-chartjs-panel.git
brew services restart grafana
Drilldown Links
You can add drilldown links to segments. In addition there are meta groups that can be used to pass time ranges and variables to the drilldown links.
Time Specific
If you want to copy the same time range values into the drilldown link you can use one of the following:
-
${time}
This will evaluate to the URL search parameters for
from
andto
. For example, if the user selects "Last 5 years" as the time range thenhttps://example.com/d/ASDFghjkl/test?${time}
will evaluate tohttps://example.com/d/ASDFghjkl/test?from=now-5y&to=now
. -
${time-from}
This will evaluate to the URL search parameter for
from
. For example, if the user selects "Last 6 months" as the time range thenhttps://example.com/d/ASDFghjkl/test?${time-from}
will evaluate tohttps://example.com/d/ASDFghjkl/test?$from=now-5M
. -
${time-to}
This will evaluate to the URL search parameter for
from
. For example, if the user selects "This day last week" as the time range thenhttps://example.com/d/ASDFghjkl/test?${time-to}
will evaluate tohttps://example.com/d/ASDFghjkl/test?$to=now-7d%2Fd
.
Variables
If you want to use the value of variables in drilldown links you can use any of the following meta groups:
-
${var:name_of_variable}
Using this format gives you the ability to simply take the value(s) of the specified variable and put it into the drilldown link. For example if you have a variable called
age
and the value is25
you can usehttps://example.com/d/ASDFghjkl/test?var-age=${var:age}
andhttps://example.com/d/ASDFghjkl/test?var-age=25
will be the result. Another example would be that theage
variable has the values25
and34
. If you use the same drilldown URL as before the result will behttps://example.com/d/ASDFghjkl/test?var-age=25%2C34
because both values will simply be concatenated by a comma. -
${var:name_of_variable:param}
Using this format gives you the ability to simply take the value(s) of the specified variable and put it into the drilldown link with the name of the variable included. For example if you have a variable called
age
and the value is25
you can usehttps://example.com/d/ASDFghjkl/test?${var:age:param}
andhttps://example.com/d/ASDFghjkl/test?var-age=25
will be the result. Another example would be that theage
variable has the values25
and34
. If you use the same drilldown URL as before the result will behttps://example.com/d/ASDFghjkl/test?var-age=25&var-age=34
because it passes each value in separately.NOTE: If you prefix this meta group with "
var-
" these 4 characters will be ignored. For examplehttps://example.com/d/ASDFghjkl/test?var-${var:age:param}
will still evaluate tohttps://example.com/d/ASDFghjkl/test?var-age=25
in the case thatage
is25
. On the other hand, if you usedhttps://example.com/d/ASDFghjkl/test?svar-${var:age:param}
it would be evaluated tohttps://example.com/d/ASDFghjkl/test?svar-var-age=25
. -
${var:name_of_variable:param:name-of-url-param}
Using this format gives you the ability to simply take the value(s) of the specified variable and put it into the drilldown link with the name of the variable included as you specify. For example if you have a variable called
age
and the value is25
you can usehttps://example.com/d/ASDFghjkl/test?${var:age:param:edad}
andhttps://example.com/d/ASDFghjkl/test?edad=25
will be the result. Another example would be that theage
variable has the values25
and34
. If you use the same drilldown URL as before the result will behttps://example.com/d/ASDFghjkl/test?edad=25&edad=34
because it passes each value in separately.
Custom Tooltips
If the custom tooltips section is available, you can use any of the following meta groups:
-
${series}
This will be replaced with the name of the series of the segment that is being hovered.
-
${category}
This will be replaced with the name of the category of the segment that is being hovered.
-
${measure}
This will be replaced with the value of the measure that is being hovered.
-
${col:a_column_name}
This will be replaced with the value(s) of the column named "
a_column_name
". If there are multiple values they will be concatenated by a comma. -
${col:anotherColumnName:functionName}
This will be replaced with the value(s) of the column named "
anotherColumnName
" and will be processed according to the specified "functionName
". The function (specified by "functionName
") will be used on the values that represent the hovered segment only. Any of the following can be used as "functionName
":-
sum
(eg.${col:score:sum}
): This will add all of the values for the specified column and use that sum as the value of the meta group. If the specified column is a string the values will simply be concatenated without any spacing or any other characters. -
avg
(eg.${col:score:avg}
): This will add all of the values for the specified column, divide the result by the number of values and use that resulting average as the value of the meta group. -
min
(eg.${col:grade:min}
): This will find the minimum value of the values for the specified column and use that as the value of the meta group. -
max
(eg.${col:grade:max}
): This will find the maximum value of the values for the specified column and use that as the value of the meta group. -
first
(eg.${col:zip_code:first}
): This will use the first value of the specified column as the value of the meta group. -
last
(eg.${col:zip_code:last}
): This will use the last value of the specified column as the value of the meta group. -
count
(eg.${col:section:count}
): This will use the number of values for this segment as the value of the meta group. -
unique-count
(eg.${col:section:unique-count}
): This will use the number of unique values in the specified column as the value of the meta group. -
list
(eg.${col:positionOrStage:list}
): This will concatenate all of the (sorted) values of the specified column with a comma and a space with the exception of the last value being concatenated to the values with the word "and" surrounded by spaces. The concatenated list will serve as the value of the meta group. -
unique-list
(eg.${col:positionOrStage:unique-list}
): This will concatenate all of the unique (sorted) values of the specified column with a comma and a space with the exception of the last value being concatenated to the values with the word "and" surrounded by spaces. The concatenated list will serve as the value of the meta group. -
titlecase
(eg.${col:fullName:titlecase}
): This will display the first value of the specified column with the first character of every word uppercased. -
uppercase
(eg.${col:fullName:uppercase}
): This will display the first value of the specified column with all lowercased characters converted to uppercased characters. -
lowercase
(eg.${col:fullName:lowercase}
): This will display the first value of the specified column with all uppercased characters converted to lowercased characters.
-
License
MIT
Building this plugin
This plugin leverages the grafana-toolkit to simplify building and packaging a plugin.
Change to a compatible version of NodeJS:
nvm use 12
Install module dependencies:
yarn
Build plugin in production mode:
yarn build
Build plugin in development mode:
yarn dev
Build plugin in development mode, watching for changes:
yarn watch