Line Chart - Demo

A very static LineChart.



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();
  8. diagramObj.CreateBackground(500, 300, 0xC9F0FF)
  9. // Settings for the x-scale
  10. diagramObj.xScale.label = "Month";
  11. diagramObj.xScale.SetPosition(100, 180, 260);
  12. diagramObj.xScale.SetLabelFont("Arial", 12, "normal", 0x000000, true, false, 0);
  13. diagramObj.xScale.SetValueFont("Arial", 12, "normal", 0x000000, true, false, 0);
  14. diagramObj.xScale.minValue = 0;
  15. diagramObj.xScale.maxValue = 12;
  16. diagramObj.xScale.stepSize = 1;
  17. diagramObj.xScale.lineColor = 0x000000;
  18. diagramObj.xScale.lineSize = 1;
  19. diagramObj.xScale.showGrid = true;
  21. // Settings for the y-scale
  22. diagramObj.yScale.label = "Sales (million units)";
  23. diagramObj.yScale.SetPosition(100, 180, 150);
  24. diagramObj.yScale.SetLabelFont("Arial", 13, "bold", 0x000000, true, false, 0);
  25. diagramObj.yScale.SetValueFont("Arial", 12, "normal", 0x000000, true, false, 0);
  26. diagramObj.yScale.minValue = 0;
  27. diagramObj.yScale.maxValue = 10;
  28. diagramObj.yScale.stepSize = 2;
  29. diagramObj.yScale.lineColor = 0x000000;
  30. diagramObj.yScale.lineSize = 1;
  31. diagramObj.yScale.showGrid = true;
  34. var graph1 = new LDGraph();
  35. graph1.label = "Bad Trend";
  36. graph1.lineColor = 0xff0000;
  37. graph1.lineSize = 1;
  38. graph1.showLabel = true;
  40. var graph2 = new LDGraph();
  41. graph2.label = "Positive Trend";
  42. graph2.lineColor = 0x0000FF;
  43. graph2.lineSize = 1;
  44. graph2.showLabel = true;
  48. graph1.AddPoint(1,8);
  49. graph1.AddPoint(2,5);
  50. graph1.AddPoint(6,7);
  51. graph1.AddPoint(10,6);
  52. graph1.AddPoint(11,5);
  53. graph1.AddPoint(12,0);
  55. graph2.AddPoint(1,2);
  56. graph2.AddPoint(2,6);
  57. graph2.AddPoint(3,6);
  58. graph2.AddPoint(5,6);
  59. graph2.AddPoint(6,7);
  60. graph2.AddPoint(8,8);
  61. graph2.AddPoint(10,8);
  62. graph2.AddPoint(11,7);
  63. graph2.AddPoint(12,8);
  65. // Add the graphs
  67. diagramObj.graphs.push(graph1);
  68. diagramObj.graphs.push(graph2);
  70. // Set the value
  71. diagramObj.graphInfo.startXPos = 370;
  72. diagramObj.graphInfo.startYPos = 20;
  73. diagramObj.graphInfo.boxWidth = 15;
  74. diagramObj.graphInfo.boxHeight = 10;
  75. diagramObj.graphInfo.boxSpacing = 5;
  76. diagramObj.graphInfo.lineColor = 0x000000;
  77. diagramObj.graphInfo.SetLabelFont("Tahoma", 12, "normal", 0x000000, true, false);
  80. // Draw the diagram
  81. diagramObj.DrawDiagram();
  82. %>