Gallery Back to Gallery

Working from Home Dashboard

Powered by ZingChart
Should I Wear Pants TodayNo.Also no, but in orange.
Powered by ZingChart
Daily ChoicesWorkingFinding a new Zoom filter to impress the team
Powered by ZingChart
Daily Work ProductivityMonSunTueWedThuFriSatDays0%100%20%40%60%80%Work ProductivityDaily ActivitiesWorkingFinding a New Zoom FilterFeeding my KidsDrinking Alcohol
Powered by ZingChart 
<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>Funny Chart Dashboard</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .dashboard--container {
      display: flex;
      flex-direction: column;
    }

    .dashboard--container .row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .chart--container {
      display: flex;
      flex-grow: 1;
      min-width: 400px;
      min-height: 400px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">
  <div class="dashboard--container">
    <div class="row">
      <!-- CHART CONTAINER -->
      <div id="pieChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
      <!-- CHART CONTAINER -->
      <div id="vennChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    </div>
    <div class="row">
      <!-- CHART CONTAINER -->
      <div id="barChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    </div>
    <div class="row">
      <!-- CHART CONTAINER -->
      <div id="wordCloud" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    </div>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let pieChartConfig = {
        type: 'pie',
        globals: {
          fontSize: '14px',
        },
        title: {
          text: 'Should I Wear Pants Today',
          fontSize: '24px',
        },
        legend: {
          adjustLayout: true,
          align: 'right',
          item: {
            padding: '3px 5px',
            cursor: 'hand',
          },
          marker: {
            size: 12,
            cursor: 'hand',
          },
          toggleAction: 'remove',
          verticalAlign: 'middle',
        },
        plot: {
          valueBox: {
            visible: false,
          },
          // hoverstate
          tooltip: {
            // % symbol represents a token to insert a value. Full list here:
            // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
            text: '%plot-text',
            padding: '10px 15px',
            borderRadius: '3px',
          },
          animation: {
            effect: 'ANIMATION_EXPAND_LEFT',
            method: 'ANIMATION_STRONG_EASE_OUT',
            sequence: 'ANIMATION_BY_PLOT',
            speed: 575,
          },
          cursor: 'hand',
          refAngle: -45,
          // animation docs here:
          // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
        },
        plotarea: {
          margin: '65 dynamic',
        },
        // plot represents general series, or plots, styling
        series: [{
            text: 'No.',
            // plot values
            values: [75],
            backgroundColor: '#0095d9',
          },
          {
            text: 'Also no, <br>but in orange.',
            // plot values
            values: [10],
            backgroundColor: '#ff9800',
            border: '10px solid #ffcc80',
          },
        ],
      };

      let vennChartConfig = {
        type: 'venn',
        globals: {
          fontSize: '14px',
        },
        title: {
          text: 'Daily Choices',
          fontSize: '24px',
        },
        plot: {
          tooltip: {
            visible: false,
          },
          valueBox: {
            text: '%t',
            textAlign: 'left',
          },
        },
        series: [{
            // Set 1
            text: 'Working',
            values: [50],
            backgroundColor: '#03a9f4',
            join: [10],
          },
          {
            // Set 2
            text: 'Finding a new <br>Zoom filter to <br>impress the team',
            values: [50],
            backgroundColor: '#ff9800',
            join: [10],
          },
        ],
      };

      let barChartConfig = {
        type: 'bar',
        globals: {
          fontSize: '14px',
        },
        title: {
          text: 'Daily Work Productivity',
          fontSize: '24px',
          paddingLeft: '50px',
          textAlign: 'left',
          // will force margin and padding on title
          // adjustLayout: true
        },
        legend: {
          cursor: 'hand',
          draggable: true,
          dragHandler: 'icon',
          header: {
            height: '20px',
            text: 'Daily Activities',
          },
          minimize: true,
          toggleAction: 'remove',
        },
        // plot represents general series, or plots, styling
        plot: {
          stacked: true,
          // hoverstate
          tooltip: {
            visible: false,
          },
          // animation docs here:
          // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
          animation: {
            effect: 'ANIMATION_SLIDE_TOP',
            method: 'ANIMATION_BOUNCE_EASE_OUT',
            sequence: 'ANIMATION_NO_SEQUENCE',
            speed: 975,
          },
          lineWidth: '3px',
          // line node styling
          marker: {
            borderWidth: '0px',
            size: '6px',
          },
        },
        plotarea: {
          margin: '50px dynamic dynamic dynamic',
        },
        scaleX: {
          // set scale label
          label: {
            text: 'Days',
          },
          // convert text on scale indices
          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        scaleY: {
          // scale label with unicode character
          label: {
            text: 'Work Productivity',
          },
          format: '%v%',
        },
        crosshairX: {
          plotLabel: {
            borderRadius: '3px',
            padding: '10px 15px',
            sortByValue: 'asc',
          },
          alpha: 0.28,
          lineWidth: '100%',
        },
        series: [{
            text: 'Working',
            // plot values
            values: [20, 30, 50, 50, 40, 0, 0],
            backgroundColor: '#03a9f4',
          },
          {
            text: 'Finding a New Zoom Filter',
            // plot values
            values: [60, 30, 0, 20, 0, 0, 0],
            backgroundColor: '#ff9800',
          },
          {
            text: 'Feeding my Kids',
            // plot values
            values: [20, 30, 30, 20, 30, 10, 20],
            backgroundColor: '#4caf50',
          },
          {
            text: 'Drinking Alcohol',
            // plot values
            values: [0, 10, 20, 10, 30, 90, 80],
            backgroundColor: '#ff5722',
          },
        ],
      };

      let wordcloudConfig = {
        graphset: [{
            type: 'null',
            height: '10%',
            title: {
              text: 'Popular Phrases',
              fontSize: '24px',
              paddingLeft: '50px',
              textAlign: 'left',
            },
          },
          {
            type: 'wordcloud',
            y: '10%',
            height: '90%',
            options: {
              words: [{
                  text: 'Joe Exotic',
                  count: 1000,
                },
                {
                  text: 'Tiger King',
                  count: 800,
                },
                {
                  text: 'Flatten the curve',
                  count: 400,
                },
                {
                  text: 'Carol Baskin',
                  count: 300,
                },
                {
                  text: 'Baskin Robbins',
                  count: 10,
                },
                {
                  text: 'Corona',
                  count: 500,
                },
                {
                  text: 'Toilet Paper',
                  count: 800,
                },
                {
                  text: 'Hand Sanitizer',
                  count: 650,
                },
                {
                  text: 'Work From Home',
                  count: 900,
                },
                {
                  text: 'Zoom',
                  count: 850,
                },
                {
                  text: 'Social Distancing',
                  count: 600,
                },
                {
                  text: 'Wash your hands',
                  count: 900,
                },
                {
                  text: 'Netflix',
                  count: 800,
                },
                {
                  text: 'Netflix Party',
                  count: 200,
                },
                {
                  text: 'White Claw',
                  count: 50,
                },
                {
                  text: 'Animal Crossing',
                  count: 250,
                },
                {
                  text: 'Bidet',
                  count: 400,
                },
                {
                  text: "Don't touch your face",
                  count: 900,
                },
                {
                  text: '6 feet',
                  count: 750,
                },
                {
                  text: 'Mask',
                  count: 950,
                },
                {
                  text: 'Stay Home',
                  count: 875,
                },
                {
                  text: 'Shelter In Place',
                  count: 725,
                },
                {
                  text: 'Hydroxychloroquine',
                  count: 650,
                },
                {
                  text: 'Quarantine',
                  count: 1000,
                },
                {
                  text: 'Does Bevmo Deliver?',
                  count: 300,
                },
                {
                  text: 'Blursday',
                  count: 150,
                },
                {
                  text: 'Facetime',
                  count: 800,
                },
                {
                  text: 'Nintendo Switch',
                  count: 550,
                },
                {
                  text: 'Chart',
                  count: 475,
                },
                {
                  text: 'Dashboard',
                  count: 450,
                },
                {
                  text: 'Covid',
                  count: 900,
                },
                {
                  text: 'Tony Robbins',
                  count: 45,
                },
                {
                  text: 'Italy',
                  count: 145,
                },
                {
                  text: 'China',
                  count: 345,
                },
              ],
              minLength: 4,
              ignore: ['establish', 'this'],

              colorType: 'palette',
              palette: ['#03a9f4', '#ff9800', '#4caf50', '#ff5722'],
            },
          },
        ],
      };

      // render pie chart
      zingchart.render({
        id: 'pieChart',
        data: pieChartConfig,
        height: '100%',
        width: '100%',
      });

      // render venn chart
      zingchart.render({
        id: 'vennChart',
        data: vennChartConfig,
        height: '100%',
        width: '100%',
      });

      // render bar chart
      zingchart.render({
        id: 'barChart',
        data: barChartConfig,
        height: '100%',
        width: '100%',
      });

      // render wordcloud
      zingchart.render({
        id: 'wordCloud',
        data: wordcloudConfig,
        height: '100%',
        width: '100%',
      });
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zc-html">
	<head>
    <meta charset="utf-8">
    <title>Funny Chart Dashboard</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body class="zc-body">
    <div class="dashboard--container">
      <div class="row">
        <!-- CHART CONTAINER -->
        <div id="pieChart" class="chart--container">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
        <!-- CHART CONTAINER -->
        <div id="vennChart" class="chart--container">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>
      <div class="row">
        <!-- CHART CONTAINER -->
        <div id="barChart" class="chart--container">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>
      <div class="row">
        <!-- CHART CONTAINER -->
        <div id="wordCloud" class="chart--container">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>
    </div>
  </body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let pieChartConfig = {
    type: 'pie',
    globals: {
      fontSize: '14px',
    },
    title: {
      text: 'Should I Wear Pants Today',
      fontSize: '24px',
    },
    legend: {
      adjustLayout: true,
      align: 'right',
      item: {
        padding: '3px 5px',
        cursor: 'hand',
      },
      marker: {
        size: 12,
        cursor: 'hand',
      },
      toggleAction: 'remove',
      verticalAlign: 'middle',
    },
    plot: {
      valueBox: {
        visible: false,
      },
      // hoverstate
      tooltip: {
        // % symbol represents a token to insert a value. Full list here:
        // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
        text: '%plot-text',
        padding: '10px 15px',
        borderRadius: '3px',
      },
      animation: {
        effect: 'ANIMATION_EXPAND_LEFT',
        method: 'ANIMATION_STRONG_EASE_OUT',
        sequence: 'ANIMATION_BY_PLOT',
        speed: 575,
      },
      cursor: 'hand',
      refAngle: -45,
      // animation docs here:
      // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    },
    plotarea: {
      margin: '65 dynamic',
    },
    // plot represents general series, or plots, styling
    series: [
      {
        text: 'No.',
        // plot values
        values: [75],
        backgroundColor: '#0095d9',
      },
      {
        text: 'Also no, <br>but in orange.',
        // plot values
        values: [10],
        backgroundColor: '#ff9800',
        border: '10px solid #ffcc80',
      },
    ],
  };

  let vennChartConfig = {
    type: 'venn',
    globals: {
      fontSize: '14px',
    },
    title: {
      text: 'Daily Choices',
      fontSize: '24px',
    },
    plot: {
      tooltip: {
        visible: false,
      },
      valueBox: {
        text: '%t',
        textAlign: 'left',
      },
    },
    series: [
      {
        // Set 1
        text: 'Working',
        values: [50],
        backgroundColor: '#03a9f4',
        join: [10],
      },
      {
        // Set 2
        text: 'Finding a new <br>Zoom filter to <br>impress the team',
        values: [50],
        backgroundColor: '#ff9800',
        join: [10],
      },
    ],
  };

  let barChartConfig = {
    type: 'bar',
    globals: {
      fontSize: '14px',
    },
    title: {
      text: 'Daily Work Productivity',
      fontSize: '24px',
      paddingLeft: '50px',
      textAlign: 'left',
      // will force margin and padding on title
      // adjustLayout: true
    },
    legend: {
      cursor: 'hand',
      draggable: true,
      dragHandler: 'icon',
      header: {
        height: '20px',
        text: 'Daily Activities',
      },
      minimize: true,
      toggleAction: 'remove',
    },
        // plot represents general series, or plots, styling
        plot: {
          stacked: true,
          // hoverstate
          tooltip: {
            visible: false,
          },
          // animation docs here:
          // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
          animation: {
            effect: 'ANIMATION_SLIDE_TOP',
            method: 'ANIMATION_BOUNCE_EASE_OUT',
            sequence: 'ANIMATION_NO_SEQUENCE',
            speed: 975,
          },
          lineWidth: '3px',
          // line node styling
          marker: {
            borderWidth: '0px',
            size: '6px',
          },
        },
    plotarea: {
      margin: '50px dynamic dynamic dynamic',
    },
    scaleX: {
      // set scale label
      label: {
        text: 'Days',
      },
      // convert text on scale indices
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    scaleY: {
      // scale label with unicode character
      label: {
        text: 'Work Productivity',
      },
      format: '%v%',
    },
    crosshairX: {
      plotLabel: {
        borderRadius: '3px',
        padding: '10px 15px',
        sortByValue: 'asc',
      },
      alpha: 0.28,
      lineWidth: '100%',
    },
    series: [
      {
        text: 'Working',
        // plot values
        values: [20, 30, 50, 50, 40, 0, 0],
        backgroundColor: '#03a9f4',
      },
      {
        text: 'Finding a New Zoom Filter',
        // plot values
        values: [60, 30, 0, 20, 0, 0, 0],
        backgroundColor: '#ff9800',
      },
      {
        text: 'Feeding my Kids',
        // plot values
        values: [20, 30, 30, 20, 30, 10, 20],
        backgroundColor: '#4caf50',
      },
      {
        text: 'Drinking Alcohol',
        // plot values
        values: [0, 10, 20, 10, 30, 90, 80],
        backgroundColor: '#ff5722',
      },
    ],
  };

  let wordcloudConfig = {
    graphset: [
      {
        type: 'null',
        height: '10%',
        title: {
          text: 'Popular Phrases',
          fontSize: '24px',
          paddingLeft: '50px',
          textAlign: 'left',
        },
      },
      {
        type: 'wordcloud',
        y: '10%',
        height: '90%',
        options: {
          words: [
            {
              text: 'Joe Exotic',
              count: 1000,
            },
            {
              text: 'Tiger King',
              count: 800,
            },
            {
              text: 'Flatten the curve',
              count: 400,
            },
            {
              text: 'Carol Baskin',
              count: 300,
            },
            {
              text: 'Baskin Robbins',
              count: 10,
            },
            {
              text: 'Corona',
              count: 500,
            },
            {
              text: 'Toilet Paper',
              count: 800,
            },
            {
              text: 'Hand Sanitizer',
              count: 650,
            },
            {
              text: 'Work From Home',
              count: 900,
            },
            {
              text: 'Zoom',
              count: 850,
            },
            {
              text: 'Social Distancing',
              count: 600,
            },
            {
              text: 'Wash your hands',
              count: 900,
            },
            {
              text: 'Netflix',
              count: 800,
            },
            {
              text: 'Netflix Party',
              count: 200,
            },
            {
              text: 'White Claw',
              count: 50,
            },
            {
              text: 'Animal Crossing',
              count: 250,
            },
            {
              text: 'Bidet',
              count: 400,
            },
            {
              text: "Don't touch your face",
              count: 900,
            },
            {
              text: '6 feet',
              count: 750,
            },
            {
              text: 'Mask',
              count: 950,
            },
            {
              text: 'Stay Home',
              count: 875,
            },
            {
              text: 'Shelter In Place',
              count: 725,
            },
            {
              text: 'Hydroxychloroquine',
              count: 650,
            },
            {
              text: 'Quarantine',
              count: 1000,
            },
            {
              text: 'Does Bevmo Deliver?',
              count: 300,
            },
            {
              text: 'Blursday',
              count: 150,
            },
            {
              text: 'Facetime',
              count: 800,
            },
            {
              text: 'Nintendo Switch',
              count: 550,
            },
            {
              text: 'Chart',
              count: 475,
            },
            {
              text: 'Dashboard',
              count: 450,
            },
            {
              text: 'Covid',
              count: 900,
            },
            {
              text: 'Tony Robbins',
              count: 45,
            },
            {
              text: 'Italy',
              count: 145,
            },
            {
              text: 'China',
              count: 345,
            },
          ],
          minLength: 4,
          ignore: ['establish', 'this'],

          colorType: 'palette',
          palette: ['#03a9f4', '#ff9800', '#4caf50', '#ff5722'],
        },
      },
    ],
  };

  // render pie chart
  zingchart.render({
    id: 'pieChart',
    data: pieChartConfig,
    height: '100%',
    width: '100%',
  });

  // render venn chart
  zingchart.render({
    id: 'vennChart',
    data: vennChartConfig,
    height: '100%',
    width: '100%',
  });

  // render bar chart
  zingchart.render({
    id: 'barChart',
    data: barChartConfig,
    height: '100%',
    width: '100%',
  });

  // render wordcloud
  zingchart.render({
    id: 'wordCloud',
    data: wordcloudConfig,
    height: '100%',
    width: '100%',
  });
});
.zc-html, .zc-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.dashboard--container {
  display: flex;
  flex-direction: column;
}

.dashboard--container .row {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.chart--container {
  display: flex;
  flex-grow: 1;
  min-width:400px;
  min-height:400px;
}

.zc-ref {
  display: none;
}
Financial Dashboard 13/281 Dynamic Scatter Healthcare Chart

Related Documentation:

?
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
impress the team
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
100%
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
Wait. Loading...