Gallery Back to Gallery

Mobile Fitness Dashboard

This Week

Goal 125 Points
25%
 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: