Socrata was acquired by Tyler Technologies in 2018 and is now the Data and Insights division of Tyler. The platform is still powered by the same software formerly known as Socrata but you will see references to Data & Insights going forward.

Gauge Visualizations using the Google Charts library

stuagano

stuagano

    This example shows how to pull data from a Socrata Dataset (in this case, some Phoenix performance metrics) with the Google “Gauge” visualization. As a bonus, we will then embed that chart into a Socrata Perspectives page.

    The Google Charts library provides a number of different chart types for visualization that can be leveraged using the SODA API. The “Gauge” visualization is useful when you have a single metric or measure you’d like to compare against a baseline or goal.

    Prerequisites

    There are a number of prerequisites necessary before starting with this example:

    1. Most obviously, you’ll need to work with data in a Socrata dataset containing time series data that can be aggregated at a daily level. If you’re looking for a dataset to work with, we recommend you explore the Open Data Network, where you can find a full catalog of datasets from our awesome customers.
    2. You’ll need some basic familiarity with JavaScript before starting. If you’ve never worked with JavaScript before, we recommend this course from CodeAcademy.
    3. We’ll also be making use of jQuery to simplify some of our development tasks.

    Check out all of the different chart types available through the Google Charts library.

    Craft your SoQL query

    First you need to fetch the value for your Gauge using the SODA API. We’ll use a Simple Filter to fetch our single metric:

    https://phoenix.data.socrata.com/resource/v825-dy8n.json?description=bike miles

    The result will look like the following:

    [
  {
    "description": "bike miles",
    "value": "1080"
  }
]

    Fetch data using jQuery

    We’ll define a fetchValues function that uses the jQuery.get(...) function to fetch data from the SODA API, transform it into an array of objects, and returns it for handling:

    var fetchValues = function() {
  return $.get('https://phoenix.data.socrata.com/resource/v825-dy8n.json',
    {
      'description' : 'bike miles'
    }
  ).pipe(function (res) {
    var ary = [['Label', 'Value']];
    for (var i = 0; i < res.length; i++) {
      ary.push([res[i].description, parseInt(res[i].value)]);
    }
    return ary;
  });
};

    Configure and initialize your Gauge

    Once we’ve got our data from the SODA API, we’ll plumb it into the Google Chart library to visualize the actual data. We do this in our drawChart function:

    1. First we initialize our DataTable with our data ary.
    2. Then we create an options object with our gauge configuration. We’ll set our gauge color bands, maximum, and size. See the Google Charts Library documentation for all of the available configuration options
    3. Then we initialize our Gauge, feeding it our target element by ID, chart_div.
    4. Finally, we draw our gauge, feeding it configuration via our options object.
    var drawChart = function(ary) {
  var data = google.visualization.arrayToDataTable(ary);

  var options = {
    width: 300,
    height: 200,
    redFrom: 0,
    redTo: 1000,
    greenFrom: 5000,
    greenTo: 10000,
    yellowFrom: 1001,
    yellowTo: 4999,
    minorTicks: 4,
    max: 10000
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);
};

    Finally, we tie things all together by having the Google Charts library call our function when it loads:

    google.charts.setOnLoadCallback(function() {
  fetchValues().done(function(data) {
    drawChart(data);
  });
});

    BONUS: Embed your visualization in Socrata Perspectives

    To get access to Socrata Perspectives page, you'll need to work for one of our awesome customers. Maybe your local government is hiring!

    Once you’ve created your visualization, you can use the ability for Perspectives to include embedded content to embed your visualization into a new story. To do so, first you’ll need to craft a very simple HTML page like the following which loads your visualization. Make sure you include in that page the script tags to load your dependencies, in this case both jQuery and the Google Charts library.

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
   
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 100%;"></div>

    <script type="text/javascript">
(function() {
  google.charts.load('current', { 'packages': ['gauge'] });

  var fetchValues = function() {
    return $.get('https://phoenix.data.socrata.com/resource/v825-dy8n.json',
      {
        'description' : 'bike miles'
      }
    ).pipe(function (res) {
      var ary = [['Label', 'Value']];
      for (var i = 0; i < res.length; i++) {
        ary.push([res[i].description, parseInt(res[i].value)]);
      }
      return ary;
    });
  };

  var drawChart = function(ary) {
    var data = google.visualization.arrayToDataTable(ary);

    var options = {
      width: 300,
      height: 200,
      redFrom: 0,
      redTo: 1000,
      greenFrom: 5000,
      greenTo: 10000,
      yellowFrom: 1001,
      yellowTo: 4999,
      minorTicks: 4,
      max: 10000
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
  };

  google.charts.setOnLoadCallback(function() {
    fetchValues().done(function(data) {
      drawChart(data);
    });
  });
})();
    </script>
  </body>
</html>

    Then, to add it as a content block in your story:

    1. When editing your story, click “Add Content” to bring up the palate, and drag in a new content block.
    2. Click “Insert” and then “HTML Embed”
    3. Where it says “Paste or type HTML code”, paste in the entire contents of your HTML snippet and click “Insert”

    That’s it! Click below to see what this looks like.