Open a url on a specific series' bar click.
HTML
<script src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/src/jquery.jqplot.min.css">
<div id="chart"></div>
CSS
#chart{
width: 400px;
height: 400px;
}
JavaScript
$(document).ready(function(){
var ins = [2,2,3,5];
var outs = [2,4,3,5];
var swaps = [2,2,6,5];
var passes = [2,4,6,5];
var data = [ins, outs, swaps, passes, [3,3,3,3]];
var series = [
{label:'IN', pointLabels:{labels: [2,2,3,5]}},
{label:'OUT', pointLabels:{labels: [2,4,3,5]}},
{label:'SWAP', pointLabels:{labels: [2,2,6,5]}},
{label:'PASS', pointLabels:{labels: [2,4,6,5]}},
{label:'INVISIBLE', pointLabels:{labels: ['∑ 8','∑ 12','∑ 18','∑ 20']},
show: false, shadowAngle: 0, rendererOptions: {shadowDepth: 25, shadowOffset: 2.5, shadowAlpha: 0.01}
}
];
var ticks = ['Oi', 'Bike', 'Car', 'Truck'];
var plot = $.jqplot('chart', data, {
stackSeries: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true, barDirection: 'horizontal'},
pointLabels: {
show: true, stackedValue: false, location:'e'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
},
legend: {
show: true,
location: 'ne',
placement: 'outside'
},
series: series,
title: "Oi Oi Title"
});
var urls = ["www.yahoo.com", "www.google.com", "www.java.com", "www.w3schools.com/js/js_obj_date.asp"];
$('#chart').bind('jqplotDataClick',
function (ev, seriesIndex,...