The Problem is i am unable to display the series Legends for the graph, anyone can please help ???
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQplot JSON POC</title>
<link href="../static/css/jquery.jqplot.css" rel="stylesheet">
</head>
<body>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/jquery.jqplot.min.js"></script>
<script src="../static/js/jqplot.barRenderer.min.js"></script>
<script src="../static/js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../static/js/jqplot.pointLabels.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<div id="chart1" style="height:500px;width:800px;"></div>
<div id="chart2" style="height:500px;width:800px;"></div>
<script type="text/javascript" >
$(document).ready(function(){
var json = $.parseJSON('{"colors": {"responnded":"#DC143C", "lost":"#00749F", "won":"#73C774"},"data" :{"Jan":{"Won":"12","lost":"8","Responnded":"10"},"Feb":{"responnded":"10"},"Mar":{"responnded":"10","lost":"2","won":"1"},"Apr":{"responnded":"15","lost":"22","won":"10"}}}');
var data = json.data;
//Code to Get the Colors of Bar
var colors = json.colors;
var color=[];
$.each(colors, function(key, value){
color.push(value);
});
console.log(color);
//Code to Get the Data Required for Rendering from Json
var ticks=[];
var statustemp=[];
var s1=[];
var s2=[];
var s3=[];
var i=0;
var resflag,lostflag,wonflag;
$.each(data, function(idx, obj){
ticks.push(idx);
resflag=lostflag=wonflag=false;
$.each(obj, function(key, value){
statustemp.push(key.toLowerCase());
switch (key.toLowerCase())
{
case "responnded" : s1.push(parseInt(value)); resflag=true; break;
case "lost" : s2.push(parseInt(value)); lostflag=true; break;
case "won" : s3.push(parseInt(value)); wonflag=true; break;
}
});
if(resflag==false)
s1.push(0);
if(lostflag==false)
s2.push(0);
if(wonflag==false)
s3.push(0);
i++;
});
//Iteration to generate Distinct Status Array
var status=[];
var flag;
for(var i=0;i<statustemp.length;i++)
{
if(status.length==0)
status.push(statustemp[i]);
else
{
flag=false;
for(var j=0;j<status.length;j++)
{
if(status[j]==statustemp[i])
{
flag=true;
break;
}
}
if(flag==false)
status.push(statustemp[i]);
}
}
console.log(s1,s2,s3);
console.log(ticks);
console.log(status);
//Code to Render Bar Graph
var plot1 = $.jqplot('chart1', [s1, s2, s3], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesColors:color,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
barPadding: 0,
barWidth: 30,
shadowOffset: 0,
shadowDepth: 0
},
pointLabels: {show: true, formatString: '$%d'}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Responded'},
{label:'Lost'},
{label:'Won'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid',
location: 'n'
},
grid: {
shadow: false,
drawBorder: false,
background: 'white'
},
axesDefaults: {
rendererOptions: {
drawBaseline: true,
varyBarColor: true
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {showGridline: false, }
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
min: 0,
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
//Code to Render StackkedBar Graph
var plot1 = $.jqplot('chart2', [s1, s2, s3], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
stackSeries: true,
seriesColors:color,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
barPadding: 0,
barWidth: 30,
shadowOffset: 0,
shadowDepth: 0
},
pointLabels: {show: true, formatString: '$%d'}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Responded'},
{label:'Lost'},
{label:'Won'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid',
location: 'n'
},
grid: {
shadow: false,
drawBorder: false,
background: 'white'
},
axesDefaults: {
rendererOptions: {
drawBaseline: true,
varyBarColor: true
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {showGridline: false, }
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
min: 0,
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
});
</script>
</body>
</html>