2019-05-27 10:33:22 -07:00
<!DOCTYPE html>
< html >
< head >
< title > Animated Charts< / 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" >
2020-11-23 20:15:40 -07:00
< a class = "nav" href = "/index.html" > Home< / a >
< a class = "nav" href = "/examples/" > Examples< / a >
< a class = "nav" href = "/docs/" > Docs< / a >
< a class = "nav" href = "/download/" > Download< / a >
< a class = "nav" href = "/info.html" > Info< / a >
< a class = "nav" href = "/donate.html" > Donate< / a >
2019-05-27 10:33:22 -07:00
< / div >
< / div >
< div class = "colmask leftmenu" >
< div class = "colleft" >
< div class = "col1" id = "example-content" >
<!-- Example scripts go here -->
< div id = "chart1" style = "width:700px; height:300px" > < / div >
< p > This plot animates the bars bottom to top and the line series left to right upon initial page load. Since the < code > animateReplot: true< / code > option is set, the bars and line will also animate upon calls to < code > plot1.replot( { resetAxes: true } )< / code > .< / p >
< pre class = "code brush:js" > < / pre >
< script class = "code" type = "text/javascript" >
$ ( document ) . ready ( function ( ) {
var s1 = [ [ 2002 , 112000 ] , [ 2003 , 122000 ] , [ 2004 , 104000 ] , [ 2005 , 99000 ] , [ 2006 , 121000 ] ,
[ 2007 , 148000 ] , [ 2008 , 114000 ] , [ 2009 , 133000 ] , [ 2010 , 161000 ] , [ 2011 , 173000 ] ] ;
var s2 = [ [ 2002 , 10200 ] , [ 2003 , 10800 ] , [ 2004 , 11200 ] , [ 2005 , 11800 ] , [ 2006 , 12400 ] ,
[ 2007 , 12800 ] , [ 2008 , 13200 ] , [ 2009 , 12600 ] , [ 2010 , 13100 ] ] ;
plot1 = $ . jqplot ( "chart1" , [ s2 , s1 ] , {
// Turns on animatino for all series in this plot.
animate : true ,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot : true ,
cursor : {
show : true ,
zoom : true ,
looseZoom : true ,
showTooltip : false
} ,
series : [
{
pointLabels : {
show : true
} ,
renderer : $ . jqplot . BarRenderer ,
showHighlight : false ,
yaxis : 'y2axis' ,
rendererOptions : {
// Speed up the animation a little bit.
// This is a number of milliseconds.
// Default for bar series is 3000.
animation : {
speed : 2500
} ,
barWidth : 15 ,
barPadding : - 15 ,
barMargin : 0 ,
highlightMouseOver : false
}
} ,
{
rendererOptions : {
// speed up the animation a little bit.
// This is a number of milliseconds.
// Default for a line series is 2500.
animation : {
speed : 2000
}
}
}
] ,
axesDefaults : {
pad : 0
} ,
axes : {
// These options will set up the x axis like a category axis.
xaxis : {
tickInterval : 1 ,
drawMajorGridlines : false ,
drawMinorGridlines : true ,
drawMajorTickMarks : false ,
rendererOptions : {
tickInset : 0.5 ,
minorTicks : 1
}
} ,
yaxis : {
tickOptions : {
formatString : "$%'d"
} ,
rendererOptions : {
forceTickAt0 : true
}
} ,
y2axis : {
tickOptions : {
formatString : "$%'d"
} ,
rendererOptions : {
// align the ticks on the y2 axis with the y axis.
alignTicks : true ,
forceTickAt0 : true
}
}
} ,
highlighter : {
show : true ,
showLabel : true ,
tooltipAxes : 'y' ,
sizeAdjust : 7.5 , tooltipLocation : 'ne'
}
} ) ;
} ) ;
< / 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 >
<!-- Additional plugins go here -->
< script class = "include" type = "text/javascript" src = "../plugins/jqplot.barRenderer.min.js" > < / script >
< script class = "include" type = "text/javascript" src = "../plugins/jqplot.highlighter.min.js" > < / script >
< script class = "include" type = "text/javascript" src = "../plugins/jqplot.cursor.min.js" > < / script >
< script class = "include" type = "text/javascript" src = "../plugins/jqplot.pointLabels.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 >
2020-11-23 20:15:40 -07:00
< div class = "example-link" > < a class = "example-link" href = "pieChartsEnhancedLegend.html" > Pie Charts with Enhanced Legend Renderer< / a > < / div >
2019-05-27 10:33:22 -07:00
< 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 >
2020-11-23 20:15:40 -07:00
< div class = "example-link" > < a class = "example-link" href = "step-charts.html" > Step Charts< / a > < / div >
2019-05-27 10:33:22 -07:00
< 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 >
2020-11-23 20:15:40 -07:00
< / html >
