Chart not loading

.dhx_chart_title{ padding-left:3px } .dhx_axis_item_x{ font-size: 11px } .dhx_axis_item_y{ font-size: 11px } .dhx_chart_legend_item { font-size: 8px; }

var pieChart;
var barChart1,barChart2;
document.getElementById(‘chart_container1’).innerHTML=“”;
document.getElementById(‘chart_container2’).innerHTML=“”;

function LoadChart()
{

    document.getElementById('chart_container1').className="atch12ChartBox";
    document.getElementById('chart_container2').className="atch12ChartBox";
    /*pieChart =  new dhtmlXChart({
		view:"pie3D",
		container:"chart_container1",
		//label:"#id#",	
		value:"#data11#",	
		title:"chk",
		//pieInnerText: "<span style='font-size: 8pt;'>#data11#</span>", //"<b>#data11#</b>",	
		pieInnerText: function(obj)
	
		{
		    
		    return numberToCurrency(obj.data11,0,'$') ;
		
		},
		legend:
		{   
		    width:125,
		    template: "#id#",
		    align:"right",
		    valign:"top"
		    
		
		},
		

		width:30,
		gradient:true,
		border:false,
		color: function(obj)
		{			    
		    switch(obj.id.toString().toLowerCase())
		    {
		        case "approved":
		            return  "#65ad43"; // #7fc645 | #498031
		        case "in work":
		            return  "#0066cc";
		        case "in review":
		            return "#FF9900"; //"#ffe4e1";
		        case "cancelled":
		            return "#669";
		        case "submitted":
		            return "#ff6"; //f4c944 //f4e960
		    }
		    
		
		},			
		group:
		{
		    by:"#data2#",	
		    map:
		    {
		        data11:["#data11#",chart_customgroup]
		    }
		
		}
		
		
	});
	
	pieChart.clearAll();
	pieChart.parse(gdCaps,"dhtmlxgrid");
    */
    
    
    /*************************************************************/
    barChart2 =  new dhtmlXChart({
		view:"bar",
		container:"chart_container2",			
		value:"#data11#",			
		padding: {
        bottom: 30,
        right: 0,
        left: 70
        },
		width:20,
		gradient:true,
		border:false,
		label:"<span style='font-size: 6pt;font-style:italic;'>#data11#</span>",	
		xAxis:{
	        title: "Status",
	        template: "#id#",
            lines: false
        },
        yAxis:{	
            title: "No. of CAPs",
            template:function(obj) {
                var newValue = obj;
                return  newValue ;
            }
        },
        

		color: function(obj)
		{			    
		    switch(obj.id.toString().toLowerCase())
		    {
		        case "approved":
		            return "#65ad43";
		        case "in work":
		            return  "#0066cc";
		        case "in review":
		            return  "#FF9900"; //"#ffe4e1";
		        case "cancelled":
		            return "#669";
		        case "submitted":
		            return "#ff6";
		    }
		    
		
		},			
		
		group:
		{
		    by:"#data2#",	
		    map:
		    {
		        data11:["#data11#",chart_customgroup2]
		    }
		
		}
		
		
	});
	barChart2.clearAll();
	barChart2.parse(gdCaps,"dhtmlxgrid");
    
    barChart1 =  new dhtmlXChart({
		view:"bar",
		container:"chart_container1",			
		value:"#data11#",	
		label:function(obj)		
		{			    
		    var newValue = parseFloat(obj.data11)/1000000;
		    return  "<span style='font-size: 6pt;font-style:italic;'>" + numberToCurrency(newValue,2,'$') + " m</span>" ;			
		},
		
		//"<span style='font-size: 6pt;font-style:italic;'>#data11#</span>",			
		padding: {
        bottom: 30,
        right: 0,
        left: 70
        },
		width:20,
		gradient:true,
		border:false,
		
		xAxis:{
	        title: "Status",
	        template: "#id#",
            lines: false
        },
        yAxis:{	
            title: "CAP Value (million)",
            template:function(obj) {
                var newValue = obj/1000000;
                return  newValue ;
            }
        },
        

		color: function(obj)
		{			    
		    switch(obj.id.toString().toLowerCase())
		    {
		        case "approved":
		            return "#65ad43";
		        case "in work":
		            return  "#0066cc";
		        case "in review":
		            return  "#ffe4e1";
		        case "cancelled":
		            return "#669";
		        case "submitted":
		            return "#ff6";
		    }
		    
		
		},			
		
		group:
		{
		    by:"#data2#",	
		    map:
		    {
		        data11:["#data11#",chart_customgroup]
		    }
		
		}
		
		
	});
	barChart1.clearAll();
	barChart1.parse(gdCaps,"dhtmlxgrid");
    

}

function chart_customgroup(prop,data)
{

var count = data.length;
var summ = 0; 
var val=0;
for(var q = 0; q < count; q++){
    if(data[q].data1.toString().indexOf("000") != 0)   //Exclude CAP000
    {
        if(data[q].data11.toString().length>0)
            val=data[q].data11;
        else
            val=0;
        
        summ += parseFloat(val);
    }
}
return summ/2;

}

function chart_customgroup2(prop,data)
{

var count = data.length;  

if(data[0].data1.toString().indexOf("000") != -1)   //Exclude CAP000
    count= count-7; //Each cap has 6 row and 1 Total row of TCE
   
return count/7;

}

Please check ready chart samples

  • pie chart sample

dhtmlxSuite/dhtmlxChart/samples/04_pie_chart/03_3d_chart.html

  • if chart uses grid data

dhtmlxSuite/dhtmlxChart/samples/09_integration/01_dhtmlxgrid.html

If the issue is not solved, you may attach the complete demo where we could reproduce the problem:

docs.dhtmlx.com/doku.php?id=othe … leted_demo