2011-08-10 01:10:50 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title > Simple Test< / title >
<!-- [if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif] -->
2011-11-07 21:37:55 +01:00
< link rel = "stylesheet" type = "text/css" href = "../jquery.jqplot.min.css" / >
2011-08-10 01:10:50 +02:00
< link rel = "stylesheet" type = "text/css" href = "examples.css" / >
<!-- BEGIN: load jquery -->
2011-11-07 21:37:55 +01:00
< script language = "javascript" type = "text/javascript" src = "../jquery.min.js" > < / script >
2011-08-10 01:10:50 +02:00
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
2011-11-07 21:37:55 +01:00
< script language = "javascript" type = "text/javascript" src = "../jquery.jqplot.min.js" > < / script >
< script language = "javascript" type = "text/javascript" src = "../plugins/jqplot.enhancedLegendRenderer.min.js" > < / script >
< script language = "javascript" type = "text/javascript" src = "../plugins/jqplot.pieRenderer.min.js" > < / script >
< script language = "javascript" type = "text/javascript" src = "../plugins/jqplot.barRenderer.min.js" > < / script >
< script language = "javascript" type = "text/javascript" src = "../plugins/jqplot.categoryAxisRenderer.min.js" > < / script >
2011-08-10 01:10:50 +02:00
<!-- END: load jqplot -->
< style type = "text/css" >
div.plot {
margin-bottom: 70px;
}
p {
margin: 2em 0;
}
.jqplot-target {
border: 1px solid #cccccc;
}
< / style >
2011-11-07 21:37:55 +01:00
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
2011-08-10 01:10:50 +02:00
s1 = [1,6,9,8];
s2 = [4,3,1,2];
s3 = [6,2,4,1];
s4 = [1,2,3,4];
s5 = [4,3,2,1];
s6 = [8,2,6,3];
plot1 = $.jqplot('chart1',[s1, s2, s3, s4, s5, s6],{
stackSeries: true,
seriesDefaults: {
fill: true,
showMarker: false,
},
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
rendererOptions:{
numberRows: 1
},
placement: 'outsideGrid',
location: 's'
},
axes: {
2011-11-07 21:37:55 +01:00
xaxis:{pad: 0},
2011-08-10 01:10:50 +02:00
yaxis:{min:0, max:35}
}
});
});
< / script >
2011-11-07 21:37:55 +01:00
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
2011-08-10 01:10:50 +02:00
plot2 = $.jqplot('chart2',[s1, s2, s3, s4, s5, s6],{
stackSeries: true,
title: 'Precipitation Potential',
seriesDefaults: {
renderer: $.jqplot.BarRenderer
},
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
showLabels: true,
labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
rendererOptions:{
numberColumns:1,
seriesToggle: 900,
disableIEFading: false
},
placement:'outsideGrid',
marginLeft: '25px',
marginTop: '0px'
},
axes: {
xaxis:{renderer: $.jqplot.CategoryAxisRenderer},
yaxis:{min:0, max:35}
}
});
});
< / script >
2011-11-07 21:37:55 +01:00
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
2011-08-10 01:10:50 +02:00
plot3 = $.jqplot('chart3',[s1, s2, s3, s4, s5, s6],{
stackSeries: true,
seriesDefaults: {
fill: false,
showMarker: false
},
series : [
{yaxis: 'y2axis'},
{yaxis: 'y3axis'}
],
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
rendererOptions:{
numberColumns:1
},
placement:'outsideGrid',
location: 'e',
marginLeft: '0px' // the y3 axis will already pad itself, don't need extra margin.
},
axes: {
2011-11-07 21:37:55 +01:00
xaxis:{pad: 0},
yaxis:{autoscale: true},
y2axis:{autoscale: true},
y3axis:{autoscale: true}
2011-08-10 01:10:50 +02:00
}
});
});
< / script >
2011-11-07 21:37:55 +01:00
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
2011-08-10 01:10:50 +02:00
plot4 = $.jqplot('chart4',[s1, s2, s3, s4, s5, s6],{
stackSeries: true,
title: 'Progressive Projection',
seriesDefaults: {
fill: true,
showMarker: false,
},
series: [
{xaxis: 'x2axis'}
],
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
rendererOptions:{
numberRows: 1
},
placement: 'outsideGrid',
location: 's'
},
axes: {
2011-11-07 21:37:55 +01:00
xaxis:{pad: 0, label: 'Dilution Count'},
x2axis:{pad: 0},
2011-08-10 01:10:50 +02:00
yaxis:{min:0, max:35}
}
});
});
< / script >
2011-11-07 21:37:55 +01:00
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
2011-08-10 01:10:50 +02:00
plot5 = $.jqplot('chart5',[s1, s2, s3, s4, s5, s6],{
stackSeries: true,
title: 'Progressive Projection',
seriesDefaults: {
fill: true,
showMarker: false,
},
series: [
{xaxis: 'x2axis'}
],
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
rendererOptions:{
numberRows: 1
},
placement: 'outsideGrid',
location: 'n'
},
axes: {
2011-11-07 21:37:55 +01:00
xaxis:{pad: 0},
x2axis:{pad: 0},
2011-08-10 01:10:50 +02:00
yaxis:{min:0, max:35}
}
});
});
< / script >
2011-11-07 21:37:55 +01:00
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
plot6 = $.jqplot('chart6',[s1, s2, s3, s4, s5, s6],{
stackSeries: true,
title: 'Progressive Projection',
seriesDefaults: {
fill: true,
showMarker: false,
},
series: [
{xaxis: 'x2axis'}
],
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
rendererOptions:{
numberRows: 1
},
placement: 'outside',
location: 'n'
},
axes: {
xaxis:{pad: 0},
x2axis:{pad: 0},
yaxis:{min:0, max:35}
}
});
});
< / script >
2011-08-10 01:10:50 +02:00
2011-11-07 21:37:55 +01:00
< script type = "text/javascript" src = "example.js" > < / script >
2011-08-10 01:10:50 +02:00
< / head >
< body >
2011-11-07 21:37:55 +01:00
<?php include "topbanner.inc"; ?>
< div class = "example-content" >
<?php include "nav.inc"; ?>
2011-08-10 01:10:50 +02:00
< p > This example demonstrates how to use the legend "location: 'outsideGrid'" option. This option will place the legend outside of the grid but inside of the plot target. It will shrink the grid to accommodate the plot target. Borders have been added to the plot target container elements to clarify how the legend is drawn in each case.< / p >
< div id = "chart1" class = "plot" style = "width:500px;height:300px;" > < / div >
< div id = "chart2" class = "plot" style = "width:500px;height:300px;" > < / div >
< div id = "chart3" class = "plot" style = "width:500px;height:300px;" > < / div >
< div id = "chart4" class = "plot" style = "width:500px;height:300px;" > < / div >
< div id = "chart5" class = "plot" style = "width:500px;height:300px;" > < / div >
2011-11-07 21:37:55 +01:00
< div id = "chart6" class = "plot" style = "width:500px;height:300px;" > < / div >
2011-08-10 01:10:50 +02:00
2011-11-07 21:37:55 +01:00
< / div >
< / body >
2011-08-10 01:10:50 +02:00
< / html >
