Dashboards

Filter data with interactive controls

One to One

One Control, One Chart

Script

                  
          jQuery($ => {
            const el = document.getElementsByClassName("tabs")[0];
          
            M.Tabs.init(el, {
              onShow(tab) {
                // console.log(tab);
                // $.get(`${tab.id}.js?callback=?`, data => {
                //   $(`#${tab.id}_code`).text(data.result);
                // });
              }
            });
          
            // lava.draw();
          });

Markup


          <!--Div for the dashboard-->
          <div id="one-to-one_dashboard_div">
              <!--Divs for each control and chart-->
              <div id="one-to-one_filter_div"></div>
              <div id="one-to-one_chart_div"></div>
          </div>

Dashboard

One to Many

One Control, Multiple Charts

Script

                  
          jQuery($ => {
            const el = document.getElementsByClassName("tabs")[0];
          
            M.Tabs.init(el, {
              onShow(tab) {
                // console.log(tab);
                // $.get(`${tab.id}.js?callback=?`, data => {
                //   $(`#${tab.id}_code`).text(data.result);
                // });
              }
            });
          
            // lava.draw();
          });

Markup


          <!--Div for the dashboard-->
          <div id="one-to-many_dashboard_div">
              <!--Divs for each control and chart-->
              <div id="one-to-many_filter_div"></div>
              <div id="one-to-many_piechart_div"></div>
              <div id="one-to-many_barchart_div"></div>
          </div>

Dashboard

Many to One

Multiple Controls, One Chart

Script

                  
          jQuery($ => {
            const el = document.getElementsByClassName("tabs")[0];
          
            M.Tabs.init(el, {
              onShow(tab) {
                // console.log(tab);
                // $.get(`${tab.id}.js?callback=?`, data => {
                //   $(`#${tab.id}_code`).text(data.result);
                // });
              }
            });
          
            // lava.draw();
          });

Markup


          <!--Div for the dashboard-->
          <div id="many-to-one_dashboard_div">
              <!--Divs for each control and chart-->
              <div id="many-to-one_donut_slider_div"></div>
              <div id="many-to-one_coffee_slider_div"></div>
              <div id="many-to-one_scatterchart_div"></div>
          </div>

Chart

Many to Many

Multiple Controls, Multiple Charts

Script

                  
          jQuery($ => {
            const el = document.getElementsByClassName("tabs")[0];
          
            M.Tabs.init(el, {
              onShow(tab) {
                // console.log(tab);
                // $.get(`${tab.id}.js?callback=?`, data => {
                //   $(`#${tab.id}_code`).text(data.result);
                // });
              }
            });
          
            // lava.draw();
          });

Markup


          <!--Div for the dashboard-->
          <div id="many-to-many_dashboard_div">
              <!--Divs for each control and chart-->
              <div id="many-to-many_donut_slider_div"></div>
              <div id="many-to-many_coffee_slider_div"></div>
              <div id="many-to-many_piechart_div"></div>
              <div id="many-to-many_barchart_div"></div>
          </div>

Chart