eCharts.js + Datamatic Multiple, Filtering Line Chart Example

echarts-js-datamatic-multiple-filtering-line-chart-example.markdown

eCharts.js + Datamatic Multiple, Filtering Line Chart Example

A simple line chart created using eCharts JS library with Datamatic.

A Pen by Carl V Lewis on CodePen.

License.

index.markdown

script.js

 var datamatic = new Datamatic("113923971687230343116");
      var chart = datamatic.chart("0B5yRxGfqDf0kMEF3cWl4RnVCOFU", {
         width:600,
         height:500
      });
      chart.render(document.body).then(function(){
          chart.setData([
            [
                "YEAR",
                "Visitors Center Lot",
                "Liberty Street Garage",
                "State Street Garage",
                "Robinson Garage",
                "Bryan Street Garage",
                "Whitaker Street Garage"
            ],
            [
                "",
                "#5793F3",
                "#BD3B47",
                "#DD4D79",
                "#FD9C35",
                "#D4DF5A",
                "#FFD300"
            ],
            [
                "2010",
                "195562",
                "493636",
                "667784",
                "743371",
                "1235587",
                "2182515"
            ],
            [
                "2011",
                "199575",
                "533653",
                "656350",
                "798373",
                "1253232",
                "2718051"
            ],
            [
                "2012",
                "170208",
                "442232",
                "761678",
                "939249",
                "1359718",
                "2873921"
            ],
            [
                "2013",
                "176706",
                "403956",
                "758054",
                "1064541",
                "1285291",
                "3063632"
            ],
            [
                "2014",
                "158567",
                "406101",
                "725750",
                "1106404",
                "1182531",
                "3132557"
            ],
            [],
            []
        ]);
      });

scripts

<script src="https://cdn.datamatic.io/runtime/echarts/3.3.2_101/api/api.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />