title: dimplejs scatterplot showing up differently second time generated on page
body: <p>I have a function that creates three scatterplots using dimplejs on the same page.  I pass in a number of variables you can see in the code below.  The first scatterplot generates perfect, but the second and third have issues with the X Axis dates not turning vertical, and the y axis description gets moved closer to the axis and stuck behind the details.</p>
  
  <p>Here is a jfiddle of the data to visualize what it looks like...the first one is good, the second not so much. <a href="http://jsfiddle.net/4VU7w/" rel="nofollow">http://jsfiddle.net/4VU7w/</a> </p>
  
  <p>Is this an issue with dimplejs?</p>
  
  <pre><code>....blah blah blah...
      print_dimple_scatterplot_time($speco_arrival_times,$div_to_display_in,'date', 'Arrival Time',
                                  'Date of Arrival','Truck Arrival Time','Inbound Trucks to '.$site_name,'Circles Represent Truck Arrival Times');
  
  
  
  
  function print_dimple_scatterplot_time($source_array,$location_div,$x_key_field_name, $y_key_field_name,
                                      $xAxis_name,$yAxis_name,$chart_title,$legend_desc){
  
  /*****Example
  $x_key_field_name = 'date'
  $y_key_field_name = 'Arrival Time'
  $legend_desc = 'Circles Represent Truck Arrival Time'
  *******/
  
  $insert_string = json_encode($source_array);
  
  $to_print_string = &lt;&lt;&lt;EOT
  &lt;script type="text/javascript"&gt; 
              var data = {$insert_string};
  
              var svg = dimple.newSvg("#{$location_div}", 900, 400);
  
              // Draw a standard chart using the aggregated data
              var chart = new dimple.chart(svg, data);
              chart.setBounds(100, 50, 800, 250) //(x,y,width,height)
              var x = chart.addCategoryAxis("x", "{$x_key_field_name}");
              x.addOrderRule("date");
              x.showGridlines = true; //add vertical grid lines
              var y = chart.addTimeAxis("y", "{$y_key_field_name}", "%H:%M", "%H:%M");
              y.timePeriod = d3.time.hours;
              y.timeInterval = 1;
              y.showGridlines = true; //add horizontal grid lines
              y.overrideMin = d3.time.format("%H:%M").parse("00:00");
              y.overrideMax = d3.time.format("%H:%M").parse("23:59");
  
              // Override color
              chart.defaultColors = [
               new dimple.color("#0000A0")
              ];
  
              var s = chart.addSeries("date", dimple.plot.bubble);
  
              chart.draw();
  
              //added so zeros don't show up.
              s.shapes.style("opacity", function (d) {
                  return (d.y === "" ? 0 : 0.6);
              });
  
              x.shapes.selectAll("text").attr("transform",
                  function (d) {
                    return d3.select(this).attr("transform") + " translate(0, 0) rotate(0)"; //translate(x left and right, y up and down)
                  });
  
              x.titleShape.text("{$xAxis_name}"); //name x axis
              x.titleShape.attr("y",chart.height+125); //move where x-axis is
  
              y.titleShape.text("{$yAxis_name}"); //name y axis
              y.titleShape.attr("y", 175); //move where y-axis is
  
              //Add Title
              svg.append("text")
                  .attr("x", 275 )//(width / 2))             
                  .attr("y", 20) //0 - (margin.top / 2))
                  .attr("text-anchor", "middle")  
                  .style("font-size", "20px") 
                  .style("text-decoration", "underline")  
                  .text("{$chart_title}");
  
              //Add Custom Legend
              svg.append("circle")
                  .attr("cx", 500 )//(width / 2))             
                  .attr("cy", 15) //0 - (margin.top / 2))
                  .attr("r",5);
  
              //Add Customs Legend Text
              svg.append("text")
                  .attr("x", 510 )//(width / 2))             
                  .attr("y", 20) //0 - (margin.top / 2))
                  .attr("text-anchor", "left")  
                  .style("font-size", "12px") 
                  .style("text-decoration", "underline")  
                  .text("{$legend_desc}");
  
          &lt;/script&gt;
  EOT;
  
  echo $to_print_string;
  
  
  }
  </code></pre>