Showing Line chart and the Line shoots up


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Steven on 2nd May 2014
I basically have a line graph with 3 lines. 2 of them continue to the end of the graph while the other one is required to stop at a certain point. However, this line is shooting way up past the top of the graph.

My code is below:

<HTML>
<HEAD>
<!--[if gt IE 8]><!-- -->
<LINK REL=STYLESHEET TYPE="text/css" HREF="/css/dashboard.css" TITLE="dashboardStyle">
<!--<![endif]-->
<!--[if lt IE 9]><LINK REL=STYLESHEET TYPE="text/css" HREF="/css/dashboard-old-ie.css" TITLE="dashboardStyle"><![endif]-->
<SCRIPT SRC="/js/jquery/jquery-1.10.2.min.js"></SCRIPT>
<SCRIPT SRC="/js/rgraph/rgraph.common.core.js"></SCRIPT>
<SCRIPT SRC="/js/rgraph/rgraph.common.core.js"></SCRIPT>
<SCRIPT SRC="/js/rgraph/rgraph.common.effects.js"></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.common.context.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.common.tooltips.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.common.zoom.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.common.key.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/Rgraph.gauge.js"></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.bar.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.line.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.pie.js" ></SCRIPT>
<!--[if gt IE 8]><!-- -->
<SCRIPT SRC="/js/rgraph/RGraph.common.annotate.js" ></SCRIPT>
<SCRIPT SRC="/js/rgraph/RGraph.common.dynamic.js" ></SCRIPT>
<!--<![endif]-->
<!--[if lt IE 9]><SCRIPT src="/js/excanvas/excanvas.original.js"></SCRIPT><![endif]-->
<SCRIPT>
function setCanvasSize(sCanvas, winW, nCols, origW, origH)
{
   var canvas = document.getElementById(sCanvas);
   var canvasCell = document.getElementById('td'+sCanvas);
   var cSpan = canvasCell.colSpan;
   var divisor = origW / origH;
   var maxW = (winW / nCols) * cSpan;
   var maxH = maxW / divisor;
   canvas.width = (origW < maxW) ? origW : maxW;
   canvas.height = (origW < maxW) ? origH : maxH;
}
function drawRGraph()
{
   var dbTable = document.getElementById('dbTable');
   var nCols = dbTable.rows[0].cells.length;
   var nOffset = 0;
   var cPadding = dbTable.cellPadding == '' ? 5 : Number(dbTable.cellPadding);
   var cSpacing = dbTable.cellSpacing == '' ? 1 : Number(dbTable.cellSpacing);
   nOffset = (cSpacing + cPadding) * nCols;
   var windowW = window.innerWidth - nOffset;

   if (!RGraph.ISOLD) {
     setCanvasSize("CM_PR_COST_LINE", windowW, nCols, 600,300);
   }
   var data1 = [[0,44138,82759,131035,169656,208277,256553,295174,295174,333795,382071,420692,459313,507589,546210,584831,633107,671728,720004,758625,797246,1122453,1391462,1708973,2012176,2391179,2694382,3097585,3424639,3808528,4197478,4652301,5106708,5221448,5221448,5292765,5364082,5453228,5524545,5595862,5685008,5756325,5826289,5941328,6038080,6128529,6197741,6266953,6336165,6422679,6491891,6561103,6661367,6745979,6851743,6896724,6922932,6945656,6946206,6946206,6946206,6946206],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,290663,924982,1759227,2091143,2122680,2145130,2155880,2155880],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,182063,290663,290663,,,,,,,]] ;

-- The comma's above (,,,,,,) are where that line should have no values.

   var chart1 = new RGraph.Line("CM_PR_COST_LINE", data1);
   chart1.Set("chart.labels", ["","","","31/Aug/07","","","","28/Dec/07","","","","28/Mar/08","","","","25/Jul/08","","","","28/Nov/08","","","","27/Mar/09","","","","31/Jul/09","","","","27/Nov/09","","","","26/Feb/10","","","","25/Jun/10","","","","29/Oct/10","","","","25/Feb/11","","","","24/Jun/11","","","","28/Oct/11","","","","24/Feb/12","",""]);
   chart1.Set("chart.axis.color", "black");
   chart1.Set("chart.xaxispos", "bottom");
   chart1.Set("chart.yaxispos", "left");
   chart1.Set("chart.background.barcolor1", "rgba(0,0,0,0)");
   chart1.Set("chart.background.barcolor2", "rgba(0,0,0,0)");
   chart1.Set("chart.background.grid", true);
   chart1.Set("chart.background.grid.autofit.align", true);
   chart1.Set("chart.background.grid.hsize", 25.00);
   chart1.Set("chart.background.grid.vsize", 25.00);
   chart1.Set("chart.background.grid.width", 1.00);
   chart1.Set("chart.colors", ["red","green","blue"]);
   chart1.Set("chart.key", ["Original","ForecastAtComp.","Actuals"]);
   chart1.Set("chart.key.background", "white");
   chart1.Set("chart.key.halign", "right");
   chart1.Set("chart.key.position", "graph");
   chart1.Set("chart.key.shadow", true);
   chart1.Set("chart.key.shadow.blur", 10.00);
   chart1.Set("chart.key.shadow.color", "rgba(128,128,128,0.5)");
   chart1.Set("chart.key.shadow.offsetx", 0.00);
   chart1.Set("chart.key.shadow.offsety", 0.00);
   chart1.Set("chart.key.text.size", 8.00);
   chart1.Set("chart.labels.above", false);
   chart1.Set("chart.labels.above.size", 8.00);
   chart1.Set("chart.text.angle", 45.00);
   chart1.Set("chart.text.color", "black");
   chart1.Set("chart.text.font", "Verdana");
   chart1.Set("chart.text.size", 8);
   chart1.Set("chart.gutter.bottom", 50.00);
   chart1.Set("chart.gutter.left", 90.00);
   chart1.Set("chart.gutter.right", 25.00);
   chart1.Set("chart.gutter.top", 25.00);
   chart1.Set("chart.curvy", true);
   chart1.Set("chart.curvy.factor", 0.25);
   chart1.Set("chart.linewidth", 3.00);
   chart1.Set("chart.outofbounds", false);
   chart1.Set("chart.scale.decimals", 0);
   chart1.Set("chart.shadow", true);
   chart1.Set("chart.shadow.blur", 3);
   chart1.Set("chart.shadow.offsetx", 3);
   chart1.Set("chart.shadow.offsety", 3);
   chart1.Set("chart.title.color", "black");
   chart1.Set("chart.title","Project Budget Performance");
   if (!RGraph.ISOLD) {
      chart1.Set("chart.contextmenu", [
      ["Get PNG image", RGraph.showPNG],
      null,
      ["Cancel", function () {}]
      ]);
      chart1.Set("chart.tooltips", [""]);
    }
   chart1.Draw();
}
window.onresize=drawRGraph;
</SCRIPT>
</HEAD><BODY onload="drawRGraph()">
<TABLE CLASS=dashboardTable ID=dbTable cellspacing=2 cellpadding=2>
<TR>
<TD id=tdCM_PR_COST_LINE CLASS=reportlet><canvas id="CM_PR_COST_LINE" width="600" height="300">No canvas support</canvas></TD>
</TR>
</TABLE>
<TABLE><TR><TD> </TD></TR></TABLE>
</BODY></HTML>
Posted by Richard on 2nd May 2014
Hi there,


The Line chart spline (the chart.curvy option) doesn't support null values -so you can either take out the null/empty values or not use the chart.curvy option.





Richard
Posted by Steven on 2nd May 2014
That worked. Thanks!

Add a reply

 




« Back to message list
RGraph on social media