Monthly Archives: November 2011


How to use date on google scatter chart 2

The google visualization api limits you to using numeric values for both the X and Y axis, but there is a trick you can do with the google image chart api to covert the value to a date as below. Use JavaScript’s Date() object for the conversion. It would be nice if we could just specify the column as a string like data.addColumn(‘string’, ‘Date’), but the chart still will not accept the string. It will accept a date object though. The next task is to format the date string, it appears google accounts for with the google.visualization.DateFormat method, but it does not work. In the end, I had to accept the formatting provided by the chart of “15 Nov 2011” as the format for a “datetime” column, which looked better than the format displayed for a “date” column.

    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Date');
    data.addColumn('number', 'Quantity');
    data.addRow([new Date(2011, 0, 1), 10])
    data.addRow([new Date(2011, 1, 1), 15])
    data.addRow([new Date(2011, 2, 1), 12])
    data.addRow([new Date(2011, 3, 1), 18])
    data.addRow([new Date(2011, 4, 1), 17])
    data.addRow([new Date(2011, 5, 1), 19])
    data.addRow([new Date(2011, 6, 1), 25])
    data.addRow([new Date(2011, 7, 1), 18])
    data.addRow([new Date(2011, 8, 1), 24])
    data.addRow([new Date(2011, 9, 1), 28])
    data.addRow([new Date(2011, 10, 1), 27])
    data.addRow([new Date(2011, 11, 1), 34])
 
 
    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById('chart'));
    chart.draw(data, {title: 'Test',
                      width: 600, height: 400,
                      vAxis: {title: "cr"},
                      hAxis: {title: "time"}
                      }
              );

Reset button doesn’t work on selected=”selected” form element

Using Zend_Form, it generated a select element where the selection option had an attribute of selected=”selected” instead of just adding “selected” to the element. The form’s reset button no longer works on this element. Because it’s being generated, I can’t simply change how the attribute is specified in the element, so I used some JavaScript to reset all the form elements when a reset button is clicked. If you have multiple forms and multiple reset buttons, then you’ll need to modify this to point at a specific form’s elements rather than all on a page.

 $("input:reset").click(function(event) {
	 event.preventDefault();
 
	// Whitelist of fields to minimize unintended side effects.
	$(':text, :password, :file, SELECT', 'form').val('');
 
	// De-select any checkboxes, radios and drop-down menus
	$(':input').removeAttr('checked').removeAttr('selected');
	$("select").find('option').removeAttr("selected");
 });