Monday, 24 June 2013

google line chart using script

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Default.WebForm4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Combination Chart"
   
      },
      data: [{      
        type: "column",
        indexLabel: "{y}",
        indexLabelPlacement: "outside",
        indexLabelOrientation: "horizontal",
        dataPoints: [
        { x: 10, y: 171 },
        { x: 20, y: 155},
        { x: 30, y: 150 },
        { x: 40, y: 165 },
        { x: 50 },
        { x: 60},
        { x: 70 },
        { x: 80 },
        { x: 90}
        ]
      },
      {      
        type: "line",
        indexLabel: " {y}",
        indexLabelPlacement: "outside",
        indexLabelOrientation: "horizontal",
        dataPoints: [
        { x: 10},
        { x: 20},
        { x: 30 },
          { x: 40 },
          { x: 50,y:0 },
        { x: 60, y: 68 },
        { x: 70, y: 110 },
        { x: 80, y: 115 },
        { x: 90, y: 200}
        ]
      },
             {      
        type: "line",
        indexLabel: " {y}",
        indexLabelPlacement: "outside",
        indexLabelOrientation: "horizontal",
        dataPoints: [
        { x: 10},
        { x: 20},
        { x: 30 },
          { x: 40 },
          { x: 50,y:0 },
        { x: 60, y: 20 },
        { x: 70, y: 40 },
        { x: 80, y: 60 },
        { x: 90, y: 100}
        ]
      },
     
      ]
    });

    chart.render();
  }
  </script>
  <script type="text/javascript" src="\Scripts\canvasjs.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 75%;">
  </div>
</body>
</html>

posted by silambarasanbalu @ 04:18   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home