Line Chart - Demo

This demo illustrates how some of the parameters of the line chart object could be changed by the user.



Time   2000   2001   2002  
0      
10      
20      
30      
Colour      
 

Source code

All code for the LineChart is written in Jscript, and it relies on four include files. These are included in the package, and you are free to modify them for personal use.

  1. <%@ LANGUAGE = JScript%>
  2. // Include the LineDiagram script library.
  3. <!--#include file="LineDiagram.asp"-->
  4. <%
  5. // Create a new LineDiagram
  6. var diagramObj = new LineDiagram();
  7. diagramObj.CreateBackgroundFromImage(Server.mappath("images/dimacLogo.jpg"));
  9. // Settings for the x-scale
  10. diagramObj.xScale.label = "Time";
  11. diagramObj.xScale.SetPosition(40, 180, 260);
  12. diagramObj.xScale.SetLabelFont("Tahoma", 12, "bold", 0x444444, true, false, 0);
  13. diagramObj.xScale.SetValueFont("Tahoma", 12, "normal", 0x444444, true, false, 0);
  14. diagramObj.xScale.minValue = 0;
  15. diagramObj.xScale.maxValue = 30;
  16. diagramObj.xScale.stepSize = 2;
  17. diagramObj.xScale.lineColor = 0x999999;
  18. diagramObj.xScale.lineSize = 1;
  20. // Settings for the y-scale
  21. diagramObj.yScale.label = "Costs";
  22. diagramObj.yScale.SetPosition(40, 180, 150);
  23. diagramObj.yScale.SetLabelFont("Tahoma", 12, "bold", 0x444444, true, false, 0);
  24. diagramObj.yScale.SetValueFont("Tahoma", 12, 0, 0x444444, true, false, 0);
  25. diagramObj.yScale.minValue = 0;
  26. diagramObj.yScale.maxValue = 10;
  27. diagramObj.yScale.stepSize = 2;
  28. diagramObj.yScale.lineColor = 0x999999;
  29. diagramObj.yScale.lineSize = 1;
  31. // Request color values
  33. var c2000 = Request.Item("c2000").Item;
  34. if (!c2000)
  35. c2000 = new String("#9999ff");
  37. var c2001 = Request.Item("c2001").Item;
  38. if (!c2001)
  39. c2001 = new String("#99ee99");
  42. var c2002 = Request.Item("c2002").Item;
  43. if (!c2002)
  44. c2002 = new String("#dd8888");
  46. var imageobj = Server.CreateObject("w3image.Image");
  47. imageobj.CreateEmptySurface(1,1);
  49. // Create some graphs
  50. var graph1 = new LDGraph();
  51. graph1.label = "2000";
  52. graph1.lineColor = imageobj.CreateColor(c2000.valueOf());
  54. var graph2 = new LDGraph();
  55. graph2.label = "2001";
  56. graph2.lineColor = imageobj.CreateColor(c2001.valueOf()); //0x99ee99;
  58. var graph3 = new LDGraph();
  59. graph3.label = "2002";
  60. graph3.lineColor = imageobj.CreateColor(c2002.valueOf()); //0xdd8888;
  63. // Request values from graph 2000
  64. var q1_2000 = Request.Item("q1_2000").Item;
  65. if (!q1_2000)
  66. q1_2000 = 10;
  68. var q2_2000 = Request.Item("q2_2000").Item;
  69. if (!q2_2000)
  70. q2_2000 = 8;
  72. var q3_2000 = Request.Item("q3_2000").Item;
  73. if (!q3_2000)
  74. q3_2000 = 4;
  76. var q4_2000 = Request.Item("q4_2000").Item;
  77. if (!q4_2000)
  78. q4_2000 = 5;
  81. // Set the values of graph1
  82. graph1.AddPoint(0, parseInt(q1_2000));
  83. graph1.AddPoint(10, parseInt(q2_2000));
  84. graph1.AddPoint(20, parseInt(q3_2000));
  85. graph1.AddPoint(30, parseInt(q4_2000));
  87. // Request values from graph 2001
  88. var q1_2001 = Request.Item("q1_2001").Item;
  89. if (!q1_2001)
  90. q1_2001 = 0;
  92. var q2_2001 = Request.Item("q2_2001").Item;
  93. if (!q2_2001)
  94. q2_2001 = 2;
  96. var q3_2001 = Request.Item("q3_2001").Item;
  97. if (!q3_2001)
  98. q3_2001 = 2;
  100. var q4_2001 = Request.Item("q4_2001").Item;
  101. if (!q4_2001)
  102. q4_2001 = 4;
  105. // Set the values of graph2
  106. graph2.AddPoint(0, parseInt(q1_2001));
  107. graph2.AddPoint(10, parseInt(q2_2001));
  108. graph2.AddPoint(20, parseInt(q3_2001));
  109. graph2.AddPoint(30, parseInt(q4_2001));
  112. // Request values from graph 2002
  113. var q1_2002 = Request.Item("q1_2002").Item;
  114. if (!q1_2002)
  115. q1_2002 = 8;
  117. var q2_2002 = Request.Item("q2_2002").Item;
  118. if (!q2_2002)
  119. q2_2002 = 3;
  121. var q3_2002 = Request.Item("q3_2002").Item;
  122. if (!q3_2002)
  123. q3_2002 = 6;
  125. var q4_2002 = Request.Item("q4_2002").Item;
  126. if (!q4_2002)
  127. q4_2002 = 7;
  130. // Set the values of graph3
  131. graph3.AddPoint(0, parseInt(q1_2002));
  132. graph3.AddPoint(10, parseInt(q2_2002));
  133. graph3.AddPoint(20, parseInt(q3_2002));
  134. graph3.AddPoint(30, parseInt(q4_2002));
  138. // Add the graphs
  139. diagramObj.graphs.push(graph1);
  141. diagramObj.graphs.push(graph2);
  143. diagramObj.graphs.push(graph3);
  145. // Set the value
  146. diagramObj.graphInfo.startXPos = 330;
  147. diagramObj.graphInfo.startYPos = 20;
  148. diagramObj.graphInfo.boxWidth = 15;
  149. diagramObj.graphInfo.boxHeight = 10;
  150. diagramObj.graphInfo.boxSpacing = 5;
  151. diagramObj.graphInfo.lineColor = 0x444444;
  152. diagramObj.graphInfo.SetLabelFont("Tahoma", 12, "normal", 0x444444, true, false);
  155. // Draw the diagram
  156. diagramObj.DrawDiagram();
  159. %>