title: set data from codebehind for showing a chart in Asp.net
body: <p>I am trying to show a graph like one below image. I am able to populate it using dummy values in javascript, but unable to populate it using my real values either from code behind of java script.</p>
  
  <p>Here is the javascript code the produces below shown graph with dummy data</p>
  
  <pre><code> //chart with points
          if ($("#sincos").length) {
              var sin = [], cos = [];
  
              for (var i = 0; i &lt; 64; i += 0.5) {
                  sin.push([i, Math.sin(i) / i]);
                  cos.push([i, Math.cos(i)]);
              }
  
              var plot = $.plot($("#sincos"),
                  [
                      { data: sin, label: "Estimated Time"},
                      { data: cos, label: "Actual Time" }
                  ], {
                      series: {
                          lines: { show: true  },
                          points: { show: true }
                      },
                      grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
                      yaxis: { min: -1.2, max: 1.2 },
                      colors: ["#539F2E", "#3C67A5"]
                  });}
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/IZyBp.png" alt="Here is the output of the above java script code"></p>
  
  <p><strong>sin, cos arrays are being filled in a for loop above with dummy data.</strong> </p>
  
  <p>Now my real data that I want to plot is like this
  Project ref # (string), estimated time(integer), actual time(integer).</p>
  
  <p>I want to populate scheduled time vs actual time of the project's ref #.
  Ref# will appear on x-axis while time should appear on y-axis.</p>
  
  <p>I want to serialize this data from code behind and populate it in graph like its done in dummy data. How can I achieve this?</p>