Just as there is a default array of colors for data series in jqPlot, there is a separate array of colors used for negative values. We want the color of the negative bars in our waterfall chart to match our color scheme. We also want to modify the layout of the chart. We open our previous waterfall chart, 1168_08_03.html
, as a new file and begin making the following modifications:
We add in
themes.js
and create a version of thedataPull
function to pass each JSON object to our data array. We also connect the data to our remote JSON feed as follows:<script src="../js/themes.js"></script> <script> $(document).ready(function(){ function dataPull(rd,options) { return [[rd.revenue, rd.operating_expenses, rd.fixed_costs, rd.returns]]; } var waterFall = $.jqplot ('waterFall', 'data/revenue_expenses.json', {
We set
backgroundColor
for our grid and set the options to pull our remote data. We also setseriesColors...