title: Google line chart visualization with JSON blob
body: <p>So I have a google line chart visualization with a data set that has been converted to JSON</p>
  
  <p>Here is some code with properties:</p>
  
  <pre><code>var chartOptions = {curveType: 'none',
      width: 1200, height: 768,
      vAxis: {maxValue: 8000, title: 'Load time in ms'},
      hAxis: {title: 'Date and Time'},
      title: 'A Line Graph Example',
      titlePosition: 'out', 
      titleTextStyle: {fontSize: 14,textIndent: 10},
      fontSize: 12
  };
      //Load core chart visualization
      google.load('visualization', '1', {packages: ['corechart']});
  
      //On load call back invoke function
      google.setOnLoadCallback(getData);
  </code></pre>
  
  <p>The JSON blob that I have to iterate through and display in the line chart looks something like this: </p>
  
  <pre><code>{
      "cols": [
          {
              "id": "formatted_timestamp",
              "label": "Formatted timestamp",
              "type": "number"
          },
          {
              "id": "fully_loaded",
              "label": "Fully loaded",
              "type": "number"
          },
          {
              "id": "load_time",
              "label": "Load time",
              "type": "number"
          },
          {
              "id": "location",
              "label": "Test location",
              "type": "string"
          },
          {
              "id": "time_to_first_byte",
              "label": "Time to first byte",
              "type": "number"
          },
          {
              "id": "timestamp",
              "label": "Timestamp",
              "type": "datetime"
          },
          {
              "id": "url",
              "label": "URL",
              "type": "string"
          },
          {
              "id": "view",
              "label": "View #",
              "type": "number"
          }
      ],
      "rows": [
          {
              "c": [
                  {
                      "v": 1288888570000
                  },
                  {
                      "v": 9236
                  },
                  {
                      "v": 6348
                  },
                  {
                      "v": "Dulles, VA USA"
                  },
                  {
                      "v": 466
                  },
                  {
                      "v": "Date(2010, 10, 4, 16, 36, 10)"
                  },
                  {
                      "v": "http://example.com"
                  },
                  {
                      "v": 1
                  }
              ]
          },
          {
              "c": [
                  {
                      "v": 1288888592000
                  },
                  {
                      "v": 4499
                  },
                  {
                      "v": 3630
                  },
                  {
                      "v": "Dulles, VA USA"
                  },
                  {
                      "v": 322
                  },
                  {
                      "v": "Date(2010, 10, 4, 16, 36, 32)"
                  },
                  {
                      "v": "http://example2.com"
                  },
                  {
                      "v": 2
                  }
              ]
          },
          {
              "c": [
                  {
                      "v": 1288888582000
                  },
                  {
                      "v": 4499
                  },
                  {
                      "v": 3630
                  },
                  {
                      "v": "Dulles, VA USA"
                  },
                  {
                      "v": 322
                  },
                  {
                      "v": "Date(2010, 10, 4, 16, 36, 32)"
                  },
                  {
                      "v": "http://example3.com"
                  },
                  {
                      "v": 2
                  }
              ]
          },
  </code></pre>
  
  <p>For the sake of brevity, I abbreviated the rows because there are a lot of them but they pretty much repeat with different data.</p>
  
  <p>My question is how would I iterate through this blob and then display it in the google line chart visualization? Also how would I select different sets of data from this and display it over other data plotted on the same graph?</p>
  
  <p>Thanks in advance.</p>