A bar chart or bar graph is a chart that presents Grouped data with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column bar chart. A bar graph is a chart that uses either horizontal or vertical bars to show comparisons among categories. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Some bar graphs present bars clustered in groups of more than one (grouped bar graphs), and others show the bars divided into subparts to show cumulative effect (stacked bar graphs).
Resource : sample source code
Learn : javascript symbol plugin sources
Part : Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7
function createSymbolView(container, width, height) {
var view = new JenScript.View({
name : container,
width : width,
height : height,
west : 80,
south:60
});
var proj = new JenScript.LinearProjection({
name : "proj",
minX : 0,
maxX : 0,
minY : -100,
maxY : 1200
});
view.registerProjection(proj);
var outline = new JenScript.DeviceOutlinePlugin({
color : 'pink'
});
proj.registerPlugin(outline);
var minor = {
tickMarkerSize : 2,
tickMarkerColor : 'yellow',
tickMarkerStroke : 1
};
var median = {
tickMarkerSize : 4,
tickMarkerColor : '#d35400',
tickMarkerStroke : 1.2,
tickTextColor : '#d35400',
tickTextFontSize : 10
};
var major = {
tickMarkerSize : 8,
tickMarkerColor : '#2980b9',
tickMarkerStroke : 3,
tickTextColor : '#2980b9',
tickTextFontSize : 12,
tickTextOffset : 16
};
var metrics = new JenScript.AxisMetricsModeled({
axis : JenScript.Axis.AxisWest,
minor:minor,
median:median,
major:major
});
proj.registerPlugin(metrics);
var gridPlugin = new JenScript.GridModeledPlugin({
gridOrientation : 'Horizontal',
gridColor : 'white',
gridWidth : 0.5,
gridOpacity : 0.5
});
proj.registerPlugin(gridPlugin);
var tx1 = new JenScript.TranslatePlugin({
mode : 'ty',
});
proj.registerPlugin(tx1);
tx1.registerWidget(new JenScript.TranslateCompassWidget({
ringFillColor : 'pink'
}));
tx1.select();
var zoomwheel = new JenScript.ZoomWheelPlugin({
mode : 'wheelY'
});
proj.registerPlugin(zoomwheel);
var symbolPlugin = new JenScript.SymbolPlugin({
nature : 'Vertical'
});
proj.registerPlugin(symbolPlugin);
// arbitrary values between min max values
var random = function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
barValue = function (){
return random(200,800);
}
stackValue = function (){
return random(20,60);
}
//symbol factory
var createBar = function(val){
var symbol = new JenScript.SymbolBarStacked({
base : 0,
value: val,
thickness : 32,
direction : 'ascent',
morpheStyle : 'Round',
themeColor : '#16a085',
opacity : 1,
barFill : new JenScript.SymbolBarFill0({}),
barEffect : new JenScript.SymbolBarEffect0({}),
});
var s1 = new JenScript.SymbolStack({
name : 'stack1',
themeColor : 'rgb(91, 151, 168)',
stackValue : stackValue()
});
var s2 = new JenScript.SymbolStack({
name : 'stack2',
themeColor : 'rgb(128, 182, 191)',
stackValue : stackValue()
});
var s3 = new JenScript.SymbolStack({
name : 'stack3',
themeColor : 'rgb(22, 125, 218)',
stackValue : stackValue()
});
symbol.addStack(s1);
symbol.addStack(s2);
symbol.addStack(s3);
return symbol;
}
var createPoint = function(val){
return new JenScript.SymbolPoint({
value: val,
themeColor : 'black',
});
}
var polyline = new JenScript.SymbolPolylinePoint({
themeColor : 'rgb(53, 121, 170)',
});
//layer
var barLayer = new JenScript.SymbolBarLayer();
symbolPlugin.addLayer(barLayer);
var pointlayer = new JenScript.SymbolPointLayer();
symbolPlugin.addLayer(pointlayer);
//lay out
barLayer.addSymbol(JenScript.SymbolFiller.createGlue(),false); //glue stretch
pointlayer.addSymbol(JenScript.SymbolFiller.createGlue(),false); //glue stretch
for (var i = 1; i <= 10; i++) {
var value = barValue();
var bar = createBar(value);
var point = createPoint(value);
//lay bar
barLayer.addSymbol(bar,false);
if(i < 10)
barLayer.addSymbol(JenScript.SymbolFiller.createStrut(20),false); //glue rigid except after last bar
//lay point
pointlayer.addSymbol(JenScript.SymbolFiller.createStrut(16),false);//compensate for bar thickness (half)
pointlayer.addSymbol(point,false);
pointlayer.addSymbol(JenScript.SymbolFiller.createStrut(16),false);//compensate for bar thickness (half)
if(i < 10)
pointlayer.addSymbol(JenScript.SymbolFiller.createStrut(20),false); //glue rigid except after last bar
//polyline
polyline.addSymbol(point);
}
barLayer.addSymbol(JenScript.SymbolFiller.createGlue(),false);//glue stretch
pointlayer.addSymbol(JenScript.SymbolFiller.createGlue(),false);//glue stretch
pointlayer.addSymbol(polyline); //does not contribute to filling
//invoke repaint only one time
symbolPlugin.repaintPlugin();
}