Blame | Letzte Änderung | Log anzeigen | RSS feed
<!DOCTYPE html><html><head><title>Pyramid Charts 2</title><link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /><link rel="stylesheet" type="text/css" href="examples.min.css" /><link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" /><link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" /><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--><script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head><body><div id="header"><div class="nav"><a class="nav" href="../../../index.php"><span>></span>Home</a><a class="nav" href="../../../docs/"><span>></span>Docs</a><a class="nav" href="../../download/"><span>></span>Download</a><a class="nav" href="../../../info.php"><span>></span>Info</a><a class="nav" href="../../../donate.php"><span>></span>Donate</a></div></div><div class="colmask leftmenu"><div class="colleft"><div class="col1" id="example-content"><!-- Example scripts go here --><link class="include" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" rel="Stylesheet" /><style type="text/css">.chart-container {border: 1px solid darkblue;padding: 30px;width: 600px;height: 700px;}#chart1 {width: 96%;height: 96%;}.jqplot-datestamp {font-size: 0.8em;color: #777;/* margin-top: 1em;text-align: right;*/font-style: italic;position: absolute;bottom: 15px;right: 15px;}td.controls li {list-style-type: none;}td.controls ul {margin-top: 0.5em;padding-left: 0.2em;}pre.code {margin-top: 45px;clear: both;}</style><table class="app"><td class="controls"><div style="margin-bottom: 15px;">Axes:<select name="axisPosition"><option value="both">Left & Right</option><option value = "left">Left</option><option value = "right">Right</option><option value = "mid">Mid</option></select></div><div>Background Color:<ul><li><input name="backgroundColor" value="white" type="radio" checked />Default</li><li><input name="backgroundColor" value="#efefef" type="radio" />Gray</li></ul></div><div>Pyramid Color:<ul><li><input name="seriesColor" value="green" type="radio" checked />Green</li><li><input name="seriesColor" value="blue" type="radio" />Blue</li></ul></div><div>Grids:<ul><li><input name="gridsVertical" value="vertical" type="checkbox" checked />Vertical</li><li><input name="gridsHorizontal" value="horizontal" type="checkbox" checked />Horizontal</li><li><input name="showMinorTicks" value="true" type="checkbox" />Only major</li><li><input name="plotBands" value="true" type="checkbox" />Plot Bands</li></ul></div><div><ul><li><input name="barPadding" value="4" type="checkbox" checked />Gap between bars</li><!-- value for showContour is speed at which to fade lines in/out --><li><input name="showContour" value="500" type="checkbox" />Comparison Line</li></ul></div><div class="tooltip"><table><tr><td>Age: </td><td><div class="tooltip-item" id="tooltipAge"> </div></td></tr><tr><td>Male: </td><td><div class="tooltip-item" id="tooltipMale"> </div></td></tr><tr><td>Female: </td><td><div class="tooltip-item" id="tooltipFemale"> </div></td></tr><tr><td>Ratio: </td><td><div class="tooltip-item" id="tooltipRatio"> </div></td></tr></table></div></td><td class="chart"><div class="chart-container"><div id="chart1"></div><div class="jqplot-datestamp"></div></div></td></table><pre class="code brush:js"></pre><script class="code" type="text/javascript" language="javascript">$(document).ready(function(){// the "x" values from the data will go into the ticks array.// ticks should be strings for this case where we have values like "75+"var ticks = ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75+"];// The "y" values of the data are put into seperate series arrays.var male = [4.425251, 5.064975, 4.401382, 3.787731, 2.306403, 3.110203, 2.824716, 3.846422, 3.067799, 2.936013, 2.505067, 2.018346, 1.90446, 1.357237, 0.909704, 0.988836];var female = [4.28698, 4.343237, 4.710053, 3.99281, 2.811107, 3.191518, 4.855351, 4.62347, 4.032976, 4.414623, 3.210845, 2.426347, 2.635736, 1.811459, 1.515899, 1.683044];var male2 = [1.445677, 2.088224, 2.159879, 2.401152, 3.701622, 3.897444, 5.048783, 4.367545, 3.304588, 3.784367, 3.059088, 2.052513, 1.412907, 0.934326, 0.541234, 0.784258];var female2 =[2.238284, 2.974165, 2.360351, 3.03517, 4.80941, 6.229139, 7.257596, 5.847782, 5.226342, 6.201237, 4.474141, 2.769444, 2.048169, 1.47749, 0.87372, 1.193951];// Custom color arrays are set up for each series to get the look that is desired.// Two color arrays are created for the default and optional color which the user can pick.var greenColors = ["#526D2C", "#77933C", "#C57225", "#C57225"];var blueColors = ["#3F7492", "#4F9AB8", "#C57225", "#C57225"];// To accomodate changing y axis, need to keep track of plot options.// changing axes will require recreating the plot, so need to keep// track of state changes.var plotOptions = {// We set up a customized title which acts as labels for the left and right sides of the pyramid.title: '<div style="float:left;width:50%;text-align:center">Male</div><div style="float:right;width:50%;text-align:center">Female</div>',// by default, the series will use the green color scheme.seriesColors: greenColors,grid: {drawBorder: false,shadow: false,background: "white",rendererOptions: {// plotBands is an option of the pyramidGridRenderer.// it will put banding at starting at a specified value// along the y axis with an adjustable interval.plotBands: {show: false,interval: 2}},},// This makes the effective starting value of the axes 0 instead of 1.// For display, the y axis will use the ticks we supplied.defaultAxisStart: 0,seriesDefaults: {renderer: $.jqplot.PyramidRenderer,rendererOptions: {barPadding: 4},yaxis: "yaxis",shadow: false},// We have 4 series, the left and right pyramid bars and// the left and rigt overlay lines.series: [// For pyramid plots, the default side is right.// We want to override here to put first set of bars// on left.{rendererOptions:{side: 'left',synchronizeHighlight: 1}},{yaxis: "y2axis",rendererOptions:{synchronizeHighlight: 0}},// Pyramid series are filled bars by default.// The overlay series will be unfilled lines.{rendererOptions: {fill: false,side: "left"}},{yaxis: "y2axis",rendererOptions: {fill: false}}],// Set up all the y axes, since users are allowed to switch between them.// The only axis that will show is the one that the series are "attached" to.// We need the appropriate options for the others for when the user switches.axes: {xaxis: {tickOptions: {},rendererOptions: {baselineWidth: 2}},yaxis: {label: "Age",// Use canvas label renderer to get rotated labels.labelRenderer: $.jqplot.CanvasAxisLabelRenderer,// include empty tick options, they will be used// as users set options with plot controls.tickOptions: {},showMinorTicks: true,ticks: ticks,rendererOptions: {category: true,baselineWidth: 2}},yMidAxis: {label: "Age",// include empty tick options, they will be used// as users set options with plot controls.tickOptions: {},showMinorTicks: true,ticks: ticks,rendererOptions: {category: true,baselineWidth: 2}},y2axis: {label: "Age",// Use canvas label renderer to get rotated labels.labelRenderer: $.jqplot.CanvasAxisLabelRenderer,// include empty tick options, they will be used// as users set options with plot controls.tickOptions: {},showMinorTicks: true,ticks: ticks,rendererOptions: {category: true,baselineWidth: 2}}}};// initialize form elements// set these before attaching event handlers.$("input[type=checkbox][name=gridsVertical]").attr("checked", true);$("input[type=checkbox][name=gridsHorizontal]").attr("checked", true);$("input[type=checkbox][name=showMinorTicks]").attr("checked", false);$("input[type=checkbox][name=plotBands]").attr("checked", false);$("input[type=checkbox][name=showContour]").attr("checked", true);$("input[type=checkbox][name=barPadding]").attr("checked", true);$("select[name=axisPosition]").val("both");$("input[type=radio][name=backgroundColor]").attr("checked", false);$("input[type=radio][name=backgroundColor][value=white]").attr("checked", true);$("input[type=radio][name=backgroundColor]").attr("checked", false);$("input[type=radio][name=backgroundColor][value=white]").attr("checked", true);$("input[type=radio][name=seriesColor]").attr("checked", false);$("input[type=radio][name=seriesColor][value=green]").attr("checked", true);plot1 = $.jqplot("chart1", [male, female, male2, female2], plotOptions);// After plot creation, check to see if contours should be displayedcheckContour();//////// The followng functions use verbose css selectors to make// it clear exactly which elements they are binging to/operating on////////////// Function which checkes if the countour lines checkbox is checked.// If not, hide the contour lines.//////function checkContour() {if (!$("input[type=checkbox][name=showContour]").get(0).checked) {plot1.series[2].canvas._elem.addClass("jqplot-series-hidden");plot1.series[2].canvas._elem.hide();plot1.series[3].canvas._elem.addClass("jqplot-series-hidden");plot1.series[3].canvas._elem.hide();}}$("select[name=axisPosition]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.switch ($(this).val()) {case "both":plotOptions.series[0].yaxis = "yaxis";plotOptions.series[1].yaxis = "y2axis";plotOptions.series[2].yaxis = "yaxis";plotOptions.series[3].yaxis = "y2axis";break;case "left":plotOptions.series[0].yaxis = "yaxis";plotOptions.series[1].yaxis = "yaxis";plotOptions.series[2].yaxis = "yaxis";plotOptions.series[3].yaxis = "yaxis";break;case "right":plotOptions.series[0].yaxis = "y2axis";plotOptions.series[1].yaxis = "y2axis";plotOptions.series[2].yaxis = "y2axis";plotOptions.series[3].yaxis = "y2axis";break;case "mid":plotOptions.series[0].yaxis = "yMidAxis";plotOptions.series[1].yaxis = "yMidAxis";plotOptions.series[2].yaxis = "yMidAxis";plotOptions.series[3].yaxis = "yMidAxis";break;default:break;}plot1.destroy();plot1 = $.jqplot("chart1", [male, female, male2, female2], plotOptions);// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=radio][name=backgroundColor]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.plot1.grid.background = $(this).val();plotOptions.grid.background = $(this).val();plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=radio][name=seriesColor]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.if ($(this).val() === "blue") {// reset highlight colors so they will be recalculated.plot1.series[0].highlightColors = [];plot1.series[1].highlightColors = [];// reset series color to properly calculate highlight color.plot1.series[0].color = blueColors[0];plot1.series[1].color = blueColors[1];// to actually draw a new color, have to set the color on the shaperenderer.plot1.series[0].renderer.shapeRenderer.fillStyle = blueColors[0];plot1.series[1].renderer.shapeRenderer.fillStyle = blueColors[1];// update plot options state.plotOptions.seriesColors = blueColors;}else if ($(this).val() === "green") {// reset highlight colors so they will be recalculated.plot1.series[0].highlightColors = [];plot1.series[1].highlightColors = [];// reset series color to properly calculate highlight color.plot1.series[0].color = greenColors[0];plot1.series[1].color = greenColors[1];// to actually draw a new color, have to set the color on the shaperenderer.plot1.series[0].renderer.shapeRenderer.fillStyle = greenColors[0];plot1.series[1].renderer.shapeRenderer.fillStyle = greenColors[1];// update plot options state.plotOptions.seriesColors = blueColors;}plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=checkbox][name=gridsVertical]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.plot1.axes.xaxis.tickOptions.showGridline = this.checked;plotOptions.axes.xaxis.tickOptions.showGridline = this.checked;plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=checkbox][name=gridsHorizontal]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.plot1.axes.yaxis.tickOptions.showGridline = this.checked;plot1.axes.y2axis.tickOptions.showGridline = this.checked;plot1.axes.yMidAxis.tickOptions.showGridline = this.checked;plotOptions.axes.yaxis.tickOptions.showGridline = this.checked;plotOptions.axes.y2axis.tickOptions.showGridline = this.checked;plotOptions.axes.yMidAxis.tickOptions.showGridline = this.checked;plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=checkbox][name=showMinorTicks]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.plot1.axes.yaxis.showMinorTicks = !this.checked;plot1.axes.y2axis.showMinorTicks = !this.checked;plot1.axes.yMidAxis.showMinorTicks = !this.checked;plotOptions.axes.yaxis.showMinorTicks = !this.checked;plotOptions.axes.y2axis.showMinorTicks = !this.checked;plotOptions.axes.yMidAxis.showMinorTicks = !this.checked;plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=checkbox][name=plotBands]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.plot1.grid.plotBands.show = this.checked;plotOptions.grid.rendererOptions.plotBands.show = this.checked;plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});$("input[type=checkbox][name=showContour]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.var speed = $(this).val();if (this.checked) {plot1.series[2].canvas._elem.removeClass("jqplot-series-hidden");plot1.series[2].canvas._elem.fadeIn(speed);plot1.series[3].canvas._elem.removeClass("jqplot-series-hidden");plot1.series[3].canvas._elem.fadeIn(speed);}else {plot1.series[2].canvas._elem.addClass("jqplot-series-hidden");plot1.series[2].canvas._elem.fadeOut(speed);plot1.series[3].canvas._elem.addClass("jqplot-series-hidden");plot1.series[3].canvas._elem.fadeOut(speed);}});$("input[type=checkbox][name=barPadding]").change(function(){// this refers to the html element we are binding to.// $(this) is jQuery object on that element.if (this.checked) {var val = parseFloat($(this).val());plot1.series[0].barPadding = val;plot1.series[1].barPadding = val;plotOptions.seriesDefaults.rendererOptions.barPadding = val;}else {plot1.series[0].barPadding = 0;plot1.series[1].barPadding = 0;plotOptions.seriesDefaults.rendererOptions.barPadding = 0;}plot1.replot();// Finally, check to see if we need to hide contour lines.checkContour();});// bind to the data highlighting event to make custom tooltip:$(".jqplot-target").bind("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, data) {// Here, assume first series is male poulation and second series is female population.// Adjust series indices as appropriate.var malePopulation = Math.abs(plot1.series[0].data[pointIndex][1]);var femalePopulation = Math.abs(plot1.series[1].data[pointIndex][1]);var ratio = femalePopulation / malePopulation * 100;$("#tooltipMale").stop(true, true).fadeIn(250).html(malePopulation.toPrecision(4));$("#tooltipFemale").stop(true, true).fadeIn(250).html(femalePopulation.toPrecision(4));$("#tooltipRatio").stop(true, true).fadeIn(250).html(ratio.toPrecision(4));// Since we don't know which axis is rendererd and acive with out a little extra work,// just use the supplied ticks array to get the age label.$("#tooltipAge").stop(true, true).fadeIn(250).html(ticks[pointIndex]);});// bind to the data highlighting event to make custom tooltip:$(".jqplot-target").bind("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, data) {// clear out all the tooltips.$(".tooltip-item").stop(true, true).fadeOut(200).html('');});// add a date at the bottom.var d = new $.jsDate();$("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));$("div.chart-container").resizable({delay:20});$("div.chart-container").bind("resize", function(event, ui) {plot1.replot();});});</script><!-- End example scripts --><!-- Don't touch this! --><script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script><script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script><script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script><script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script><!-- End Don't touch this! --><!-- Additional plugins go here --><script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script><!-- load the pyramidAxis and Grid renderers in production. pyramidRenderer will try to load via ajax if not present, but that is not optimal and depends on paths being set. --><script class="include" type="text/javascript" src="../plugins/jqplot.pyramidAxisRenderer.min.js"></script><script class="include" type="text/javascript" src="../plugins/jqplot.pyramidGridRenderer.min.js"></script><script class="include" type="text/javascript" src="../plugins/jqplot.pyramidRenderer.min.js"></script><script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script><script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script><script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script><!-- End additional plugins --></div><div class="col2"><div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div><div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div><div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div><div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div><div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div><div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div><div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div><div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div><div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div><div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div><div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div><div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div><div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div><div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div><div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div><div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div><div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div><div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div><div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div><div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div><div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div><div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div><div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div><div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div><div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div><div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div><div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div><div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div><div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div><div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div><div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div><div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div><div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div><div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div><div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div><div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div><div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div><div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div><div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div><div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div><div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div><div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div><div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div><div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div><div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div><div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div><div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div><div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div><div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div><div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div><div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div><div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div><div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div><div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div><div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div><div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div></div></div></div><script type="text/javascript" src="example.min.js"></script></body></html>