Skip to content
Lewe.com
Menu
  • Products
    •  IzzitUp
    •  TeamCal Neo
    •  TeamCal Pro
    •  Sysinternals Toolbox
    •  Skins
    •  Plugins and Macros
    •  Windows Sounds
    •  webMeasure
    •  Notify Plus
  • Services
    •  Web Design
    •  Gizmo’s Freeware
  • Downloads
  • Help
    •  Support Forum
    •  Contact
    •  Credits
    •  Imprint
    • Data Privacy Policy

ChartJS Bar Chart Confluence User Macro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
## Macro title: ChartJS: Bar Chart
## Macro body processing: No macro body
##
## Developed by: George Lewe
## Date created: 2015-03-03
##
## Version:      1.1
## Date:         2015-07-28
## Version info: Added scale override settings
##
 
## @param ChartID:title=Chart ID|type=string|required=true|desc=Enter a unique (!) identifier for this chart on your page. Use no blanks.|default=MyBarChart
## @param ChartTitle:title=Chart Title|type=string|required=false|desc=Enter the title of your chart.|default=My Bar Chart
## @param ShowTitle:title=Show Title|type=boolean|desc=Select whether the chart title shall be displayed.|default=true
## @param DataLabels:title=Data Labels|type=string|required=true|desc=Enter a comma separated list of your data labels. Make sure you enter as much labels as you enter values below.|default=Apples,Oranges,Bananas,Mangos,Grapes
## @param DataValues:title=Data Values|type=string|required=true|desc=Enter a comma separated list of your data values. Make sure you enter as much values as you enter labels above.|default=18,29,40,34,24
## @param ChartWidth:title=Chart Width|type=string|required=true|desc=Enter the width of your chart in pixels or percent here. The height will be automatically adjusted.|default=500px
## @param ChartColor:title=Chart Color|type=string|required=false|desc=Enter the chart color here in the form of three decimal values for R, G and B separated by a comma.|default=255,179,0
## @param BorderWidth:title=Border Width|type=string|required=false|desc=Enter the width of the chart border followed by 'px'. Enter 0px for no border.|default=1px
## @param BorderColor:title=Border Color|type=string|required=false|desc=Enter the border color as a hex value starting with a hash.|default=#d7d7d7
 
## @param ScaleBeginAtZero:title=Begin At Zero|type=boolean|required=false|desc=Select whether the scale should start at zero, or an order of magnitude down from the lowest value. This setting has no effect if Scale Override is on.|default=true
## @param ScaleOverride:title=Scale Override|type=boolean|required=false|desc=Check this option if you  want to specify a custom scale in three boxes below. Example: If you want your scale to go from 99.5 to 100.0 in five steps, enter 99.5 as Start Value, 5 as Scale Steps and 0.1 as Step Width.|default=false
## @param ScaleStartValue:title=Scale Start Value|type=string|required=false|desc=Scale Override: Enter a custom start value of the scale.|default=0
## @param ScaleSteps:title=Scale Steps|type=string|required=false|desc=Scale Override: Enter the number of steps in the scale.|default=null
## @param ScaleStepWidth:title=Scale Step Width|type=string|required=false|desc=Scale Override: Enter the step width of the scale.|default=null
## @param ScaleShowGridLines:title=Show Grid Lines|type=boolean|required=false|desc=Select whether grid lines are shown across the chart.|default=true
## @param ScaleGridLineColor:title=Grid Line Color|type=string|required=false|desc=Enter the grid line color here in the form of three decimal values for R, G and B separated by a comma. The color is applied with a .05 opacity.|default=0,0,0
## @param ScaleGridLineWidth:title=Grid Line Width|type=string|required=false|desc=Enter the grid line width in pixels.|default=1
## @param ScaleShowHorizontalLines:title=Show Horizontal Lines|type=boolean|required=false|desc=Select whether to show horizontal lines (except X axis).|default=true
## @param ScaleShowVerticalLines:title=Show Vertical Lines|type=boolean|required=false|desc=Select whether to show vertical lines (except Y axis).|default=true
## @param BarShowStroke:title=Show Bar Stroke|type=boolean|required=false|desc=Select whether there is a stroke on each bar.|default=true
## @param BarStrokeWidth:title=Bar Stroke Width|type=string|required=false|desc=Enter the bar stroke width in pixels.|default=2
## @param BarValueSpacing:title=Bar Spacing|type=string|required=false|desc=Enter space between the bars in pixels.|default=5
 
#if (!$paramChartTitle)
   #set ($paramTitle="My Bar Chart")
#end
 
<div style="width: $paramChartWidth;">
   #if ($paramShowTitle == true)
   <div style="text-align: center; font-weight: bold;">$paramChartTitle</div>
   #end
   <canvas id="$paramChartID" data-charttype="bar" style="border: $paramBorderWidth solid $paramBorderColor; border-radius: 4px; padding: 10px;"></canvas>
</div>
 
<script type="text/javascript">
//<![CDATA[
   var data$paramChartID = {
      labels : [
         #set( $myLabels = $paramDataLabels.split(","))
         #foreach( $item in $myLabels )
            "$item",
         #end
      ],
      datasets : [
         {
            fillColor : "rgba($paramChartColor,0.5)",
            strokeColor : "rgba($paramChartColor,0.8)",
            highlightFill : "rgba($paramChartColor,0.75)",
            highlightStroke : "rgba($paramChartColor,1)",
            data : [
               #set( $myValues = $paramDataValues.split(","))
               #foreach( $item in $myValues )
                  $item,
               #end
            ]
         }
      ]
   }
 
   var options$paramChartID = {
      scaleBeginAtZero : #if ($paramScaleBeginAtZero==true) true #else false #end ,
      scaleShowGridLines : #if ($paramScaleShowGridLines==true) true #else false #end ,
      scaleGridLineColor : "rgba($paramScaleGridLineColor,.05)",
      scaleGridLineWidth : $paramScaleGridLineWidth,
      scaleShowHorizontalLines : #if ($paramScaleShowHorizontalLines==true) true #else false #end ,
      scaleShowVerticalLines : #if ($paramScaleShowVerticalLines==true) true #else false #end ,
      scaleOverride : #if ($paramScaleOverride==true) true #else false #end ,
      scaleSteps : $paramScaleSteps,
      scaleStepWidth : $paramScaleStepWidth,
      scaleStartValue : $paramScaleStartValue,
      barShowStroke : #if ($paramBarShowStroke==true) true #else false #end ,
      barStrokeWidth : $paramBarStrokeWidth,
      barValueSpacing : $paramBarValueSpacing,
      responsive : true
   }
//]]>
</script>

 

Copyright © 2021 Lewe.com – OnePress theme by FameThemes
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Cookie settingsACCEPT
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.