Gallery Back to Gallery

Mobile Fitness Dashboard

75POINTS75POINTS

This Week

Goal 125 Points
25%
MonFriTueWedThurs
 Today's Workouts ›
 Today's Steps: 2,850 › 
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    /* Defaults */
    :root {
      --altGray: #E1EBEA;
      --lightGray: #F1F2F4;
      --gray: #E9E9F1;
      --green: #00B9AB;
      --white: #fff;
      --fontColor: #808288;
    }

    .zc-body {
      background: #9ef1ea;
      box-sizing: border-box;
      color: var(--fontColor);
      font-family: Poppins;
      font-size: 14px;
      text-shadow: none;
      line-height: 8px;
    }

    /* Main Container */
    .fitness-device {
      margin: 0 auto;
      padding: 3.125rem 0;
      width: 100%;
      max-width: 350px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: sans-serif;
      background: #fff;
      border: 8px solid var(--lightGray);
      border-radius: 32px;
      box-sizing: border-box;
    }

    /* Main Wrapper */
    .fitness-wrap {
      width: 300px;
      display: flex;
      flex-direction: column;
      background-color: var(--gray);
    }

    /* Header */
    .fitness-header {
      height: 300px;
      background-color: var(--green);
      color: var(--white) !important;
      text-align: center;
      clip-path: circle(90% at 50% 10%);
    }

    .fitness-header-nav {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fitness-header-chart {
      height: 150px;
    }

    /* Chart */
    .fitness-chart {
      min-height: 150px;
    }

    .fitness-chart-chart {
      min-height: 100px;
      width: 100%;
    }

    .fitness-chart-circle {
      height: 50px;
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid var(--green);
      background-color: var(--gray);
      color: var(--green);
      margin: 0 auto;
      position: relative;
      top: -32px;
      z-index: 9999;
    }

    /* Results */
    .fitness-results {
      padding-bottom: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .fitness-results>*+* {
      margin-top: 4px;
    }

    .fitness-result {
      height: 40px;
      width: 95%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--white);
      border: 1px solid var(--altGray);
      border-radius: 4px;
    }

    /* Footer */
    .fitness-footer {
      min-height: 45px;
      width: 100%;
      flex: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      background-color: var(--white);
      box-shadow: inset 0px 0px 0px 1px var(--altGray);
    }

    .fitness-footer a {
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: var(--green);
    }

    .fitness-footer a+a {
      border-left: 1px solid var(--altGray);
    }

    .zc-ref {
      display: none;
    }

    img.zc-img {
      max-width: initial;
    }
  </style>
</head>

<body class="zc-body">

  <div class="fitness-device">

    <div class="fitness-wrap">

      <!-- Header -->
      <section class="fitness-header">
        <nav class="fitness-header-nav">
          <strong class="fitness-header-title">me@mybest</strong>
          <i class="fa fa-info-circle" aria-hidden="true"></i>
        </nav>
        <div id="myChart1" class="fitness-header-chart">
        </div>
        <p>This Week</p>
        <span>Goal 125 Points</span>
      </section>

      <!-- Chart -->
      <section class="fitness-chart">
        <div class="fitness-chart-circle">
          <span>25%</span>
        </div>
        <div id="myChart2" class="fitness-chart-chart">
        </div>
      </section>

      <!-- Results -->
      <section class="fitness-results">
        <div class="fitness-result">
          <span> Today's Workouts ›</span>
        </div>
        <div class="fitness-result">
          <span> Today's Steps: <span>2,850</span> ›</span>
        </div>
      </section>

      <!-- Footer -->
      <nav class="fitness-footer">
        <a href="#">Home</a>
        <a href="#">Charts</a>
        <a href="#">More</a>
      </nav>

    </div>

  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chart1Id = 'myChart1';
    let chart2Id = 'myChart2';


    // CHART CONFIG
    // -----------------------------

    // Chart 1
    let chartConfig = {
      type: "ring",
      globals: {
        fontFamily: 'Poppins'
      },
      plot: {
        slice: '80%',
        valueBox: {
          text: '75<br><span style="font-size: 14px; color: var(--gray)">POINTS</span>',
          fontSize: '32px',
          fontWeight: 'normal',
          placement: 'center'
        }
      },
      plotarea: {
        margin: 0,
      },
      backgroundColor: 'transparent',
      series: [{
          values: [35],
          backgroundColor: 'var(--white)',
          borderWidth: 0,
          shadow: 0,
        },
        {
          values: [75],
          backgroundColor: 'var(--gray)',
          borderWidth: 0,
          shadow: 0,
          slice: 60
        }
      ]
    };

    // Chart 2
    let chart2Data = {
      type: 'line',
      globals: {
        fontFamily: 'Poppins'
      },
      backgroundColor: 'transparent',
      plot: {
        aspect: 'spline'
      },
      plotarea: {
        margin: '20px 30px 15px 30px'
      },
      scaleY: {
        visible: false
      },
      scaleX: {
        placement: 'opposite',
        labels: ['Mon', 'Tue', 'Wed', 'Thurs', 'Fri'],
        lineWidth: 0,
        guide: {
          visible: true,
          lineColor: 'var(--lightGray)',
          lineWidth: 4,
          lineStyle: 'solid'
        },
        tick: {
          visible: false
        }
      },
      series: [{
        values: [1, 2, 2, 3, 3],
        lineColor: 'var(--green)',
        marker: {
          backgroundColor: 'var(--gray)',
          borderColor: 'var(--green)',
          borderWidth: '2px'
        }
      }]
    }


    // RENDER CHARTS
    // -----------------------------

    // Chart 1
    zingchart.render({
      id: chart1Id,
      data: chartConfig,
      height: '100%',
      width: '100%'
    });

    // Chart 2
    zingchart.render({
      id: chart2Id,
      data: chart2Data,
      height: '100%',
      width: '100%'
    });
  </script>
</body>

</html>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">

  <div class="fitness-device">

    <div class="fitness-wrap">

      <!-- Header -->
      <section class="fitness-header">
        <nav class="fitness-header-nav">
          <strong class="fitness-header-title">me@mybest</strong>
          <i class="fa fa-info-circle" aria-hidden="true"></i>
        </nav>
        <div id="myChart1" class="fitness-header-chart">
        </div>
        <p>This Week</p>
        <span>Goal 125 Points</span>
      </section>

      <!-- Chart -->
      <section class="fitness-chart">
        <div class="fitness-chart-circle">
          <span>25%</span>
        </div>
        <div id="myChart2" class="fitness-chart-chart">
        </div>
      </section>

      <!-- Results -->
      <section class="fitness-results">
        <div class="fitness-result">
          <span> Today's Workouts ›</span>
        </div>
        <div class="fitness-result">
          <span> Today's Steps: <span>2,850</span> ›</span>
        </div>
      </section>

      <!-- Footer -->
      <nav class="fitness-footer">
        <a href="#">Home</a>
        <a href="#">Charts</a>
        <a href="#">More</a>
      </nav>

    </div>

  </div>

</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chart1Id = 'myChart1';
let chart2Id = 'myChart2';


// CHART CONFIG
// -----------------------------

// Chart 1
let chartConfig = {
  type: "ring",
  globals: {
    fontFamily: 'Poppins'
  },
  plot: {
    slice: '80%',
    valueBox: {
      text: '75<br><span style="font-size: 14px; color: var(--gray)">POINTS</span>',
      fontSize: '32px',
      fontWeight: 'normal',
      placement: 'center'
    }
  },
  plotarea: {
    margin: 0,
  },
  backgroundColor: 'transparent',
  series: [
    {
      values: [35],
      backgroundColor: 'var(--white)',
      borderWidth: 0,
      shadow: 0,
    },
    {
      values: [75],
      backgroundColor: 'var(--gray)',
      borderWidth: 0,
      shadow: 0,
      slice: 60
    }
  ]
};

// Chart 2
let chart2Data = {
  type: 'line',
  globals: {
    fontFamily: 'Poppins'
  },
  backgroundColor: 'transparent',
  plot: {
    aspect: 'spline'
  },
  plotarea: {
    margin: '20px 30px 15px 30px'
  },
  scaleY: {
    visible: false
  },
  scaleX: {
    placement: 'opposite',
    labels: ['Mon', 'Tue', 'Wed', 'Thurs', 'Fri'],
    lineWidth: 0,
    guide: {
      visible: true,
      lineColor: 'var(--lightGray)',
      lineWidth: 4,
      lineStyle: 'solid'
    },
    tick: {
      visible: false
    }
  },
  series: [
    {
      values: [1, 2, 2, 3, 3],
      lineColor: 'var(--green)',
      marker: {
        backgroundColor: 'var(--gray)',
        borderColor: 'var(--green)',
        borderWidth: '2px'
      }
    }
  ]
}


// RENDER CHARTS
// -----------------------------

// Chart 1
zingchart.render({
  id: chart1Id,
  data : chartConfig,
  height: '100%',
  width: '100%'
});

// Chart 2
zingchart.render({
  id: chart2Id,
  data : chart2Data,
  height: '100%',
  width: '100%'
});
/* Defaults */
:root {
  --altGray: #E1EBEA;
  --lightGray: #F1F2F4;
  --gray: #E9E9F1;
  --green: #00B9AB;
  --white: #fff;
  --fontColor: #808288;
}

.zc-body {
  background: #9ef1ea;
  box-sizing: border-box;
  color: var(--fontColor);
  font-family: Poppins;
  font-size: 14px;
  text-shadow: none;
  line-height: 8px;
}

/* Main Container */
.fitness-device {
  margin: 0 auto;
  padding: 3.125rem 0;
  width: 100%;
  max-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background: #fff;
  border: 8px solid var(--lightGray);
  border-radius: 32px;
  box-sizing: border-box;
}

/* Main Wrapper */
.fitness-wrap {
  width: 300px;
  display: flex;
  flex-direction: column;
  background-color: var(--gray);
}

/* Header */
.fitness-header {
  height: 300px;
  background-color: var(--green);
  color: var(--white) !important;
  text-align: center;
  clip-path: circle(90% at 50% 10%);
}
.fitness-header-nav { height:50px; display:flex; align-items:center; justify-content:center; }
.fitness-header-chart { height:150px; }

/* Chart */
.fitness-chart { min-height:150px; }
.fitness-chart-chart { min-height:100px; width:100%; }
.fitness-chart-circle {
  height: 50px;
  width: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  border: 2px solid var(--green);
  background-color: var(--gray);
  color: var(--green);
  margin: 0 auto;
  position: relative;
  top: -32px;
  z-index: 9999;
}

/* Results */
.fitness-results { padding-bottom:4px; display:flex; flex-direction:column; align-items:center; }
.fitness-results > * + * { margin-top:4px; }
.fitness-result {
  height: 40px;
  width: 95%;
  display: flex;
  align-items:center;
  justify-content: center;
  background-color: var(--white);
  border: 1px solid var(--altGray);
  border-radius: 4px;
}

/* Footer */
.fitness-footer {
  min-height: 45px;
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--white);
  box-shadow:inset 0px 0px 0px 1px var(--altGray);
}
.fitness-footer a { display:flex; align-items:center; justify-content:center; text-transform:uppercase; color: var(--green); }
.fitness-footer a + a { border-left: 1px solid var(--altGray); }

.zc-ref { display:none; }

img.zc-img {max-width: initial;}
Multiple Radar Charts 37/281 Stock Trading Phone Dashboard

Related Documentation:

?
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
Thurs
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source