Creating a Mobile Media Site with MongoDB.

	Creating a Mobile Media Site with MongoDB                 Register: Create a Mobile Media Site with MongoDB Creating a great mobile site featuring images requires the right infrastructure. Storing images and associated metadata in MongoDB is a scalable way to support a successful mobile media site. MongoDB can be integrated with Drupal to store and search content in a centralized respository. Join CIGNEX, an Acquia partner, to review a site developed in Drupal that stores millions of photos with metadata in MongoDB. In this webinar, you'll also learn: Requirements & challenges of building a mobile media site The advatanges of using Drupal & MongoDB A demo of the integrated solution Register: Create a Mobile Media Site with MongoDB To speak to someone about our solutions for Drupal, contact us at +1.781.238.8600 or sales@acquia.com.                 Tuesday, July 30 1:00PM EDT 18:00 UK Unable to attend? Register and receive a link to the recording. Share Now: Who should attend? Developers Site Managers Site Owners           Follow Us Try Acquia for FREE 25 Corporate Drive, 4th floor Burlington, MA 01803 +1.781.238.8600 sales@acquia.com

Click on legend hide / show lines in line chart using google-chart API.

Google Line chart visualization events example.

I have found some example to show / hide lines in Google line chart.

Here is the code follows:

HTML CODE:::

 <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript Code:::

  google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Year', 'Sales', 'Expenses'],

          ['2004',  1000,      400],

          ['2005',  1170,      460],

          ['2006',  660,       1120],

          ['2007',  1030,      540]

        ]);

        var options = {

          title: 'Company Performance',

         

        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

    var columns = [];

    var series = {};

    for (var i = 0; i < data.getNumberOfColumns(); i++) {

        columns.push(i);

        if (i > 0) {

            series[i - 1] = {};

        }

    }

    

    var options = {

        width: 600,

        height: 400,

        series: series

    }

    

    google.visualization.events.addListener(chart, 'select', function () {

        var sel = chart.getSelection();

        // if selection length is 0, we deselected an element

        if (sel.length > 0) {

            // if row is undefined, we clicked on the legend

            if (typeof sel[0].row === 'undefined') {

                var col = sel[0].column;

                if (columns[col] == col) {

                    // hide the data series

                    columns[col] = {

                        label: data.getColumnLabel(col),

                        type: data.getColumnType(col),

                        calc: function () {

                            return null;

                        }

                    };

                    

                    // grey out the legend entry

                    series[col - 1].color = '#CCCCCC';

                }

                else {

                    // show the data series

                    columns[col] = col;

                    series[col - 1].color = null;

                }

                var view = new google.visualization.DataView(data);

                view.setColumns(columns);

                chart.draw(view, options);

            }

        }

    });

      

      }

Here is the example jsfiidle link ::: http://jsfiddle.net/xDUPF/4/light/

What is Angularjs?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.      

Example:: 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>