Black canvas on chrome

[GoogleCodeExporter]

Hi, trying to create stacked area chart and chrome ends up with a solid black 
canvas. Firefox and safari are ok

Here's the code that produces the chart:

<script type="text/javascript">
//<![CDATA[
    $(function(){
      el = $("#placeholder_transactions_revenue_chart");

      placeholder_transactions_revenue_chart_options = {"yaxis":{"tickFormatter":currencyTickFormatter,"position":"right","labelWidth":50,"min":0},"xaxis":{"mode":"time","ticks":[1333857600000,1334462400000,1335067200000,1335672000000,1336276800000,1336881600000,1337486400000,1338091200000,1338696000000]},"legend":{"show":false},"series":{"lines":{"fill":0.7,"show":true},"stack":true,"bars":{"show":false}},"grid":{"color":"#666","coloredAreas":weekendAreas,"hoverable":true}}
      placeholder_transactions_revenue_chart_data = [{"color":"#FFFFB3","data":[[1333857600000,"2282.22"],[1333944000000,"2339.21"],[1334030400000,"1490.44"],[1334116800000,"1729.38"],[1334203200000,"1399.48"],[1334289600000,"1766.42"],[1334376000000,"2079.28"],[1334462400000,"2074.32"],[1334548800000,"2010.38"],[1334635200000,"1896.31"],[1334721600000,"1535.44"],[1334808000000,"1804.34"],[1334894400000,"1709.44"],[1334980800000,"2108.36"],[1335067200000,"1653.35"],[1335153600000,"2098.35"],[1335240000000,"2060.26"],[1335326400000,"1702.46"],[1335412800000,"1416.39"],[1335499200000,"1751.31"],[1335585600000,"2482.27"],[1335672000000,"1877.48"],[1335758400000,"2083.29"],[1335844800000,"1645.36"],[1335931200000,"2013.27"],[1336017600000,"1636.31"],[1336104000000,"1883.26"],[1336190400000,"2118.36"],[1336276800000,"2462.27"],[1336363200000,"1973.38"],[1336449600000,"1774.3"],[1336536000000,"1955.29"],[1336622400000,"2353.2"],[1336708800000,"2054.31"],[1336795200000,"1341.42"],[1336881600000,"2454.32"],[1336968000000,"1966.31"],[1337054400000,"2330.31"],[1337140800000,"1623.47"],[1337227200000,"1730.36"],[1337313600000,"2261.22"],[1337400000000,"2462.2"],[1337486400000,"2465.28"],[1337572800000,"1914.36"],[1337659200000,"2489.19"],[1337745600000,"1753.34"],[1337832000000,"1914.44"],[1337918400000,"1440.41"],[1338004800000,"2291.19"],[1338091200000,"1712.35"],[1338177600000,"2238.23"],[1338264000000,"1590.4"],[1338350400000,"1561.47"],[1338436800000,"2406.33"],[1338523200000,"1531.41"],[1338609600000,"1915.34"],[1338696000000,"1685.34"],[1338782400000,"2286.2"],[1338868800000,"2501.26"],[1338955200000,"1614.31"],[1339041600000,"1898.28"]],"label":"SampleApp1"}]
      placeholder_transactions_revenue_chart_plot = $.plot('#placeholder_transactions_revenue_chart', placeholder_transactions_revenue_chart_data, placeholder_transactions_revenue_chart_options)

previousPoint = {}
$("#placeholder_transactions_revenue_chart").bind("plothover", function (event, 
pos, item) {
  if (item) {
    if (previousPoint["placeholder_transactions_revenue_chart"] != item.datapoint) {
      previousPoint["placeholder_transactions_revenue_chart"] = item.datapoint;
      var x = item.datapoint[0],
          y = item.datapoint[1];
      if (item.datapoint.length > 2) {
        y -= item.datapoint[2]
      };
      date = new Date(x)
      if ("placeholder_transactions_revenue_chart".indexOf("total") != -1 || "placeholder_transactions_revenue_chart".indexOf("revenue") != -1) {
        y = number_to_currency(y)
      };
      tooltip = y + " on " + $.datepicker.formatDate("D M d yy", date)
      chart_tooltip(item.pageX, item.pageY, tooltip);
    }
  } else {
    $('#chart_tooltip').hide();
  }
});
    })

//]]>
</script>

and here are the helper functions referenced above
<script>
function weekendAreas(plotarea) {
    var areas = [];
    var d = new Date(plotarea.xmin);
    // go to the first Saturday
    d.setDate(d.getDate() - ((d.getDay() + 1) % 7))
    d.setSeconds(0);
    d.setMinutes(0);
    d.setHours(0);
    var i = d.getTime();
    do {
        areas.push({ x1: i, x2: i + 1 * 24 * 60 * 60 * 1000 });
        i += 7 * 24 * 60 * 60 * 1000;
    } while (i < plotarea.xmax);

    return areas;
}

function currencyTickFormatter(val,axis) {
  return number_to_currency(val, {"precision": 0})
}
function chart_tooltip(x, y, contents) {
  el = $('#chart_tooltip');
  if (el.length == 0) {
    el = $('<div id="chart_tooltip"></div>').appendTo("body")
    el.css( {
      position: 'absolute',
      display: 'none',
      border: '1px solid #fdd',
      padding: '2px',
      'background-color': '#fee',
      'font-size': 'smaller',
      opacity: 0.80})
  };
  el.html(contents).css({top: y + 5, left: x + 10}).fadeIn(200);
}

function number_to_currency(number, options) {
  try {
    var options   = options || {};
    var precision = options["precision"] == null ? 2 : options["precision"];
    var unit      = options["unit"] || "$";
    var separator = precision > 0 ? options["separator"] || "." : "";
    var delimiter = options["delimiter"] || ",";
    var parts = parseFloat(number).toFixed(precision).split('.');
    if (precision == 0) {      
      return unit + number_with_delimiter(parts[0], delimiter);      
    } else {
      return unit + number_with_delimiter(parts[0], delimiter) + separator + parts[1].toString();      
    }
  } catch(e) {
    return number
  }
}

function number_with_delimiter(number, delimiter, separator) {
  try {
    var delimiter = delimiter || ",";
    var separator = separator || ".";

    var parts = number.toString().split('.');
    parts[0] = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + delimiter);
    return parts.join(separator);
  } catch(e) {
    return number
  }
}

</script>

UPDATE: It looks like its some kind of conflict with some other jquery plugin 
I'm using, when I setup this on JSFiddle it works fine. 
http://jsfiddle.net/fEUxb/ 

Original issue reported on code.google.com by corey.ma...@gmail.com on 8 Jun 2012 at 3:30

Attachments:

• chrome.png

[GoogleCodeExporter]

sorry you can close/disregard this. appears chrome was just being a douche.

Original comment by corey.ma...@gmail.com on 8 Jun 2012 at 3:44

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 8 Jun 2012 at 6:31

• Changed state: Invalid

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 10 Jul 2012 at 11:41