With horizontal and vertical Bar Charts, you can set a series to be static (non-draggable).
To create this effect, we use two different series'. One of the series is the "hot" draggable series: it has its draggable property set to true, a snapping interval, and a hover cursor that indicates that the series is non-static (it indicates North-South or East-West movement). The other Series is the static series. Its draggable property is set to false. You can go even further by using a different hover cursor, removing the series from the Legend, disabling hover highlighting, etc.
An important attribute that makes this display properly for vertical and horizontal bar charts is the plotOptions --> column --> grouping --> false setting. Without this setting, the series columns will not align properly without extra settings.
The title of each axis can now be formatted. The font-weight and font-style for both the x-axis and y-axis can be specified
based on the available options.
For font-weight there are 14 choices: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit.
For font-style there are 4 choices: normal | italic | oblique | inherit.
Below are two axis examples with title formatting:
xAxis: { title: { text: 'X Axis Title', style: {'font-weight': 'normal', 'font-style': 'italic'} }
yAxis: { title: { text: 'Y Axis Title', style: {'font-weight': 'bold', 'font-style': 'italic'} }
The labels for points can now be hidden on both the x-axis, y-axis or both.
Hiding the point labels is accomplished by adding labels: {enabled: false} to the appropriate axis.
Below is an example of an axis with labels hidden:
xAxis: { labels: { enabled: false } }
Points on the x and/or y-axis can be configured to be in descending order. For example 10, 9, 8, 7, 6...
To have descending point labels, use reversed: true on the appropriate axis. In addition to reversing the axis, if you want the categories to start from a given value, you can define that thru the series low attribute.
Below is an example of a descending axis starting at 20:
{ xAxis: { reversed: true }, series: [ { data: [ { y:3, low:20 } ] } ] }
| Get Responses: | [ Click Get Responses ] |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<assessmentItem
xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
adaptive="false" identifier="custom-barchart-staticseries" timeDependent="false"
title="Custom Interaction - Bar Chart - Static Series"
xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
<responseDeclaration cardinality="multiple" identifier="RESPONSE"/>
<outcomeDeclaration baseType="integer" cardinality="single" identifier="SCORE"/>
<itemBody>
<div class="row">
<div class="span6">
<p>
In the example to the right, the first and third columns are <em>HOT</em>, and the second and
fourth columns are <em>NOT</em>.
</p>
<hr/>
<p>
This is an example of one way you can set up what appears to be static points in a column series.
What we do is create two different Series'.
</p>
<p>
One of the Series is the "hot" draggable series: it has its "draggable" property set to true, a snapping
interval, a hover cursor, etc. The second Series is the static series. Its draggable property is set to
false. You can go even further by setting the series color, a different hover cursor, removing the series
from the Legend, disabling hover highlighting, etc.
</p>
</div>
<div class="span6">
<div class="well">
<div id="RESPONSE"></div>
<customInteraction class="tei-graphing" responseIdentifier="RESPONSE">
<customOption><![CDATA[
{
chart: {
renderTo: 'RESPONSE',
type: 'column',
plotShadow: true,
plotBorderWidth: 1,
animation: false
},
title: {
text: 'Monthly Average Rainfall'
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'Months of the Year'
},
categories: [
'January',
'February',
'March',
'April'
]
},
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
title: {
text: 'Rainfall (cm)'
}
},
tooltip: {
formatter: function() {
return false;
}
},
plotOptions: {
series: {
stickyTracking: false
},
column: {
grouping: false,
shadow: false,
pointPadding: 0.2,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
}
},
series: [{
name: 'Rainfall',
cursor: 'ns-resize',
draggable: true,
dragMin: 0,
dragMax: 190,
data: [[0,40], [2,40]],
dataQtiIsResponse: true,
snapping: true,
snappingInterval: 10,
},
{
name: 'Rainfall',
showInLegend: false,
color: '#AA4643',
states: { hover: { enabled: false }}, // disable highlight
draggable: false, // mark it not draggable
data: [[1,20],[3,60]],
dataQtiIsResponse: false, // not part of response
}]
}
]]></customOption>
</customInteraction>
</div>
</div>
</div>
</itemBody>
</assessmentItem>
In the example to the right, the first and third columns are HOT, and the second and fourth columns are NOT.
This is an example of one way you can set up what appears to be static points in a column series. What we do is create two different Series'.
One of the Series is the "hot" draggable series: it has its "draggable" property set to true, a snapping interval, a hover cursor, etc. The second Series is the static series. Its draggable property is set to false. You can go even further by setting the series color, a different hover cursor, removing the series from the Legend, disabling hover highlighting, etc.