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

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

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