Hello,

I have pieced together bits of code (am a newbie) to create a series of drop down lists that are used to navigate to sections of an interactive chart. It uses the onClick event to make a selection. I'm wondering if anyone has a idea about the best way to get this to function in Safari and Chrome (it works perfectly on Firefox and Opera).

I have included an example of the code for zooming by month, but I also have an option for zooming by fortnight, week and day. The code is found below.

Thanks in advance for any advice!


HTML Extract:

<table>
<tr>
<td><b>Zoom Month:</b></td>
<td>
<select>
<option value="Jan">Select Month</option>
<option value="Jan" onclick="zoomGraphX(1325336400000, 1328014800000)">January</option>
<option value="Feb" onclick="zoomGraphX(1328014800000, 1330520400000)">February</option>
<option value="Mar" onclick="zoomGraphX(1330520400000, 1333198800000)">March</option>
<option value="Apr" onclick="zoomGraphX(1333198800000, 1335794400000)">April</option>
<option value="May" onclick="zoomGraphX(1335794400000, 1338472800000)">May</option>
<option value="Jun" onclick="zoomGraphX(1338472800000, 1341064800000)">June</option>
<option value="Jul" onclick="zoomGraphX(1341064800000, 1343743200000)">July</option>
<option value="Aug" onclick="zoomGraphX(1343743200000, 1346421600000)">August</option>
<option value="Sep" onclick="zoomGraphX(1346421600000, 1349013600000)">September</option>
<option value="Oct" onclick="zoomGraphX(1349013600000, 1351688400000)">October</option>
<option value="Nov" onclick="zoomGraphX(1351688400000, 1354280400000)">November</option>
<option value="Dec" onclick="zoomGraphX(1354280400000, 1356872400000)">December</option>
</select>
</td>
</tr>
</table>

Javascript zoom script:

var minDate = g.xAxisRange()[0];
var maxDate = g.xAxisRange()[1];
var minValue = g.yAxisRange()[0];
var maxValue = g.yAxisRange()[1];
showDimensions(minDate, maxDate, [minValue, maxValue]);

function showDimensions(minDate, maxDate, yRanges) {
showXDimensions(minDate, maxDate);
showYDimensions(yRanges);
}

function showXDimensions(first, second) {
var elem = document.getElementById("xdimensions");
elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]";
}

function showYDimensions(ranges) {
var elem = document.getElementById("ydimensions");
elem.innerHTML = "valueRange : [" + ranges + "]";
}

function zoomGraphX(minDate, maxDate) {
g.updateOptions({
dateWindow: [minDate, maxDate]
});
showXDimensions(minDate, maxDate);
}

function zoomGraphY(minValue, maxValue) {
g.updateOptions({
valueRange: [minValue, maxValue]
});
showYDimensions(g.yAxisRanges());
}

function unzoomGraph() {
g.updateOptions({
dateWindow: null,
valueRange: null
});
}

function panEdgeFraction(value) {
g.updateOptions({ panEdgeFraction : value });
}

// end new zoom script