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.blockRenderer.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.pointLabels.min.js" > < / script >
2011-08-10 01:10:50 +02:00
<!-- END: load jqplot -->
< script language = "javascript" type = "text/javascript" >
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
s1 = [[0.9, 120, 'Vernors'], [1.8, 140, 'Fanta'], [3.2, 90, 'Barqs', {background:'#ddbb33'}], [4.1, 140, 'Arizon Iced Tea'], [4.5, 91, 'Red Bull'], [6.8, 17, 'Go Girl']];
s2 = [[1.3, 44, 'Pepsi'], [2.1, 170, 'Sierra Mist'], [2.6, 66, 'Moutain Dew'], [4, 52, 'Sobe'], [5.4, 16, 'Amp'], [6, 48, 'Aquafina']];
s3 = [[1, 59, 'Coca-Cola', {background:'rgb(250, 160, 160)'}], [2, 50, 'Ambasa'], [3, 90, 'Mello Yello'], [4, 90, 'Sprite'], [5, 71, 'Squirt'], [5, 155, 'Youki']];
plot1 = $.jqplot('chart1',[s1, s2, s3],{
seriesDefaults:{
renderer:$.jqplot.BlockRenderer
},
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true
},
series: [
{},
{rendererOptions: {
css:{background:'#A1EED6'}
}},
{rendererOptions: {
css:{background:'#D3E4A0'}
}}
],
axes: {
xaxis: {
min:0,
max: 8
},
yaxis: {
min:0,
max: 200
}
}
});
s1 = [[0.9, 120, 'Vernors'], [1.8, 140, 'Fanta'], [3.2, 90, 'Barqs'], [4.1, 140, 'Arizon Iced Tea'], [4.5, 91, 'Red Bull'], [6.8, 17, 'Go Girl']];
s2 = [[1.3, 44, 'Pepsi'], [2.1, 170, 'Sierra Mist'], [2.6, 66, 'Moutain Dew'], [4, 52, 'Sobe'], [5.4, 16, 'Amp'], [6, 48, 'Aquafina']];
s3 = [[1, 59, 'Coca-Cola'], [2, 50, 'Sprite'], [3, 90, 'Mello Yello'], [4, 90, 'Ambasa'], [5, 71, 'Squirt'], [5, 155, 'Youki']];
plot2 = $.jqplot('chart2',[s1, s2, s3],{
seriesDefaults:{
renderer:$.jqplot.BlockRenderer,
rendererOptions: {
varyBlockColors: true
},
pointLabels:{
show: false
}
},
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
showSwatches: false
},
series: [{label: 'Independent Brands'}, {label: 'Pepsi Brands'}, {label: 'Coke Brands'}],
axes: {
xaxis: {
min:0,
max: 8
},
yaxis: {
min:0,
max: 200
}
}
});
});
function move(dir, val) {
val = parseFloat(val);
var sidx = parseInt($('#seriesId').val());
var pidx = parseInt($('#pointId').val());
var duration = $('#duration').val();
var x = plot1.series[sidx].data[pidx][0];
var y = plot1.series[sidx].data[pidx][1];
(dir == 'x') ? x += val : y += val;
plot1.series[sidx].moveBlock(pidx, x, y, duration);
}
< / script >
< / 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 > Below is an example block plot. This plot also uses the Enhanced Legend Renderer plugin. Clicking on an item in the legend will toggle display of the appropriate series.< / p >
< div id = "chart1" class = "plot" style = "width:500px;height:300px;margin-bottom:30px;" > < / div >
< p > Blocks can be moved by selecting the series, the point, and an optional duration parameter. If specified, duration will animate the movement. Duration is either a number in milliseconds, or the keywords 'fast' or 'slow'. Higher numbers will cause a slower animation.< / p >
Series: < select id = "seriesId" >
< option value = "0" selected > First< / option >
< option value = "1" > Second< / option >
< option value = "2" > Third< / option >
< / select >
Point: < select id = "pointId" >
< option value = "0" selected > first< / option >
< option value = "1" > second< / option >
< option value = "2" > third< / option >
< option value = "3" > fourth< / option >
< option value = "4" > fifth< / option >
< option value = "5" > six< / option >
< / select >
Duration: < select id = "duration" >
< option value = "" selected > None< / option >
< option value = "150" > 100< / option >
< option value = "fast" > fast< / option >
< option value = "300" > 300< / option >
< option value = "300" > 400< / option >
< option value = "300" > 500< / option >
< option value = "slow" > slow< / option >
< option value = "900" > 700< / option >
< option value = "900" > 800< / option >
< option value = "900" > 900< / option >
< / select >
X: < button id = "mxval" type = "button" value = "-0.5" onclick = "move('x', -1);" > -1< / button > < button id = "pxval" type = "button" value = "-0.5" onclick = "move('x', 0.5);" > 0.5< / button >
Y: < button id = "myval" type = "button" name = "myval" value = "-10" onclick = "move('y', -30);" > -30< / button > < button id = "pyval" type = "button" name = "pyval" value = "10" onclick = "move('y', 15);" > 15< / button >
< p > This second chart is like the first except the "varyBlockColors" renderer option is set to true. This will vary the color of each block in a series separately. This allows displaying a third dimension to the data such as grouping beverage products by producer and by category such as "cola", "tea", "energy drink", etc.< / p >
< p > Also, the legend has it's "showSwathces" option set to false, since the blocks of each series will be of varying color and won't correspond to one swatch color. This still enables the user to show and hide the series by clicking on a label in the legend.< / p >
< div id = "chart2" class = "plot" style = "width:500px;height:300px;margin-bottom:30px;" > < / div >
2011-11-07 21:37:55 +01:00
< / div >
< / body >
2011-08-10 01:10:50 +02:00
< / html >
