Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Click method ignored in FacetChart

    We are running some code in production that used to work, but doesn't seem to work any more. We have a method that ran on click of a FacetChart bar, but the click is completely ignored in Firefox 33+, Chrome 39.0.2171.65, and IE 11.0.9600.17420.

    Is this a bug, or am I doing something wrong here?

    Prod SC version (where it works): v9.0p_2014-01-29/Pro Deployment (built 2014-01-29)
    Dev SC version (code attached): v9.1p_2014-06-26/Pro Development Only (built 2014-06-26)

    Code:
    <!doctype html>
<html>
<head>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_History.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Calendar.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_RichTextEditor.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_PluginBridges.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Drawing.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Charts.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>

<body>
	<script>

var chartData = [
	{region: "West",  product: "Cars", sales: 37},
	{region: "North", product: "Cars", sales: 29},
	{region: "East",  product: "Cars", sales: 80},
	{region: "South", product: "Cars", sales: 87},
]

	isc.defineClass("DriverDrawRect","DrawRect").addProperties({
		canHover: true,
		showHover: true,
		cursor: "pointer",
		lineWidth: 1,
		rounding: 0.5,
		lineCap: "round",
	});

	isc.DriverDrawRect.create({
		ID: "barChartProperties",
		click: function() {
				console.log("Clicked");
			}
	});
isc.FacetChart.create({
	ID: "simpleChart",
	height: "400px",
	width: "400px",
	barProperties: barChartProperties,
	// You use facets to define the ways in which you would like the chart to
	// break down the data. In this case, our data has two dimensions: region and product.
	facets: [{
		id: "region",    // the key used for this facet in the data above
		title: "Region"  // the user-visible title you want in the chart
	},{
		id: "product",
		title: "Product"
	}],
	data: chartData,        // a reference to our data above
	valueProperty: "sales", // the property in our data that is the numerical value to chart
	chartType: "Bar",
	title: "Sales by Product and Region"  // a title for the chart as a whole
});

// Overall layout

isc.VLayout.create({
	ID: "simpleChartLayout",
	width: "100%",
	height: "100%",
	membersMargin: 20,
	members: [simpleChart]
});


		</script>
</body>
</html>
    Tags: None
    #2
    This definitely would not be expected to work. "barProperties" should be passed a plain JavaScript Object, not an actual instance of a SmartClient class.

    This is always the case for fields that are of type "Properties". Notice how in the docs for barProperties, you can click on the word "Properties" to arrive at this explanation.

    Comment

      #3
      Is this what you mean? This doesn't appear to work either:

      Code:
      isc.FacetChart.create({
	ID: "simpleChart",
	height: "400px",
	width: "400px",
	barProperties: {
		canHover: true,
		showHover: true,
		cursor: "pointer",
		lineWidth: 1,
		rounding: 0.5,
		lineCap: "round",
		click: function() {
			console.log("Clicked");
		}
	},
	facets: [{
		id: "region",    // the key used for this facet in the data above
		title: "Region"  // the user-visible title you want in the chart
	},{
		id: "product",
		title: "Product"
	}],
	data: chartData,        // a reference to our data above
	valueProperty: "sales", // the property in our data that is the numerical value to chart
	chartType: "Bar",
	title: "Sales by Product and Region"  // a title for the chart as a whole
});

      Comment

        #4
        That corrects the usage issue we noted, however, this new code would still be expected to break the chart if it worked at all, since there are already event handlers added to bars.

        Why use this approach instead of the more general valueClick handler already provided by the FacetChart?

        Comment

          #5
          This was legacy code, so I can't answer why it was written that way, but rewriting it with valueClick did work. Thanks.

          Comment

          Previous template Next
          Working...
          X