Jump to content
JChartFX Community
  • 0

Adding a table inside the LegendBox


rolf

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

Link to comment
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

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...