charts/canvas/examples/21-range-spline-area-chart/range-spline-area-with-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: "Annual Expenses"\r
  10                                 },\r
  11                                 animationEnabled: true,\r
  12                                 axisY: {\r
  13                                         includeZero: false,\r
  14                                         prefix: "$ "\r
  15                                 },\r
  16                                 toolTip: {\r
  17                                         shared: true,\r
  18                                         content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> <span style='\"'color: dimgrey;'\"'>${y}</span> "\r
  19                                 },\r
  20                                 legend: {\r
  21                                         fontSize: 13\r
  22                                 },\r
  23                                 data: [\r
  24                                 {\r
  25                                         type: "splineArea",\r
  26                                         showInLegend: true,\r
  27                                         name: "Salaries",\r
  28                                         color: "rgba(54,158,173,.6)",\r
  29                                         dataPoints: [\r
  30                                         { x: new Date(2012, 2), y: 30000 },\r
  31                                         { x: new Date(2012, 3), y: 35000 },\r
  32                                         { x: new Date(2012, 4), y: 30000 },\r
  33                                         { x: new Date(2012, 5), y: 30400 },\r
  34                                         { x: new Date(2012, 6), y: 20900 },\r
  35                                         { x: new Date(2012, 7), y: 31000 },\r
  36                                         { x: new Date(2012, 8), y: 30200 },\r
  37                                         { x: new Date(2012, 9), y: 30000 },\r
  38                                         { x: new Date(2012, 10), y: 33000 },\r
  39                                         { x: new Date(2012, 11), y: 38000 },\r
  40                                         { x: new Date(2013, 0), y: 38900 },\r
  41                                         { x: new Date(2013, 1), y: 39000 }\r
  42 \r
  43                                         ]\r
  44                                 },\r
  45                                 {\r
  46                                         type: "splineArea",\r
  47                                         showInLegend: true,\r
  48                                         name: "Office Cost",\r
  49                                         color: "rgba(134,180,2,.7)",\r
  50                                         dataPoints: [\r
  51                                         { x: new Date(2012, 2), y: 20100 },\r
  52                                         { x: new Date(2012, 3), y: 16000 },\r
  53                                         { x: new Date(2012, 4), y: 14000 },\r
  54                                         { x: new Date(2012, 5), y: 18000 },\r
  55                                         { x: new Date(2012, 6), y: 18000 },\r
  56                                         { x: new Date(2012, 7), y: 21000 },\r
  57                                         { x: new Date(2012, 8), y: 22000 },\r
  58                                         { x: new Date(2012, 9), y: 25000 },\r
  59                                         { x: new Date(2012, 10), y: 23000 },\r
  60                                         { x: new Date(2012, 11), y: 25000 },\r
  61                                         { x: new Date(2013, 0), y: 26000 },\r
  62                                         { x: new Date(2013, 1), y: 25000 }\r
  63 \r
  64                                         ]\r
  65                                 },\r
  66                                 {\r
  67                                         type: "splineArea",\r
  68                                         showInLegend: true,\r
  69                                         name: "Entertainment",\r
  70                                         color: "rgba(194,70,66,.6)",\r
  71                                         dataPoints: [\r
  72                                         { x: new Date(2012, 2), y: 10100 },\r
  73                                         { x: new Date(2012, 3), y: 6000 },\r
  74                                         { x: new Date(2012, 4), y: 3400 },\r
  75                                         { x: new Date(2012, 5), y: 4000 },\r
  76                                         { x: new Date(2012, 6), y: 9000 },\r
  77                                         { x: new Date(2012, 7), y: 3900 },\r
  78                                         { x: new Date(2012, 8), y: 4200 },\r
  79                                         { x: new Date(2012, 9), y: 5000 },\r
  80                                         { x: new Date(2012, 10), y: 14300 },\r
  81                                         { x: new Date(2012, 11), y: 12300 },\r
  82                                         { x: new Date(2013, 0), y: 8300 },\r
  83                                         { x: new Date(2013, 1), y: 6300 }\r
  84 \r
  85                                         ]\r
  86                                 },\r
  87                                 {\r
  88                                         type: "splineArea",\r
  89                                         showInLegend: true,\r
  90                                         color: "rgba(127,96,132,.6)",\r
  91                                         name: "Maintenance",\r
  92                                         dataPoints: [\r
  93                                         { x: new Date(2012, 2), y: 1700 },\r
  94                                         { x: new Date(2012, 3), y: 2600 },\r
  95                                         { x: new Date(2012, 4), y: 1000 },\r
  96                                         { x: new Date(2012, 5), y: 1400 },\r
  97                                         { x: new Date(2012, 6), y: 900 },\r
  98                                         { x: new Date(2012, 7), y: 1000 },\r
  99                                         { x: new Date(2012, 8), y: 1200 },\r
 100                                         { x: new Date(2012, 9), y: 5000 },\r
 101                                         { x: new Date(2012, 10), y: 1300 },\r
 102                                         { x: new Date(2012, 11), y: 2300 },\r
 103                                         { x: new Date(2013, 0), y: 2800 },\r
 104                                         { x: new Date(2013, 1), y: 1300 }\r
 105 \r
 106                                         ]\r
 107                                 },\r
 108                                 {\r
 109                                         type: "spline",\r
 110                                         showInLegend: true,\r
 111                                         color: "rgba(127,96,255,.6)",\r
 112                                         name: "Average",\r
 113                                         dataPoints: [\r
 114                                         { x: new Date(2012, 2), y: 15475 },\r
 115                                         { x: new Date(2012, 3), y: 14900 },\r
 116                                         { x: new Date(2012, 4), y: 12100 },\r
 117                                         { x: new Date(2012, 5), y: 13450 },\r
 118                                         { x: new Date(2012, 6), y: 12200 },\r
 119                                         { x: new Date(2012, 7), y: 14225 },\r
 120                                         { x: new Date(2012, 8), y: 14400 },\r
 121                                         { x: new Date(2012, 9), y: 16250 },\r
 122                                         { x: new Date(2012, 10), y: 17900 },\r
 123                                         { x: new Date(2012, 11), y: 19400 },\r
 124                                         { x: new Date(2013, 0), y: 19000 },\r
 125                                         { x: new Date(2013, 1), y: 17900 }\r
 126 \r
 127                                         ]\r
 128                                 }\r
 129 \r
 130                                 ]\r
 131                         });\r
 132 \r
 133                         chart.render();\r
 134                 }\r
 135         </script>\r
 136         <script src="../../canvasjs.min.js"></script>\r
 137         <title>CanvasJS Example</title>\r
 138 </head>\r
 139 <body>\r
 140         <div id="chartContainer" style="height: 400px; width: 100%;">\r
 141         </div>\r
 142 </body>\r
 143 \r
 144 </html>\r