Dashboard Graphs with Null Values

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/FLBA7M0U

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #263238;
    }

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

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


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      globals: {
        fontFamily: 'Arial',
        fontWeight: 'normal',
      },
      backgroundColor: '#263238',
      graphset: [{
          type: 'null',
          backgroundColor: 'none',
          x: '2.25%',
          y: '1%',
          title: {
            text: 'Exercise Tracker',
            backgroundColor: 'none',
            fontColor: 'white',
            fontSize: '26px',
            textAlign: 'left',
          },
        },
        {
          type: 'pie',
          backgroundColor: 'white',
          borderRadius: '4px',
          width: '30%',
          height: '40%',
          x: '3%',
          y: '10%',
          title: {
            text: 'Step Count',
            backgroundColor: 'none',
            fontColor: '#000000',
            fontSize: '13px',
            offsetX: '10%',
            offsetY: '10%',
            textAlign: 'left',
          },
          plot: {
            tooltip: {
              rules: [{
                text: '%v %t',
                borderRadius: '4px',
                rule: '%i == 0',
                shadow: false,
              }, ],
            },
            valueBox: {
              type: 'first',
              text: '%v',
              connected: false,
              fontColor: '#000000',
              fontSize: '20px',
              placement: 'center',
              rules: [{
                rule: '%v < 3850',
                visible: false,
              }, ],
              visible: true,
            },
            animation: {
              delay: 0,
              effect: 'ANIMATION_EXPAND_VERTICAL',
              method: 'ANIMATION_LINEAR',
              sequence: 'ANIMATION_BY_PLOT',
              speed: '600',
            },
            detach: false,
            hoverState: {
              visible: false,
            },
            refAngle: 300,
            slice: 50,
          },
          plotarea: {
            margin: '20% 0% 0% 0%',
          },
          valueBox: {
            visible: true,
          },
          series: [{
              text: 'steps taken.',
              values: [4886],
              backgroundColor: '#00baf0',

              shadow: false,
            },
            {
              text: 'steps remaining.',
              alpha: '0.5',
              values: [1225],
              backgroundColor: '#dadada',
              shadow: false,
            },
          ],
        },
        {
          type: 'pie',
          backgroundColor: '#ffffff',
          borderRadius: '4px',
          width: '30%',
          height: '40%',
          x: '35%',
          y: '10%',
          title: {
            text: '<strong>Distance</strong> / Miles',
            backgroundColor: 'none',
            fontColor: '#000000',
            fontSize: '13px',
            offsetX: '10%',
            offsetY: '10%',
            textAlign: 'left',
          },
          plot: {
            tooltip: {
              rules: [{
                  text: '%v %t Completed',
                  borderRadius: '4px',
                  rule: '%v == 5.6',
                  shadow: false,
                },
                {
                  text: '%v Remaining',
                  borderRadius: '4px',
                  rule: '%v == 4.4',
                  shadow: false,
                },
              ],
            },
            valueBox: {
              type: 'first',
              text: '%v',
              connected: false,
              fontColor: '#000000',
              fontSize: '20px',
              placement: 'center',
              rules: [{
                rule: '%v < 5.6',
                visible: false,
              }, ],
              visible: true,
            },
            animation: {
              delay: 0,
              effect: 'ANIMATION_EXPAND_VERTICAL',
              method: 'ANIMATION_LINEAR',
              sequence: 'ANIMATION_BY_PLOT',
              speed: '600',
            },
            detach: false,
            hoverState: {
              visible: false,
            },
            refAngle: 270,
            slice: 50,
          },
          plotarea: {
            margin: '20% 0% 0% 0%',
          },
          valueBox: {
            visible: true,
          },
          series: [{
              text: 'Miles',
              values: [5.6],
              backgroundColor: '#8AB839',
              borderWidth: '0px',
              shadow: false,
            },
            {
              values: [4.4],
              alpha: 0.5,
              backgroundColor: '#dadada',
              borderColor: '#dadada',
              borderWidth: '1px',
              shadow: false,
            },
          ],
        },
        {
          type: 'pie',
          backgroundColor: '#ffffff',
          borderRadius: '4px',
          width: '30%',
          height: '40%',
          x: '67%',
          y: '10%',
          title: {
            text: 'Calories',
            backgroundColor: 'none',
            fontColor: '#000000',
            fontSize: '13px',
            offsetX: '10%',
            offsetY: '10%',
            textAlign: 'left',
          },
          plot: {
            tooltip: {
              rules: [{
                  text: '%v %t Burned',
                  borderRadius: '4px',
                  rule: '%v == 2078',
                  shadow: false,
                },
                {
                  text: '%v Remaining',
                  borderRadius: '4px',
                  rule: '%v == 422',
                  shadow: false,
                },
              ],
            },
            valueBox: {
              type: 'first',
              text: '%v',
              connected: false,
              fontColor: '#000000',
              fontSize: '20px',
              placement: 'center',
              rules: [{
                rule: '%v < 2078',
                visible: false,
              }, ],
              visible: true,
            },
            animation: {
              delay: 0,
              effect: 'ANIMATION_EXPAND_VERTICAL',
              method: 'ANIMATION_LINEAR',
              sequence: 'ANIMATION_BY_PLOT',
              speed: '600',
            },
            detach: false,
            hoverState: {
              visible: false,
            },
            refAngle: 270,
            slice: 50,
          },
          plotarea: {
            margin: '20% 0% 0% 0%',
          },
          valueBox: {
            visible: true,
          },
          series: [{
              text: 'Calories',
              values: [2078],
              backgroundColor: '#FABE28',
              borderWidth: '0px',
              shadow: false,
            },
            {
              values: [422],
              alpha: 0.5,
              backgroundColor: '#dadada',
              borderColor: '#dadada',
              borderWidth: '1px',
              shadow: false,
            },
          ],
        },
        {
          type: 'bar',
          backgroundColor: '#ffffff',
          borderRadius: '4px',
          width: '94%',
          height: '42%',
          x: '3%',
          y: '53%',
          title: {
            text: 'Step Tracker',
            backgroundColor: 'none',
            fontColor: '#000000',
            fontSize: '13px',
            offsetX: '10%',
            offsetY: '10%',
            textAlign: 'left',
          },
          legend: {
            tooltip: {
              text: '%plot-description',
            },
            backgroundColor: 'none',
            borderColor: 'none',
            item: {
              fontColor: '#000000',
            },
            layout: 'x3',
            marker: {
              type: 'circle',
              borderWidth: '0px',
            },
            shadow: false,
            toggleAction: 'remove',
            x: '52.5%',
          },
          plot: {
            animation: {
              effect: 'ANIMATION_EXPAND_BOTTOM',
            },
            backgroundColor: '#000000',
          },
          plotarea: {
            margin: '35% 3.5% 20% 7.5%',
          },
          scaleX: {
            values: [
              '12AM',
              '2AM',
              '4AM',
              '6AM',
              '8AM',
              '10AM',
              '<strong>NOON</strong>',
              '2PM',
              '4PM',
              '6PM',
              '8PM',
              '10PM',
              '12AM',
            ],
            guide: {
              visible: false,
            },
            item: {
              fontSize: '10px',
              offsetY: '-2%',
            },
            lineColor: '#adadad',
            lineWidth: '1px',
            tick: {
              visible: false,
            },
          },
          scaleY: {
            values: '0:300:100',
            guide: {
              lineColor: '#adadad',
              lineStyle: 'solid',
            },
            item: {
              fontSize: '10px',
              offsetX: '2%',
            },
            lineColor: 'none',
            tick: {
              visible: false,
            },
          },
          tooltip: {
            text: '%t<br><strong>%v</strong>',
            padding: '5px 10px',
            borderRadius: '4px',
            callout: true,
            fontSize: '12px',
            shadow: false,
          },
          series: [{
              text: 'Light',
              values: [null, null, null, 170, 220, 240, 260, 250, 20, 10, 5],
              backgroundColor: '#FABE28',
              description: '< 3 Miles / Hour',
              hoverState: {
                backgroundColor: '#FFC942',
              },
            },
            {
              text: 'Moderate',
              values: [null, null, null, 30, 50, 40, 104, 34, 8, 15, 5, 0],
              backgroundColor: '#FF8A00',
              description: '> 3 Miles / Hour < 5 Miles / Hour',
              hoverState: {
                backgroundColor: '#FF9619',
              },
            },
            {
              text: 'Intense',
              values: [null, null, null, 33, 22, 17, 11, 8, 200, 100, 50],
              backgroundColor: '#88C100',
              description: '> 5 Miles / Hour',
              hoverState: {
                backgroundColor: '#91CE00',
              },
            },
          ],
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-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 id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

// CHART CONFIG
// -----------------------------
let chartConfig = {
  globals: {
    fontFamily: 'Arial',
    fontWeight: 'normal',
  },
  backgroundColor: '#263238',
  graphset: [
    {
      type: 'null',
      backgroundColor: 'none',
      x: '2.25%',
      y: '1%',
      title: {
        text: 'Exercise Tracker',
        backgroundColor: 'none',
        fontColor: 'white',
        fontSize: '26px',
        textAlign: 'left',
      },
    },
    {
      type: 'pie',
      backgroundColor: 'white',
      borderRadius: '4px',
      width: '30%',
      height: '40%',
      x: '3%',
      y: '10%',
      title: {
        text: 'Step Count',
        backgroundColor: 'none',
        fontColor: '#000000',
        fontSize: '13px',
        offsetX: '10%',
        offsetY: '10%',
        textAlign: 'left',
      },
      plot: {
        tooltip: {
          rules: [
            {
              text: '%v %t',
              borderRadius: '4px',
              rule: '%i == 0',
              shadow: false,
            },
          ],
        },
        valueBox: {
          type: 'first',
          text: '%v',
          connected: false,
          fontColor: '#000000',
          fontSize: '20px',
          placement: 'center',
          rules: [
            {
              rule: '%v < 3850',
              visible: false,
            },
          ],
          visible: true,
        },
        animation: {
          delay: 0,
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_BY_PLOT',
          speed: '600',
        },
        detach: false,
        hoverState: {
          visible: false,
        },
        refAngle: 300,
        slice: 50,
      },
      plotarea: {
        margin: '20% 0% 0% 0%',
      },
      valueBox: {
        visible: true,
      },
      series: [
        {
          text: 'steps taken.',
          values: [4886],
          backgroundColor: '#00baf0',

          shadow: false,
        },
        {
          text: 'steps remaining.',
          alpha: '0.5',
          values: [1225],
          backgroundColor: '#dadada',
          shadow: false,
        },
      ],
    },
    {
      type: 'pie',
      backgroundColor: '#ffffff',
      borderRadius: '4px',
      width: '30%',
      height: '40%',
      x: '35%',
      y: '10%',
      title: {
        text: '<strong>Distance</strong> / Miles',
        backgroundColor: 'none',
        fontColor: '#000000',
        fontSize: '13px',
        offsetX: '10%',
        offsetY: '10%',
        textAlign: 'left',
      },
      plot: {
        tooltip: {
          rules: [
            {
              text: '%v %t Completed',
              borderRadius: '4px',
              rule: '%v == 5.6',
              shadow: false,
            },
            {
              text: '%v Remaining',
              borderRadius: '4px',
              rule: '%v == 4.4',
              shadow: false,
            },
          ],
        },
        valueBox: {
          type: 'first',
          text: '%v',
          connected: false,
          fontColor: '#000000',
          fontSize: '20px',
          placement: 'center',
          rules: [
            {
              rule: '%v < 5.6',
              visible: false,
            },
          ],
          visible: true,
        },
        animation: {
          delay: 0,
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_BY_PLOT',
          speed: '600',
        },
        detach: false,
        hoverState: {
          visible: false,
        },
        refAngle: 270,
        slice: 50,
      },
      plotarea: {
        margin: '20% 0% 0% 0%',
      },
      valueBox: {
        visible: true,
      },
      series: [
        {
          text: 'Miles',
          values: [5.6],
          backgroundColor: '#8AB839',
          borderWidth: '0px',
          shadow: false,
        },
        {
          values: [4.4],
          alpha: 0.5,
          backgroundColor: '#dadada',
          borderColor: '#dadada',
          borderWidth: '1px',
          shadow: false,
        },
      ],
    },
    {
      type: 'pie',
      backgroundColor: '#ffffff',
      borderRadius: '4px',
      width: '30%',
      height: '40%',
      x: '67%',
      y: '10%',
      title: {
        text: 'Calories',
        backgroundColor: 'none',
        fontColor: '#000000',
        fontSize: '13px',
        offsetX: '10%',
        offsetY: '10%',
        textAlign: 'left',
      },
      plot: {
        tooltip: {
          rules: [
            {
              text: '%v %t Burned',
              borderRadius: '4px',
              rule: '%v == 2078',
              shadow: false,
            },
            {
              text: '%v Remaining',
              borderRadius: '4px',
              rule: '%v == 422',
              shadow: false,
            },
          ],
        },
        valueBox: {
          type: 'first',
          text: '%v',
          connected: false,
          fontColor: '#000000',
          fontSize: '20px',
          placement: 'center',
          rules: [
            {
              rule: '%v < 2078',
              visible: false,
            },
          ],
          visible: true,
        },
        animation: {
          delay: 0,
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_BY_PLOT',
          speed: '600',
        },
        detach: false,
        hoverState: {
          visible: false,
        },
        refAngle: 270,
        slice: 50,
      },
      plotarea: {
        margin: '20% 0% 0% 0%',
      },
      valueBox: {
        visible: true,
      },
      series: [
        {
          text: 'Calories',
          values: [2078],
          backgroundColor: '#FABE28',
          borderWidth: '0px',
          shadow: false,
        },
        {
          values: [422],
          alpha: 0.5,
          backgroundColor: '#dadada',
          borderColor: '#dadada',
          borderWidth: '1px',
          shadow: false,
        },
      ],
    },
    {
      type: 'bar',
      backgroundColor: '#ffffff',
      borderRadius: '4px',
      width: '94%',
      height: '42%',
      x: '3%',
      y: '53%',
      title: {
        text: 'Step Tracker',
        backgroundColor: 'none',
        fontColor: '#000000',
        fontSize: '13px',
        offsetX: '10%',
        offsetY: '10%',
        textAlign: 'left',
      },
      legend: {
        tooltip: {
          text: '%plot-description',
        },
        backgroundColor: 'none',
        borderColor: 'none',
        item: {
          fontColor: '#000000',
        },
        layout: 'x3',
        marker: {
          type: 'circle',
          borderWidth: '0px',
        },
        shadow: false,
        toggleAction: 'remove',
        x: '52.5%',
      },
      plot: {
        animation: {
          effect: 'ANIMATION_EXPAND_BOTTOM',
        },
        backgroundColor: '#000000',
      },
      plotarea: {
        margin: '35% 3.5% 20% 7.5%',
      },
      scaleX: {
        values: [
          '12AM',
          '2AM',
          '4AM',
          '6AM',
          '8AM',
          '10AM',
          '<strong>NOON</strong>',
          '2PM',
          '4PM',
          '6PM',
          '8PM',
          '10PM',
          '12AM',
        ],
        guide: {
          visible: false,
        },
        item: {
          fontSize: '10px',
          offsetY: '-2%',
        },
        lineColor: '#adadad',
        lineWidth: '1px',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        values: '0:300:100',
        guide: {
          lineColor: '#adadad',
          lineStyle: 'solid',
        },
        item: {
          fontSize: '10px',
          offsetX: '2%',
        },
        lineColor: 'none',
        tick: {
          visible: false,
        },
      },
      tooltip: {
        text: '%t<br><strong>%v</strong>',
        padding: '5px 10px',
        borderRadius: '4px',
        callout: true,
        fontSize: '12px',
        shadow: false,
      },
      series: [
        {
          text: 'Light',
          values: [null, null, null, 170, 220, 240, 260, 250, 20, 10, 5],
          backgroundColor: '#FABE28',
          description: '< 3 Miles / Hour',
          hoverState: {
            backgroundColor: '#FFC942',
          },
        },
        {
          text: 'Moderate',
          values: [null, null, null, 30, 50, 40, 104, 34, 8, 15, 5, 0],
          backgroundColor: '#FF8A00',
          description: '> 3 Miles / Hour < 5 Miles / Hour',
          hoverState: {
            backgroundColor: '#FF9619',
          },
        },
        {
          text: 'Intense',
          values: [null, null, null, 33, 22, 17, 11, 8, 200, 100, 50],
          backgroundColor: '#88C100',
          description: '> 5 Miles / Hour',
          hoverState: {
            backgroundColor: '#91CE00',
          },
        },
      ],
    },
  ],
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
});

.zc-body { background:#263238; }

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

.zc-ref {
  display: none;
}

Timeline Style Map with Interactive Slider Input 215/275 Double Ring Chart

Dashboard Graphs with Null Values

Related Documentation: