Jump to content
JChartFX Community
  • 0
rolf

Adding a table inside the LegendBox

Question

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

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

 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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0


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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×