Adding a table inside the LegendBox

[rolf]

I am using the following jquery script code:

$(document).ready(function ($) {

var items = [{"Count": 7, "Event": "Unexpected Loss of a Limb or a Function"},{ "Count": 2, "Event": "Major Medication Error Leading to Death or Major Morbidity"},{ "Count": 2, "Event": "Hemolytic Blood Transfusion Reaction"},{ "Count": 1, "Event": "Infant Discharged to Wrong Family"}];

$("div", ".Eventsenglish").chart({

gallery: cfx.Gallery.Bar,

dataValues: items,

allSeries: {

pointLabels: {

visible: true,

backgroundVisible: true,

format: "%v / %p%%"

}

},

LegendBox: {

visible: false

//dock: cfx.DockArea.Bottom

},

titles: [{

text: "Sentinel Events Frequency"

}]

});

});

Output is a nice figure, how can I have a table out of the same data inside a LegendBox within the figure

Thanks

[JuanC]

 I am afraid you will not be able to place a table inside the legend box, one possibility would be to remove the chart border and place the chart control along with an independent HTML table, if these 2 elements are inside a div you could even get them to look like a single element.

Another possibility would be to include jchartfx.advanced.js and set the DataGrid to be visible.

JuanC

[rolf]

Thank you Juan for the reply!

Both suggestions are interesting, and for the first one you are right. It's about having both, figure and table have the same look in a single element. For the second one (jchartfx.advanced.js) I still have no clue how it's done. I will try both and sure will post the output again.

Regards

[rolf]

Here what I got using "jchartfx.advanced.js"

1) In the head section use:

jquery-ui.css

jchartfx.css

bars.css (styles were found in Bars help just named it bars)

jquery.min.js

jquery.ui.min.js

jchartfx.system.js

jchartfx.coreVector.js

jchartfx.ui.js

jchartfx.advanced.js

2) The divider element

3) Then the script:

$(document).ready(function ($) {

var items = [{"Count": 7, "Event": "ULLF"},{ "Count": 2, "Event": "MMELDMM"},{ "Count": 2, "Event": "HBTR"},{ "Count": 1, "Event": "IDWF"}];

$("div", ".Eventsenglish").chart({

gallery: cfx.Gallery.Bar,

dataValues: items,

allSeries: {

pointLabels: {

visible: true,

backgroundVisible: true,

format: "%v / %p%%"

}

},

DataGrid: {

visible: true,

},

titles: [{ text: "Sentinel Events Frequency" }]

});

});

Thanks again for the help Hope it helps anyone