Entry Results - Poll all field types
Markup: Bar Chart - multiple options, percent values, custom tooltip and datalabels
<List name=background_color>
<Item>rgba(255, 205, 86, 0.5)</Item>
<Item>rgba(75, 192, 192, 0.5)</Item>
<Item>rgba(153, 102, 255, 0.5)</Item>
</List>
<List name=border_color>
<Item>#bf2977</Item>
<Item>#0c50cb</Item>
<Item>rgba(255, 125, 102, 1)</Item>
</List>
<!-- line, bar, radar, doughnut, pie, polarArea -->
<Chart
chart_title="{
display: true,
text: 'Custom Chart Title'
}"
chart_legend="{
display: true,
labels: {
color: 'rgba(220, 53, 69, 1)',
font: {
family:'Pristina'
size: '18',
weight: 'normal',
lineHeight: '1.2',
}
},
title: {
display: true,
text: 'You voted for:',
color: '#dc3545',
font: {
size: '20',
weight: 'bold',
lineHeight: '1.2',
}
},
}"
type="bar"
background_color="{Get list=background_color}"
border_color="{Get list=border_color}"
axis_y = "{
display: true,
title: {
display: true,
text: 'Frequencies',
color: '#00781f',
font: {
family: 'Broadway',
size: '16',
weight: 'bold',
lineHeight: '1.2',
},
padding: {top: '20', left: 0, right: 0, bottom: 0}
},
ticks: {
display: true,
color: 'rgb(0, 102, 255)',
font: {
family: 'Times',
size: '14',
weight: 'normal',
lineHeight: '1.2',
},
},
}"
axis_x = "{
display: true,
title: {
display: true,
color: 'rgb(0, 102, 255)',
text: 'Pets',
font: {
family: 'Times',
size: '16',
weight: 'bold',
lineHeight: '1.2',
},
},
ticks: {
display: true,
color: '#fd7e14',
font: {
size: '12',
weight: 'normal',
lineHeight: '1.2',
},
},
}"
tick_values="{
min_value: '0',
max_value: '',
min_percent: '0',
max_percent: '100',
show_in: 'percent',
text_before:'BEFORE',
text_after:'AFTER',
}"
tooltip = "{
displayColors: false,
padding:12,
backgroundColor: '#ffe6aa',
titleAlign: 'right',
titleMarginBottom:4,
titleColor: 'rgb(0, 102, 255)',
titleFont:{
family:'Times',
size:16,
weight:'bold',
lineHeight:1.2
},
bodyColor: '#c64508',
bodyFont:{
family:'Broadway',
size:14,
weight:'bold',
lineHeight:1.2
}
bodyAlign:'right',
bodySpacing : 1,
borderWidth: 2,
borderColor: rgb(0,0,0),
cornerRadius:12,
caretPadding:26,
caretSize:10,
}"
tooltip_values="{
max_value: '',
show: 'both',
show_label: true,
custom_label:true,
custom_label_text:'Result',
}"
datalabels="{
display: true,
percent_label:{
display_label: true,
backgroundColor: 'green',
borderColor: 'rgba(0,0,0,0)',
borderRadius: '0',
borderWidth: 0,
color: 'white',
font:{
family:'Times',
size:14,
weight:'bold',
lineHeight:1.2
},
padding:{
top:15,
bottom:15,
right: 4,
left: 4,
},
align:'end',
anchor:'start',
offset:'0',
},
value_label:{
display_label: true,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
borderRadius: '0',
borderWidth: '0',
color: 'black',
font:{
family:'Times',
size:14,
weight:'bold',
lineHeight:1.2
},
padding:{
top:6,
bottom:6,
},
align:'start',
anchor:'end',
offset:'0',
},
}"
data_axis = 'x'
>
<GFChartData form_id="{Get name=form_id}" field_id="[6]" source="poll" multi_labels="true"/>
</Chart>
Funny appearance of this Chart is just to show how different options values affect the Chart.( please make your Chart much prettier :) )
Markup: Line Chart
<List name=background_color>
<Item>rgba(255, 205, 86, 0.5)</Item>
<Item>rgba(75, 192, 192, 0.5)</Item>
<Item>rgba(153, 102, 255, 0.5)</Item>
</List>
<List name=border_color>
<Item>#bf2977</Item>
<Item>#0c50cb</Item>
<Item>rgba(255, 125, 102, 1)</Item>
</List>
<!-- line, bar, radar, doughnut, pie, polarArea -->
<Chart type="line" fill="false" background_color="{Get list=background_color}" border_color="{Get list=border_color}">
<GFChartData form_id="51" field_id="[4,5,6]" source="poll" multi_labels="true"/>
</Chart>
Markup: Radar Chart
<List name=background_color>
<Item>rgba(255, 205, 86, 0.5)</Item>
<Item>rgba(75, 192, 192, 0.5)</Item>
<Item>rgba(153, 102, 255, 0.5)</Item>
</List>
<List name=border_color>
<Item>#bf2977</Item>
<Item>#0c50cb</Item>
<Item>rgba(255, 125, 102, 1)</Item>
</List>
<!-- line, bar, radar, doughnut, pie, polarArea -->
<Chart type="radar" background_color="{Get list=background_color}" border_color="{Get list=border_color}">
<GFChartData form_id="51" field_id="[4,5,6]" source="poll" multi_labels="true"/>
</Chart>
Markup: Doughnut Chart - single dataset(entry field)
<List name=background_color>
<Item>rgba(255, 205, 86, 0.5)</Item>
<Item>rgba(75, 192, 192, 0.5)</Item>
<Item>rgba(153, 102, 255, 0.5)</Item>
</List>
<List name=border_color>
<Item>#bf2977</Item>
<Item>#0c50cb</Item>
<Item>rgba(255, 125, 102, 1)</Item>
</List>
<!-- line, bar, radar, doughnut, pie, polarArea -->
<Chart type="doughnut" background_color="{Get list=background_color}" border_color="{Get list=border_color}">
<GFChartData form_id="51" field_id="[4,5,6]" source="poll" multi_labels="true"/>
</Chart>
Markup: Pie Chart - single dataset(entry field)
<List name=background_color>
<Item>rgba(255, 205, 86, 0.5)</Item>
<Item>rgba(75, 192, 192, 0.5)</Item>
<Item>rgba(153, 102, 255, 0.5)</Item>
</List>
<List name=border_color>
<Item>#bf2977</Item>
<Item>#0c50cb</Item>
<Item>rgba(255, 125, 102, 1)</Item>
</List>
<!-- line, bar, radar, doughnut, pie, polarArea -->
<Chart type="pie" background_color="{Get list=background_color}" border_color="{Get list=border_color}">
<GFChartData form_id="51" field_id="[4,5,6]" source="poll" multi_labels="true"/>
</Chart>
Markup: Polar Area Chart - single dataset(entry field)
<List name=background_color>
<Item>rgba(255, 205, 86, 0.5)</Item>
<Item>rgba(75, 192, 192, 0.5)</Item>
<Item>rgba(153, 102, 255, 0.5)</Item>
</List>
<List name=border_color>
<Item>#bf2977</Item>
<Item>#0c50cb</Item>
<Item>rgba(255, 125, 102, 1)</Item>
</List>
<!-- line, bar, radar, doughnut, pie, polarArea -->
<Chart type="polarArea" background_color="{Get list=background_color}" border_color="{Get list=border_color}">
<GFChartData form_id="51" field_id="[4,5,6]" source="poll" multi_labels="true"/>
</Chart>