|
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> |