2019-05-27 10:33:22 -07:00
<!DOCTYPE html>
< html >
< head >
< title > AJAX and JSON Data Loading via Data Renderers< / 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 -->
< p > Data renderers allow jqPlot to pull data from any external source (e.g. a function implementing an AJAX call). Simply assign the external source to the "dataRenderer" plot option. The only requirement on data renderers is that it must return a valid jqPlot data array.< / p >
< div id = "chart1" style = "height:300px; width:500px;" > < / div >
< pre class = "code prettyprint brush: js" > < / pre >
< p > Data renderers get passed options by the plot. The signiture for a data renderer is:< / p >
< pre class = "brush: js" >
function(userData, plotObject, options) {
...
return data;
}
< / pre >
< p > Where userData is whatever data was passed into the plot, plotObject is a reference back to the plot itself, and options are any options passed into the plots "dataRendererOption" option. The following example shows a more complicated example which uses ajax pulls data from an external json data source.< / p >
< div id = "chart2" style = "height:300px; width:500px;" > < / div >
< pre class = "code prettyprint brush: js" > < / pre >
< script class = "code" type = "text/javascript" >
$ ( document ) . ready ( function ( ) {
// Our data renderer function, returns an array of the form:
// [[[x1, sin(x1)], [x2, sin(x2)], ...]]
var sineRenderer = function ( ) {
var data = [ [ ] ] ;
for ( var i = 0 ; i < 13 ; i += 0.5 ) {
data [ 0 ] . push ( [ i , Math . sin ( i ) ] ) ;
}
return data ;
} ;
// we have an empty data array here, but use the "dataRenderer"
// option to tell the plot to get data from our renderer.
var plot1 = $ . jqplot ( 'chart1' , [ ] , {
title : 'Sine Data Renderer' ,
dataRenderer : sineRenderer
} ) ;
} ) ;
< / script >
< script class = "code" type = "text/javascript" >
$ ( document ) . ready ( function ( ) {
// Our ajax data renderer which here retrieves a text file.
// it could contact any source and pull data, however.
// The options argument isn't used in this renderer.
var ajaxDataRenderer = function ( url , plot , options ) {
var ret = null ;
$ . ajax ( {
// have to use synchronous here, else the function
// will return before the data is fetched
async : false ,
url : url ,
dataType : "json" ,
success : function ( data ) {
ret = data ;
}
} ) ;
return ret ;
} ;
// The url for our json data
var jsonurl = "./jsondata.txt" ;
// passing in the url string as the jqPlot data argument is a handy
// shortcut for our renderer. You could also have used the
// "dataRendererOptions" option to pass in the url.
var plot2 = $ . jqplot ( 'chart2' , jsonurl , {
title : "AJAX JSON Data Renderer" ,
dataRenderer : ajaxDataRenderer ,
dataRendererOptions : {
unusedOptionalUrl : jsonurl
}
} ) ;
} ) ;
< / 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" language = "javascript" type = "text/javascript" src = "../plugins/jqplot.json2.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 >
