Chart - custom button(s) in header/footer


#1

Can I put button(s) in the header or footer of the chart area? Particularly in the top, above the chart itself?


#2

Hello
You can do it the next two ways:

  1. using simple button with position absolute relative to the chart div container
  2. using dhtmlxToolbar buttons (i.e. it is very simple if you have chart in any dhtmlx container component, in my sample case - layout)
    Script:

var dataset = [ { id:1, sales:20, year:"02"}, { id:2, sales:55, year:"03"}, { id:3, sales:40, year:"04"}, { id:4, sales:78, year:"05"}, { id:5, sales:61, year:"06"} ]; var layout, toolbar, chartD, chartL; function buildchart() { layout = new dhtmlXLayoutObject("layoutObj","1C"); toolbar = layout.cells("a").attachToolbar(); layout.cells("a").hideHeader(); toolbar.setIconsPath('../dhtmlxSuite_v45_pro/codebase/imgs/'); toolbar.addButton("btn1", 0, "button"); chartD = new dhtmlXChart({ container: "chartObj", view:"bar", value:"#sales#", width:40, xAxis:{ template:"#year#" }, yAxis:{ start:0, end:80, step:20 } }); chartD.parse(dataset, "json"); chartL = layout.cells("a").attachChart({ view:"bar", value:"#sales#", width:40, xAxis:{ template:"#year#" }, yAxis:{ start:0, end:80, step:20 } }); chartL.parse(dataset, "json"); }
Body:

[code]


[/code] Result:

#3

Beautiful! just what I was looking for - I have just started looking at the menu and ribbon components, so this is a good first use :wink:


#4

Yes, sure, you can also use menu or ribbon. :slight_smile: You are welcome!


#5


Well, this almost works :wink:
When I use a jQuery modal dialog to display some calculations that were used to draw the chart, the jQuery dialog appears to be ‘behind’ the chart - no matter what I set the z-index of the dialog at. Before and after images are attached…
How do I get the modal dialog to appear ‘on top of’ the chart?


#6

Please, provide us a direct link or completed demo on support [a] dhtmlx.com to inspect this issue locally
docs.dhtmlx.com/auxiliary_docs__ … pport.html