JSFiddle - React, Tailwind, and code Playground

by Eric Blanchette

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<div ng-app>
    <div ng-controller="TimersController">
        
        <div google-chart chart="chartObject" style="{{cssStyle}}"></div>
        
        <select>
            <option>Start</option>
        </select>
        <table>
            <tr>
                <td>Start</td>
                <td>Time</td>
                <td>Class</td>
                <td>Method</td>
                <td>Line</td>
                <td>Description</td>
            </tr>
            <tr ng-repeat="timer in timers | orderBy:start">
                <td>{{timer.start}}</td>
                <td>{{timer.time}}</td>
                <td>{{timer.className}}</td>
                <td>{{timer.methodName}}</td>
                <td>{{timer.lineNumber}}</td>
                <td>{{timer.description}}</td>
            </tr>
        </table>
    </div>
</div>

JavaScript

function TimersController($scope) {
    
    $scope.chartObject = {
  "type": "AreaChart",
  "displayed": true,
  "data": {
    "cols": [
      {
        "id": "month",
        "label": "Month",
        "type": "string",
        "p": {}
      },
      {
        "id": "laptop-id",
        "label": "Laptop",
        "type": "number",
        "p": {}
      },
      {
        "id": "desktop-id",
        "label": "Desktop",
        "type": "number",
        "p": {}
      },
      {
        "id": "server-id",
        "label": "Server",
        "type": "number",
        "p": {}
      },
      {
        "id": "cost-id",
        "label": "Shipping",
        "type": "number"
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "January"
          },
          {
            "v": 19,
            "f": "42 items"
          },
          {
            "v": 12,
            "f": "Ony 12 items"
          },
          {
            "v": 7,
            "f": "7 servers"
          },
          {
            "v": 4
          }
        ]
      },
      {
        "c": [
          {
            "v": "February"
          },
          {
            "v": 13
          },
          {
            "v": 1,
            "f": "1 unit (Out of stock this month)"
          },
          {
            "v": 12
          },
          {
            "v": 2
          }
        ]
      },
      {
        "c": [
          {
            "v": "March"
          },
          {
            "v": 24
          },
          {
            "v": 5
          },
          {
            "v": 11
          },
          {
            "v": 6
          }
        ]
      }
    ]
  },
  "options": {
    "title": "Sales per month",
    "isStacked": "true",
    "fill": 20,
    "displayExactValues": true,
    "vAxis": {
      "title": "Sales unit",
      "gridlines": {
        "count": 10
      }
    },
    "hAxis": {
      "title": "Date"
    }
  },
        "formatters": {}};
    
    $scope.timers = 
      ...