chartapp.xml

在流览器上仿CS界面的JAVASCRIPT脚本

<?xml version="1.0"?>

<application>

	<window caption="Chart Application" width="500" height="350" centered="true"/>


	<resources>
		<script><![CDATA[

function ChartApp() {
	var win = application.getWindow();

	// create graph from the XML file. This loads the XML synchronously.
	var graph = BiGraph.fromUri("chartdata.xml");
	var leftPane = new BiComponent;
	var splitPane = new BiSplitPane("horizontal", leftPane, graph);

	graph.setBorder( new BiBorder(2, "inset") );
	graph.setBackColor("#cfe0f2");

	win.add(splitPane);
	splitPane.setLocation(3, 3);
	splitPane.setRight(3);
	splitPane.setBottom(3);

	// we can now call update because the graph has been added to the window
	graph.update();



	// Left Pane

	var chartTypeCombo = new BiComboBox([
		"bar",
		"column",
		"grid",
		"line",
		"pie",
		"percentagestackedbar",
		"percentagestackedcolumn",
		"stackedbar",
		"stackedcolumn"
	]);

	leftPane.add(chartTypeCombo);
	chartTypeCombo.setLocation(5, 5);
	chartTypeCombo.setRight(5);

	chartTypeCombo.findString(graph.getChartType()).setSelected(true);

	function makeSelectableLabel() {
		var tf = new BiTextField;
		tf.setPadding(0);
		tf.setLeft(5);
		tf.setRight(5);
		tf.setBackColor("transparent");
		tf.setBorder( new BiBorder(0) );
		tf.setReadOnly(true);
		var f = new BiFont();
		f.setBold(true);
		tf.setFont( f );
		return tf;
	}

	//
	var seriesLabel = new BiLabel("Series:");
	seriesLabel.setLocation(5, 40);
	seriesLabel.setRight(5);
	leftPane.add(seriesLabel);

	var seriesField = makeSelectableLabel();
	seriesField.setTop(55);
	leftPane.add(seriesField);

	var categoryLabel = new BiLabel("Category:");
	categoryLabel.setLocation(5, 80);
	categoryLabel.setRight(5);
	leftPane.add(categoryLabel);

	var categoryField = makeSelectableLabel();
	categoryField.setTop(95);
	leftPane.add(categoryField);

	var valueLabel = new BiLabel("Value:");
	valueLabel.setLocation(5, 120);
	valueLabel.setRight(5);
	leftPane.add(valueLabel);

	var valueField = new BiSpinner();
	valueField.setEnabled(false);
	valueField.setMaximum(10000);
	valueField.setMinimum(-10000);
	valueField.setLocation(5, 135);
	valueField.setRight(5);
	leftPane.add(valueField);

	var updateButton = new BiButton("Update");
	updateButton.setLeft(5);
	updateButton.setRight(5);
	updateButton.setBottom(5);
	updateButton.setToolTipText("This updates the entire graph to recalculate the axis and grid lines");
	leftPane.add(updateButton);

	var currentCategory, currentSeries;

	// events
	chartTypeCombo.addEventListener("change", function (e) {
		graph.setChartType(chartTypeCombo.getSelectedItem().getText());
		graph.update();
	});

	// listen for clicks on the points
	graph.addEventListener("pointclick", function (e) {
		// store info for later use
		currentSeries = e.getSeries();
		currentCategory = e.getCategory();
		// update fields
		valueField.setValue( e.getSeries().getValueByCategory(e.getCategory()) );
		seriesField.setText( e.getSeries().getTitle() );
		categoryField.setText( e.getCategory().getTitle() );
		valueField.setEnabled(true);
	});

	// when changing the value update the point value and update the graph
	valueField.addEventListener("change", function (e) {
		if (currentSeries && currentCategory) {
			currentSeries.setValueByCategory(currentCategory, valueField.getValue());
			graph.updatePoint(currentSeries.getId(), currentCategory.getId());
		}
	});

	updateButton.addEventListener("action", function (e) {
		graph.update();
	});
}


ChartApp.main = function () { new ChartApp; };

		]]></script>
	</resources>
</application>