Prof. Edition User - Issue in Re-construction of dhtmlXChart

Suite and Optimus Suite 5
#1

Hi,

I am using the professional version of dhtmlX api. My question relates to dhtmlXChart:

My dataset consists of 2 columns: #column1# & #column2#
Based on user input (radio-button), I need to construct my dhtmlXChart (pie chart 3D) in following manner:

if(radio-button-1.checked)
{
pieChart3D = new dhtmlXChart({
view: “pie3D”,
container: “chart”,
value: “#column1#”,
legend:{
width: 155,
align: “left”,
valign: “bottom”,
marker:{
type: “square”,
width: 15
},
template: “#industryName#”
},
tooltip:{
template:function(obj) {
var column1 = obj.column1;
var sum = pieChart3D.sum(“#column1#”);
var percent = Math.round(column1/sum*100) +“%”;
return column1 + " ; " + percent;
}
},
pieInnerText:function(obj){
var column1 = obj.column1;
var sum = pieChart3D.sum(“#column1#”);
var percent = Math.round(column1/sum*100) +“%”;
return column1 + " ; " + percent;
}

                    });

}
else if (radio-button-2.checked)
{
pieChart3D = new dhtmlXChart({
view: “pie3D”,
container: “chart”,
value: “#column2#”,
legend:{
width: 155,
align: “left”,
valign: “bottom”,
marker:{
type: “square”,
width: 15
},
template: “#industryName#”
},
tooltip:{
template:function(obj) {
var column2 = obj.column2;
var sum = pieChart3D.sum(“#column2#”);
var percent = Math.round(column2/sum*100) +“%”;
return column2 + " ; " + percent;
}
},
pieInnerText:function(obj){
var column2 = obj.column2;
var sum = pieChart3D.sum(“#column2#”);
var percent = Math.round(column2/sum*100) +“%”;
return column2 + " ; " + percent;
}

                    });

}

Now the issue that I’m facing is that I’m unable to reconstruct the variable pieChart3D. After constructing the variable pieChart3D, when I try to reconstruct it again, the pieChart disappears. I don’t understand why this is happening…

Kindly tell me how can I achieve the desired functionality.

#2

You may call destructor() method before calling chart contructor again. However, it would be better to redefine only certain properties:

/*default initialization*/ pieChart3D = new dhtmlXChart({ view: "pie3D", container: "chart", value: "#column1#", legend:{ width: 155, align: "left", valign: "bottom", marker:{ type: "square", width: 15 }, template: "#industryName#" }, tooltip:{ template:function(obj) { var column1 = obj.column1; var sum = pieChart3D.sum("#column1#"); var percent = Math.round(column1/sum*100) +"%"; return column1 + " ; " + percent; } }, pieInnerText:function(obj){ var column1 = obj.column1; var sum = pieChart3D.sum("#column1#"); var percent = Math.round(column1/sum*100) +"%"; return column1 + " ; " + percent; } });

if(radio-button-1.checked) { pieChart3D.define({ value: "#column1#", tooltip:{ template:function(obj) { var column1 = obj.column1; var sum = pieChart3D.sum("#column1#"); var percent = Math.round(column1/sum*100) +"%"; return column1 + " ; " + percent; } }, pieInnerText:function(obj){ var column1 = obj.column1; var sum = pieChart3D.sum("#column1#"); var percent = Math.round(column1/sum*100) +"%"; return column1 + " ; " + percent; } }) } else if (radio-button-2.checked) { pieChart3D.define({ value: "#column2#", tooltip:{ template:function(obj) { var column2 = obj.column2; var sum = pieChart3D.sum("#column2#"); var percent = Math.round(column2/sum*100) +"%"; return column2 + " ; " + percent; } }, pieInnerText:function(obj){ var column2 = obj.column2; var sum = pieChart3D.sum("#column2#"); var percent = Math.round(column2/sum*100) +"%"; return column2 + " ; " + percent; } }) }

#3

Thanks a lot. You saved me a lot of headache :slight_smile:

#4

Hi,

i have a problem when redefining chart properties for the legend.

Scenario is the following:

1 → create a chart instance
2 → call parse function to load data from a gridbox object

[Result]: a chart incl. legend is created and gets displayed correct

3 → redefine “legend” property “template” to print other values on the legend
4 → call the chart object´s refresh() function

[Result]: a legend gets created with the new settings AND gets printed over the old legend from the first call… :open_mouth:

To get a better understanding of my explaination I attached a screenshot…

Is there any possibility to refresh the legend as well?

#5

Hi,

try using dhtmlxchart.js and dhtmlxchart.css that are attached to the post:
viewtopic.php?f=8&t=16316

#6

Hi Alexandra,

thank you. The files solved my problem with the agenda, but now i have another one: the chart is not created correct any more …

→ see screenshot (i cut out the values of the legend)

Do you have any ideas?

#7

Hi,

we have recreated the problem locally. Please use attached file instead of the original.
dhtmlxchart.zip (35.1 KB)

#8

Hi Alexandra,

sorry for my late feedback. It works now - thank you!

One last question: Is it possible, that when initializing the chart component from a grid, which has paging activated and multiple pages as data source, the chart doesn´t initialize?
I ask, because i have this problem…

Additional Info: Chart component initializes well, if i click all grid pages through before creating the chart. Maybe this helps for your analyses…

br
Michael

#9

Hi,

do you use dynamic loading ? In this case you may try to use the following:

grid.attachEvent("onXLE",function(){ chart.clearAll(); chart.parse(grid,"dhtmlxgrid"); });

#10

No, i don´t…

#11

Hi Alexandra,

do you know any solution for non-dynamic loading as well…?

br
Michael

#12

Hi,

we need the demo to recreate the problem locally. Please attach it here (do not include dhtmlxgrid_png.js into the demo - it is PRO library).