Opened 8 years ago

Closed 7 years ago

#14766 closed defect (invalid)

The graph will not be shown

Reported by: solarfriend Owned by: solarfriend
Priority: undecided Milestone: tbd
Component: Charting Version: 1.7.1
Keywords: Cc: cjolif
Blocked By: Blocking:

Description (last modified by bill)

We have developed a tool to calculate the dew point with a dojox.charting.Chart2D chart. It works in all browsers except in all versions of the internet explorer. Where is the bug? The tool is on the following site: http://www.modernus.de/online-taupunkt-rechner/auswirkung-raumluft-temperatur-feuchtigkeit-taupunkt-berechnen THX

<script type="text/javascript">

	var minHumidity = 35;
	
	var setAxisTitle = function(chart, axisname, title, fontsizept) {
	    var axis = chart.axes[axisname];
	    var dim = chart.dim;
	    var offsets = chart.offsets;
	    var ta = chart.theme.axis;
	    var taFont = "font" in chart.theme.axis ? axis.opt.font : ta.font;
	    var x;
	    var y;
	    var label;
	    var rotate=0;
	    if(axis.vertical) {
	       rotate=270
	       label = title;
	       y=dim.height/2  - offsets.b/2;
	       x=0+2 * fontsizept;
	    } else {
	       label = title;
	       x=dim.width/2 + offsets.l/2;
	       y=dim.height-fontsizept/2;
	    }
	    var m = dojox.gfx.matrix;
	    var elem = axis.group.createText({x:x, y:y, text:label, align: "middle"});
	    elem.setFont({family:"Arial", size: fontsizept+"pt" /*, weight: "bold"*/});
	    elem.setFill("#375766");
	    elem.setTransform(m.rotategAt(rotate, x,y)); 
	}

	// calculate dev point
	
	var calcDewPoint = function(temp, humidity, round){
		
		var paramA, paramB;
		
		if(temp >= 0)
        {
			paramA = 7.5;
			paramB = 237.3;
		}
		else
		{
        	paramA = 7.6;
        	paramB = 240.7;
		}
		
		var sdd = 6.1078 * Math.pow(10,((paramA * temp)/(paramB + temp)));
		var dd = humidity/100 * sdd;		
		var v =  (Math.log(dd / 6.1078) / Math.log(10)); //Math.log(val) / Math.log(10) => log with base 10
		
		var dewPoint = (paramB * v) / (paramA - v);
		
		if(round)
		{
			dewPoint = ((Math.round(dewPoint * 10)) / 10);
		}
		
		return dewPoint;
		
	}
	
	
	// create chart
	  
	var createChart = function(temp, humidity){
		
		if(dojo.byId("chart"))
		{
			dojo.destroy("chart");
		}
		
		dojo.create("div", {
			id : "chart",
			style:  "width: 100%; height: 100%;"
		}, "chartContainer");
		
		var uncriticalTempSeries = [];
		var criticalTempSeries = [];
        
        var dewPoint = calcDewPoint(temp, humidity, false);
        
        var subCalc;
        
        for(var i = 100; i >= minHumidity; i = i - 5)
        {	
        	var tempPoint = {};
        	
        	subCalc = Math.pow(10 ,((7.5 * dewPoint) / (237.3 + dewPoint))) / (i / 100);
        
        	tempPoint.x = 237.3 * (Math.log(subCalc) / Math.log(10)) / (7.5 - (Math.log(subCalc) / Math.log(10)));
        	
        	tempPoint.y = i;
        	
        	if(i > 80)
        	{
        		criticalTempSeries.push(tempPoint);
        	}
        	else if (i == 80)
        	{
        		criticalTempSeries.push(tempPoint);
        		uncriticalTempSeries.push(tempPoint);
        	}
        	else
        	{
        		uncriticalTempSeries.push(tempPoint);
        	}
        }
		
		var chart = new dojox.charting.Chart2D("chart");
		//chart.addPlot("default", {type: "Lines"});
		chart.addPlot("other", {type: "Areas", hAxis: "other x", vAxis: "other y"});
		//chart.addAxis("x", {includeZero: true, stroke: "#375766", fontColor: "#375766"});
		//chart.addAxis("y", {vertical: true, stroke: "#375766", fontColor: "#375766"});
		chart.addAxis("other x", {includeZero: true, stroke: "#375766", fontColor: "#375766"});
		chart.addAxis("other y", {title: "x-axis", vertical: true, stroke: "#375766", fontColor: "#375766"});
		//chart.addAxis("other x", {leftBottom: false});
		//chart.addAxis("other y", {vertical: true, leftBottom: false});
		//chart.addSeries("Series 1", [0, 1.5, 2, 2, 3, 4, 5, 5, 7]);
		//chart.addSeries("Series 1", [{x: 1, y: 5}, {x: 1.5, y: 1.7}, {x: 2, y: 9}, {x: 5, y: 3}]);
		//chart.addSeries("Series 2", [0, 1, 1, 4, 2, 1, 6, 4, 3], {plot: "other", stroke: {color:"lightblue"}, fill: "lightblue"});
		//chart.addSeries("Series 1", tempSeries, {stroke: {color:"#375766"}});
		chart.addSeries("Series 1", uncriticalTempSeries, {plot: "other", stroke: {color:"#a0bdcd"}, fill: "#a0bdcd"});
		chart.addSeries("Series 2", criticalTempSeries, {plot: "other", stroke: {color:"#ff9900"}, fill: "#ff9900"});
		
		chart.render();
		
		setAxisTitle(chart,"other x","Raumluft-Temperatur in °C",8);
		setAxisTitle(chart,"other y","Raumluft-Feuchtigkeit in %",8);

	}

    dojo.require("dijit.form.Slider");
    dojo.require("dijit.form.TextBox");
    
    dojo.require("dojox.charting.Chart2D");
    dojo.require("dojox.gfx.matrix");
    
    dojo.addOnLoad(function() {
		
		var currentTemp = 20
		
		dojo.byId("currentTemp").innerHTML = currentTemp + " °C";
		
		var currentHumidity = 60;
		
		dojo.byId("currentHumidity").innerHTML = currentHumidity + " %";
		
        var sliderTemp = new dijit.form.HorizontalSlider({
            name: "slider",
            value: currentTemp,
            minimum: 0,
            maximum: 30,
            discreteValues: 31,
            //intermediateChanges: false,
            style: "width: 100%;",
            onChange: function(value) {
            	currentTemp = value;
            	
                dojo.byId("currentTemp").innerHTML = currentTemp + " °C";
                
                dojo.byId("taupunkt").innerHTML = calcDewPoint(currentTemp, currentHumidity, true) + " °C";
                
                createChart(currentTemp, currentHumidity);
            }
        },
        "sliderTemp");
        
        var sliderHumidity = new dijit.form.HorizontalSlider({
            name: "slider",
            value: currentHumidity,
            minimum: minHumidity,
            maximum: 95,
            discreteValues: 61,
            //intermediateChanges: true,
            style: "width: 100%;",
            onChange: function(value) {
            	currentHumidity = value;
            	
                dojo.byId("currentHumidity").innerHTML = currentHumidity + " %";
                
                dojo.byId("taupunkt").innerHTML = calcDewPoint(currentTemp, currentHumidity, true) + " °C";
                
                createChart(currentTemp, currentHumidity);
            }
        },
        "sliderHumidity");
        
        dojo.byId("taupunkt").innerHTML = calcDewPoint(currentTemp, currentHumidity, true) + " °C";
        
        createChart(currentTemp, currentHumidity);

    });
    
</script>

Change History (4)

comment:1 Changed 8 years ago by bill

Component: GeneralCharting
Description: modified (diff)
Owner: set to Eugene Lazutkin

comment:2 Changed 8 years ago by cjolif

Cc: cjolif added

It is very hard to tell what's happening because your example is not fully runnable. Please try to isolate your issue in a simple and fully runnable example that reproduces it so that we can investigate it.

Meanwhile you can: 1/ for IE9 change your HTML DTD to HTML5 to benefit from SVG on IE9 instead of fallbacking to VML 2/ Try to keep your "chart" div in the DOM instead of creating it just before the chart is created. I suspect this might be a the origin of your problem.

comment:3 Changed 8 years ago by cjolif

Owner: changed from Eugene Lazutkin to solarfriend
Status: newpending

comment:4 Changed 7 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Note: See TracTickets for help on using tickets.