charts/canvas/examples/01-line-chart/multi-series-line-chart.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5         <script type="text/javascript">\r
   6                 window.onload = function () {\r
   7                         var chart = new CanvasJS.Chart("chartContainer", {\r
   8                                 title: {\r
   9                                         text: "Site Traffic",\r
  10                                         fontSize: 30\r
  11                                 },\r
  12                                 animationEnabled: true,\r
  13                                 axisX: {\r
  14                                         gridColor: "Silver",\r
  15                                         tickColor: "silver",\r
  16                                         valueFormatString: "DD/MMM"\r
  17                                 },\r
  18                                 toolTip: {\r
  19                                         shared: true\r
  20                                 },\r
  21                                 theme: "theme2",\r
  22                                 axisY: {\r
  23                                         gridColor: "Silver",\r
  24                                         tickColor: "silver"\r
  25                                 },\r
  26                                 legend: {\r
  27                                         verticalAlign: "center",\r
  28                                         horizontalAlign: "right"\r
  29                                 },\r
  30                                 data: [\r
  31                                 {\r
  32                                         type: "line",\r
  33                                         showInLegend: true,\r
  34                                         lineThickness: 2,\r
  35                                         name: "Visits",\r
  36                                         markerType: "square",\r
  37                                         color: "#F08080",\r
  38                                         dataPoints: [\r
  39                                         { x: new Date(2010, 0, 3), y: 650 },\r
  40                                         { x: new Date(2010, 0, 5), y: 700 },\r
  41                                         { x: new Date(2010, 0, 7), y: 710 },\r
  42                                         { x: new Date(2010, 0, 9), y: 658 },\r
  43                                         { x: new Date(2010, 0, 11), y: 734 },\r
  44                                         { x: new Date(2010, 0, 13), y: 963 },\r
  45                                         { x: new Date(2010, 0, 15), y: 847 },\r
  46                                         { x: new Date(2010, 0, 17), y: 853 },\r
  47                                         { x: new Date(2010, 0, 19), y: 869 },\r
  48                                         { x: new Date(2010, 0, 21), y: 943 },\r
  49                                         { x: new Date(2010, 0, 23), y: 970 }\r
  50                                         ]\r
  51                                 },\r
  52                                 {\r
  53                                         type: "line",\r
  54                                         showInLegend: true,\r
  55                                         name: "Unique Visits",\r
  56                                         color: "#20B2AA",\r
  57                                         lineThickness: 2,\r
  58 \r
  59                                         dataPoints: [\r
  60                                         { x: new Date(2010, 0, 3), y: 510 },\r
  61                                         { x: new Date(2010, 0, 5), y: 560 },\r
  62                                         { x: new Date(2010, 0, 7), y: 540 },\r
  63                                         { x: new Date(2010, 0, 9), y: 558 },\r
  64                                         { x: new Date(2010, 0, 11), y: 544 },\r
  65                                         { x: new Date(2010, 0, 13), y: 693 },\r
  66                                         { x: new Date(2010, 0, 15), y: 657 },\r
  67                                         { x: new Date(2010, 0, 17), y: 663 },\r
  68                                         { x: new Date(2010, 0, 19), y: 639 },\r
  69                                         { x: new Date(2010, 0, 21), y: 673 },\r
  70                                         { x: new Date(2010, 0, 23), y: 660 }\r
  71                                         ]\r
  72                                 }\r
  73                                 ],\r
  74                                 legend: {\r
  75                                         cursor: "pointer",\r
  76                                         itemclick: function (e) {\r
  77                                                 if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {\r
  78                                                         e.dataSeries.visible = false;\r
  79                                                 }\r
  80                                                 else {\r
  81                                                         e.dataSeries.visible = true;\r
  82                                                 }\r
  83                                                 chart.render();\r
  84                                         }\r
  85                                 }\r
  86                         });\r
  87 \r
  88                         chart.render();\r
  89                 }\r
  90         </script>\r
  91         <script src="../../canvasjs.min.js"></script>\r
  92         <title>CanvasJS Example</title>\r
  93 </head>\r
  94 <body>\r
  95         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  96         </div>\r
  97 </body>\r
  98 </html>\r