Facet Chart labels and displaying data values

[senordhuff]

Hi there,

Apologies if these questions are documented somewhere. But, I looked through the APIs and examples and couldn't see an answer anywhere.

1. Is there a way to add custom labels to a chart and place them on the chart? Look at the attached sample. I'm referring to the "S&P 500 in Range=86.6%" label at the top. Also, the green "52 week hi" and green "52 week lo" labels along the x axis. Finally, the "Lower is Better" and "Higher is Better" labels you see on the bars? Are any of those things possible?

2. Is it possible to have data values always appear like you see on the attached chart assuming there is room in the chart to display the values?

[Isomorphic]

1. Yes, you can use either DrawLabel or a true Label (as an absolutely positioned child of the DrawPane) to add labels like these. getChartLeft() and similar APIs give you the basic chart geometry needed for placement.

2. If you mean the labels inside the bars, you could draw such labels yourself, same approach as #1. getDrawnValue() will give you the geometry necessary to place them. You would need to determine whether there's room for the text label by measuring the text before drawing, for example, by placing identically-styled text into an offscreen Canvas and checking getScrollWidth().

[yasodach]

@senordhuff

hi could you please povide the code for your chartImage snapshot....i want to display data on chart in Smartclient but i am unable to display by using showDataValues() method.....please suggest me...urgent

[yasodach]

how to display data on chart

how to display data on chart...i have use showDataValues() method also but i am not getting the data on chat,data are just displaying when mouse goes to data points. my code is:

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},

{region: "West", product: "Trucks", sales: 23},
{region: "North", product: "Trucks", sales: 45},
{region: "East", product: "Trucks", sales: 32},
{region: "South", product: "Trucks", sales: 67},

{region: "West", product: "Motorcycles", sales: 12},
{region: "North", product: "Motorcycles", sales: 4},
{region: "East", product: "Motorcycles", sales: 23},
{region: "South", product: "Motorcycles", sales: 45}
]


isc.FacetChart.create({
ID: "simpleChart",

facets: [{
id: "region",
title: "Region"
},{
id: "product",
title: "Product"
}],

data: chartData,
valueProperty: "sales",
chartType: "Area",
showDataValues: true,
showDataPoints: true,
title: "Sales by Product and Region"
});




isc.DynamicForm.create({
ID: "chartSelector",
items: [{
name: "chartType",
title: "Chart Type",
type: "select",
valueMap: isc.FacetChart.allChartTypes,
defaultValue: "Area",
changed : function (form, item, value) {
simpleChart.setChartType(value)
}
}]
});



chartSelector.observe(simpleChart, "setChartType", "chartSelector.getItem('chartType').setValue(simpleChart.chartType)");



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