Gallery Back to Gallery

Responsive Flexbox Dashboard

Load distributionUtilization across nodes03120%100%20%40%60%80%20%30%50%35%
UtilizationAmount of current usage30%
Average Interaction0121234567890612345
Status Count10:13 PM12:13 PM600001000020000300004000050000status 200status 300status 400status 500
Communication030510152025
33kw
120bpm70bpm20bpm
Distribution0-1061-7011-2021-3031-4041-5051-600162468101214235681012
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
    }

    html,
    body {
      background-color: #222;
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    .dashboard {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      min-width: 300px;
    }

    .column {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .item {
      margin: 5px;
      flex-grow: 1;
      min-height: 250px;
      min-width: 250px;
    }

    .small.item {
      min-width: 305px;
    }

    #br {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      flex-wrap: wrap;
      min-height: 250px;
    }

    #br>section {
      flex-grow: 1;
    }
  </style>
</head>

<body>
  <div class='dashboard'>

    <div class='column'>
      <div id="chart1" class='item'></div>
      <div id="chart2" class='item'></div>
      <div id="chart3" class='item'></div>
    </div>

    <div class='column'>
      <div id="chart4" class='item'></div>
    </div>
  </div>

  <div class='dashboard'>

    <div class='column'>
      <div id="chart5" class='item'></div>
    </div>

    <div id="br">
      <section>
        <div id="chart6" class='small item'></div>
        <div id="chart7" class='small item'></div>
      </section>

      <div class='column'>
        <div id="chart8" class='item'></div>
      </div>
    </div>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // zingchart.RESIZESPEED = 0;
    // zingchart.DEBOUNCESPEED = 0;
    zingchart.render({
      id: 'chart3',
      height: '100%',
      width: '100%',
      data: {
        type: 'line',
        backgroundColor: "#FFC107",
        title: {
          text: "Average Interaction",
          textAlign: "left",
          fontColor: "white"
        },
        tooltip: {
          fontColor: "#333"
        },
        plot: {
          marker: {
            backgroundColor: "#FFC107",
            borderWidth: "2px"
          }
        },
        scaleX: {
          lineColor: "white",
          tick: {
            lineColor: "white"
          },
          item: {
            fontColor: "white"
          },
          guide: {
            lineColor: "#ffde7b"
          }
        },
        scaleY: {
          lineColor: "white",
          tick: {
            lineColor: "white"
          },
          item: {
            fontColor: "white"
          },
          guide: {
            lineColor: "#ffde7b"
          }
        },
        series: [{
          values: [5, 3, 4, 5, 6, 3, 5, 3, 4, 6, 4, 3, 1],
          lineColor: "white",
          lineWidth: "2px"
        }]
      }
    });
    zingchart.render({
      id: 'chart2',
      height: '100%',
      width: '100%',
      data: {
        type: "pie",
        backgroundColor: "#f24c4c",
        title: {
          text: "Utilization",
          textAlign: "left",
          adjustLayout: true,
          fontColor: "white"
        },
        subtitle: {
          text: "Amount of current usage",
          textAlign: "left",
          fontColor: "white"
        },
        borderRadius: 4,
        plot: {
          slice: 90,
          refAngle: 270,
          detach: false,
          hoverState: {
            visible: false
          },
          valueBox: {
            visible: true,
            type: "first",
            connected: false,
            placement: "center",
            text: "%v%",
            fontColor: "white",
            fontSize: "20px"
          },
          tooltip: {
            fontColor: "#333",
            rules: [{
              rule: "%i == 0",
              text: "%v Created",
              borderRadius: 4
            }, {
              rule: "%i == 1",
              text: "%v Left",
              borderRadius: 4
            }]
          }
        },
        plotarea: {
          margin: "dynamic",
        },
        series: [{
          values: [30],
          backgroundColor: "#ffffff",
          borderWidth: "0px",
          shadow: 0
        }, {
          values: [70],
          backgroundColor: "#dadada",
          alpha: "0.5",
          borderWidth: "1px",
          borderWidth: "1px",
          shadow: 0,
          valueBox: {
            visible: false
          }
        }]
      }
    });
    zingchart.render({
      id: 'chart1',
      height: '100%',
      width: '100%',
      data: {
        type: "bar",
        stacked: true,
        stackType: "100%",
        backgroundColor: "#4CAF50",
        title: {
          text: "Load distribution",
          textAlign: "left",
          adjustLayout: true,
          fontColor: "#ffffff"
        },
        subtitle: {
          text: "Utilization across nodes",
          textAlign: "left",
          fontColor: "#ffffff"
        },
        plot: {
          barsSpaceLeft: 0,
          hoverState: {
            visible: false
          }
        },
        tooltip: {
          fontColor: "#333"
        },
        plotarea: {
          margin: "dynamic",
        },
        scaleY: {
          guide: {
            visible: false
          },
          lineWidth: "0px",
          tick: {
            lineWidth: "1px",
            lineColor: "#ffffff"
          },
          item: {
            fontColor: "#ffffff"
          },
          lineColor: "#ffffff"
        },
        scaleX: {
          guide: {
            visible: false
          },
          lineWidth: "1px",
          tick: {
            lineWidth: "1px",
            lineColor: "#ffffff"
          },
          item: {
            fontColor: "#ffffff"
          },
          lineColor: "#ffffff"
        },
        series: [{
          values: [20, 30, 50, 35],
          backgroundColor: "#92C351",
          valueBox: {
            text: "%v%",
            placement: "in",
            offsetY: "-10px"
          }
        }, {
          values: [40, 30, 30, 40],
          backgroundColor: "#e9ffcd",
        }]
      }
    });
    zingchart.render({
      id: 'chart4',
      height: '100%',
      width: '100%',
      data: {
        backgroundColor: "#28C2D1",
        type: "bar",
        stacked: true,
        title: {
          text: "Status Count",
          textAlign: "left",
          fontColor: "#fff"
        },
        legend: {
          margin: "93% auto 90% auto",
          layout: "float",
          backgroundColor: "transparent",
          borderColor: "transparent",
          toggleAction: "remove",
          marker: {
            borderColor: "transparent"
          },
          item: {
            markerStyle: "rpoly6",
            fontColor: "#ffffff",
          }
        },
        series: [{
          values: [1637, 1619, 2464, 4289, 4859, 10186, 4285, 2707, 16618, 38444, 42541, 40284, 35921, 38673, 26457],
          text: "status 200",
          backgroundColor: "#d1fbff"
        }, {
          values: [229, 283, 671, 802, 1263, 2943, 2043, 497, 3068, 8265, 8754, 10403, 9558, 9991, 7907],
          text: "status 300",
          backgroundColor: "#3deeff"
        }, {
          values: [10, 4, 19, 17, 18, 59, 49, 14, 168, 392, 428, 438, 330, 431, 283],
          text: "status 400",
          backgroundColor: "#3d94ff"
        }, {
          values: [1, "", 1, "", "", 5, "", 1, ""],
          text: "status 500",
          backgroundColor: "#00626c"
        }],
        tooltip: {
          text: "%v",
          borderRadius: "5px",
          shadow: 0,
          fontColor: "black"
        },
        plot: {
          hoverState: {
            visible: false
          }
        },
        plotarea: {
          margin: "65px 50px 60px 65px"
        },
        scaleX: {
          transform: {
            type: "date",
            all: "%h:%i %A",
            item: {
              visible: false
            }
          },
          minValue: 1437516814415,
          step: 3600000,
          guide: {
            visible: false
          },
          lineColor: "#ffffff",
          lineWidth: "1px",
          tick: {
            lineColor: "#ffffff",
            lineWidth: "1px"
          },
          item: {
            fontColor: "#ffffff"
          },
          refLine: {
            lineColor: "#ffffff"
          }
        },
        scaleY: {
          guide: {
            lineColor: "#ffffff"
          },
          lineColor: "#ffffff",
          lineWidth: "1px",
          tick: {
            lineColor: "#ffffff",
            lineWidth: "1px",
          },
          item: {
            fontColor: "#ffffff"
          },
          refLine: {
            lineColor: "#ffffff"
          }
        }
      }
    });
    zingchart.render({
      id: 'chart5',
      height: '100%',
      width: '100%',
      data: {
        type: 'line',
        backgroundColor: "#0277BD",
        title: {
          text: "Communication",
          textAlign: "left",
          fontColor: "white"
        },
        plot: {
          aspect: "spline",
          marker: {
            visible: false
          },
        },
        tooltip: {
          fontColor: "#333"
        },
        scaleX: {
          visible: false
        },
        scaleY: {
          lineColor: "white",
          tick: {
            lineColor: "white"
          },
          item: {
            fontColor: "white"
          },
          guide: {
            lineColor: "#ffde7b"
          }
        },
        series: [{
          values: generateSeriesData(100),
          lineColor: "white",
          lineWidth: "2px"
        }]
      }
    });
    zingchart.render({
      id: 'chart6',
      height: '100%',
      width: '100%',
      data: {
        type: 'line',
        backgroundColor: "#333",
        scaleY: {
          visible: false
        },
        scaleX: {
          visible: false
        },
        labels: [{
          text: "33kw",
          x: "5%",
          y: "2%",
          fontSize: "50px",
          fontColor: "white"
        }],
        plot: {
          borderWidth: "2px",
          marker: {
            visible: false
          },
          rules: [{
              rule: "%v > 20",
              lineColor: "#0380ab"
            },
            {
              rule: "%v < 5",
              lineColor: "#04a9e1"
            }
          ]
        },
        plotarea: {
          margin: '70 20 20 20'
        },
        series: [{
          values: generateSeriesData(150),
          backgroundColor: "#EA172F",
        }]
      }
    });
    zingchart.render({
      id: 'chart7',
      height: '100%',
      width: '100%',
      data: {
        type: "area",
        backgroundColor: "#F01646",
        plot: {
          aspect: "spline",
          alphaArea: 1,
          marker: {
            visible: false
          },
        },
        scaleX: {
          visible: false
        },
        scaleY: {
          visible: false
        },
        plotarea: {
          margin: "70 0 0 0"
        },
        labels: [{
            text: "120bpm",
            x: "5%",
            y: "2%",
            fontSize: "24px",
            fontColor: "#FFF"
          },
          {
            text: "70bpm",
            x: "40%",
            y: "2%",
            fontSize: "24px",
            fontColor: "#f690a6"
          },
          {
            text: "20bpm",
            x: "70%",
            y: "2%",
            fontSize: "24px",
            fontColor: "#761027"
          }
        ],
        series: [{
            values: [6, 7, 8, 7, 8, 7, 8, 9, 10, 6, 7, 8, 9, 5, 8],
            backgroundColor: "#fff",
            lineColor: "#fff"
          },
          {
            values: [3, 3, 4, 5, 5, 6, 7, 5, 6, 5, 4, 3, 4, 4, 5],
            backgroundColor: "#f690a6",
            lineColor: "#f690a6"
          },
          {
            values: [1, 2, 3, 2, 1, 2, 2, 3, 4, 4, 3, 2, 2, 2, 3],
            backgroundColor: "#761027",
            lineColor: "#761027"
          },
        ]
      }
    });
    zingchart.render({
      id: 'chart8',
      height: '100%',
      width: '100%',
      data: {
        type: 'hbar',
        backgroundColor: '#5BC254',
        plotarea: {
          margin: 'dynamic'
        },
        title: {
          text: "Distribution",
          textAlign: "left",
          fontColor: "white",
          adjustLayout: true
        },
        subtitle: {
          fontColor: "white",
          textAlign: "left"
        },
        scaleX: {
          lineColor: "transparent",
          item: {
            fontColor: "white",
          },
          tick: {
            lineColor: "transparent",
          },
          labels: ["0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100"]
        },
        scaleY: {
          maxValue: 15,
          lineColor: "transparent",
          item: {
            fontColor: "white"
          },
          guide: {
            lineStyle: "solid",
            lineColor: "#a1dd9d"
          },
          tick: {
            lineColor: "#a1dd9d",
          }
        },
        plot: {
          hoverState: {
            visible: false
          },
          valueBox: {
            placement: 'top'
          },
          tooltip: {
            visible: false
          }
        },
        series: [{
          values: [2, 3, 5, 6, 8, 10, 12],
          backgroundColor: "#fff"
        }]
      }
    });

    function generateSeriesData(num) {
      var values = [];
      var startDate = 1349617440000;
      for (var i = 0; i < num; i++) {
        values.push([(startDate + (i * 50000)), Math.floor(Math.random() * 30)]);
      }
      return values;
    }
    // make data appear to be moving
    setInterval(function() {
      zingchart.exec('chart6', 'setseriesvalues', {
        plotindex: 0,
        values: generateSeriesData(150)
      });
    }, 500);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
	<body>
	<div class='dashboard'>

	  <div class='column'>
  	  <div id="chart1" class='item'></div>
      <div id="chart2" class='item'></div>
      <div id="chart3" class='item'></div>
    </div>

	  <div class='column'>
      <div id="chart4" class='item'></div>
    </div>
  </div>

  <div class='dashboard'>

	  <div class='column'>
      <div id="chart5" class='item'></div>
    </div>

    <div id="br">
      <section>
        <div id="chart6" class='small item'></div>
        <div id="chart7" class='small item'></div>
      </section>

  	  <div class='column'>
      <div id="chart8" class='item'></div>
    </div>
    </div>
  </div>
	</body>
</html>
// zingchart.RESIZESPEED = 0;
// zingchart.DEBOUNCESPEED = 0;
zingchart.render({
    id: 'chart3',
    height: '100%',
    width: '100%',
    data: {
        type: 'line',
        backgroundColor: "#FFC107",
        title: {
            text: "Average Interaction",
            textAlign: "left",
            fontColor: "white"
        },
        tooltip: {
            fontColor: "#333"
        },
        plot: {
            marker: {
                backgroundColor: "#FFC107",
                borderWidth: "2px"
            }
        },
        scaleX: {
            lineColor: "white",
            tick: {
                lineColor: "white"
            },
            item: {
                fontColor: "white"
            },
            guide: {
                lineColor: "#ffde7b"
            }
        },
        scaleY: {
            lineColor: "white",
            tick: {
                lineColor: "white"
            },
            item: {
                fontColor: "white"
            },
            guide: {
                lineColor: "#ffde7b"
            }
        },
        series: [{
                values: [5, 3, 4, 5, 6, 3, 5, 3, 4, 6, 4, 3, 1],
                lineColor: "white",
                lineWidth: "2px"
            }]
    }
});
zingchart.render({
    id: 'chart2',
    height: '100%',
    width: '100%',
    data: {
        type: "pie",
        backgroundColor: "#f24c4c",
        title: {
            text: "Utilization",
            textAlign: "left",
            adjustLayout: true,
            fontColor: "white"
        },
        subtitle: {
            text: "Amount of current usage",
            textAlign: "left",
            fontColor: "white"
        },
        borderRadius: 4,
        plot: {
            slice: 90,
            refAngle: 270,
            detach: false,
            hoverState: {
                visible: false
            },
            valueBox: {
                visible: true,
                type: "first",
                connected: false,
                placement: "center",
                text: "%v%",
                fontColor: "white",
                fontSize: "20px"
            },
            tooltip: {
                fontColor: "#333",
                rules: [{
                        rule: "%i == 0",
                        text: "%v Created",
                        borderRadius: 4
                    }, {
                        rule: "%i == 1",
                        text: "%v Left",
                        borderRadius: 4
                    }]
            }
        },
        plotarea: {
            margin: "dynamic",
        },
        series: [{
                values: [30],
                backgroundColor: "#ffffff",
                borderWidth: "0px",
                shadow: 0
            }, {
                values: [70],
                backgroundColor: "#dadada",
                alpha: "0.5",
                borderWidth: "1px",
                borderWidth: "1px",
                shadow: 0,
                valueBox: {
                    visible: false
                }
            }]
    }
});
zingchart.render({
    id: 'chart1',
    height: '100%',
    width: '100%',
    data: {
        type: "bar",
        stacked: true,
        stackType: "100%",
        backgroundColor: "#4CAF50",
        title: {
            text: "Load distribution",
            textAlign: "left",
            adjustLayout: true,
            fontColor: "#ffffff"
        },
        subtitle: {
            text: "Utilization across nodes",
            textAlign: "left",
            fontColor: "#ffffff"
        },
        plot: {
            barsSpaceLeft: 0,
            hoverState: {
                visible: false
            }
        },
        tooltip: {
            fontColor: "#333"
        },
        plotarea: {
            margin: "dynamic",
        },
        scaleY: {
            guide: {
                visible: false
            },
            lineWidth: "0px",
            tick: {
                lineWidth: "1px",
                lineColor: "#ffffff"
            },
            item: {
                fontColor: "#ffffff"
            },
            lineColor: "#ffffff"
        },
        scaleX: {
            guide: {
                visible: false
            },
            lineWidth: "1px",
            tick: {
                lineWidth: "1px",
                lineColor: "#ffffff"
            },
            item: {
                fontColor: "#ffffff"
            },
            lineColor: "#ffffff"
        },
        series: [{
                values: [20, 30, 50, 35],
                backgroundColor: "#92C351",
                valueBox: {
                    text: "%v%",
                    placement: "in",
                    offsetY: "-10px"
                }
            }, {
                values: [40, 30, 30, 40],
                backgroundColor: "#e9ffcd",
            }]
    }
});
zingchart.render({
    id: 'chart4',
    height: '100%',
    width: '100%',
    data: {
        backgroundColor: "#28C2D1",
        type: "bar",
        stacked: true,
        title: {
            text: "Status Count",
            textAlign: "left",
            fontColor: "#fff"
        },
        legend: {
            margin: "93% auto 90% auto",
            layout: "float",
            backgroundColor: "transparent",
            borderColor: "transparent",
            toggleAction: "remove",
            marker: {
                borderColor: "transparent"
            },
            item: {
                markerStyle: "rpoly6",
                fontColor: "#ffffff",
            }
        },
        series: [{
                values: [1637, 1619, 2464, 4289, 4859, 10186, 4285, 2707, 16618, 38444, 42541, 40284, 35921, 38673, 26457],
                text: "status 200",
                backgroundColor: "#d1fbff"
            }, {
                values: [229, 283, 671, 802, 1263, 2943, 2043, 497, 3068, 8265, 8754, 10403, 9558, 9991, 7907],
                text: "status 300",
                backgroundColor: "#3deeff"
            }, {
                values: [10, 4, 19, 17, 18, 59, 49, 14, 168, 392, 428, 438, 330, 431, 283],
                text: "status 400",
                backgroundColor: "#3d94ff"
            }, {
                values: [1, "", 1, "", "", 5, "", 1, ""],
                text: "status 500",
                backgroundColor: "#00626c"
            }],
        tooltip: {
            text: "%v",
            borderRadius: "5px",
            shadow: 0,
            fontColor: "black"
        },
        plot: {
            hoverState: {
                visible: false
            }
        },
        plotarea: {
            margin: "65px 50px 60px 65px"
        },
        scaleX: {
            transform: {
                type: "date",
                all: "%h:%i %A",
                item: {
                    visible: false
                }
            },
            minValue: 1437516814415,
            step: 3600000,
            guide: {
                visible: false
            },
            lineColor: "#ffffff",
            lineWidth: "1px",
            tick: {
                lineColor: "#ffffff",
                lineWidth: "1px"
            },
            item: {
                fontColor: "#ffffff"
            },
            refLine: {
                lineColor: "#ffffff"
            }
        },
        scaleY: {
            guide: {
                lineColor: "#ffffff"
            },
            lineColor: "#ffffff",
            lineWidth: "1px",
            tick: {
                lineColor: "#ffffff",
                lineWidth: "1px",
            },
            item: {
                fontColor: "#ffffff"
            },
            refLine: {
                lineColor: "#ffffff"
            }
        }
    }
});
zingchart.render({
    id: 'chart5',
    height: '100%',
    width: '100%',
    data: {
        type: 'line',
        backgroundColor: "#0277BD",
        title: {
            text: "Communication",
            textAlign: "left",
            fontColor: "white"
        },
        plot: {
            aspect: "spline",
            marker: {
                visible: false
            },
        },
        tooltip: {
            fontColor: "#333"
        },
        scaleX: {
            visible: false
        },
        scaleY: {
            lineColor: "white",
            tick: {
                lineColor: "white"
            },
            item: {
                fontColor: "white"
            },
            guide: {
                lineColor: "#ffde7b"
            }
        },
        series: [{
                values: generateSeriesData(100),
                lineColor: "white",
                lineWidth: "2px"
            }]
    }
});
zingchart.render({
    id: 'chart6',
    height: '100%',
    width: '100%',
    data: {
        type: 'line',
        backgroundColor: "#333",
        scaleY: {
            visible: false
        },
        scaleX: {
            visible: false
        },
        labels: [
            {
                text: "33kw",
                x: "5%",
                y: "2%",
                fontSize: "50px",
                fontColor: "white"
            }
        ],
        plot: {
            borderWidth: "2px",
            marker: {
                visible: false
            },
            rules: [
                {
                    rule: "%v > 20",
                    lineColor: "#0380ab"
                },
                {
                    rule: "%v < 5",
                    lineColor: "#04a9e1"
                }
            ]
        },
        plotarea: {
            margin: '70 20 20 20'
        },
        series: [
            {
                values: generateSeriesData(150),
                backgroundColor: "#EA172F",
            }
        ]
    }
});
zingchart.render({
    id: 'chart7',
    height: '100%',
    width: '100%',
    data: {
        type: "area",
        backgroundColor: "#F01646",
        plot: {
            aspect: "spline",
            alphaArea: 1,
            marker: {
                visible: false
            },
        },
        scaleX: {
            visible: false
        },
        scaleY: {
            visible: false
        },
        plotarea: {
            margin: "70 0 0 0"
        },
        labels: [
            {
                text: "120bpm",
                x: "5%",
                y: "2%",
                fontSize: "24px",
                fontColor: "#FFF"
            },
            {
                text: "70bpm",
                x: "40%",
                y: "2%",
                fontSize: "24px",
                fontColor: "#f690a6"
            },
            {
                text: "20bpm",
                x: "70%",
                y: "2%",
                fontSize: "24px",
                fontColor: "#761027"
            }
        ],
        series: [
            {
                values: [6, 7, 8, 7, 8, 7, 8, 9, 10, 6, 7, 8, 9, 5, 8],
                backgroundColor: "#fff",
                lineColor: "#fff"
            },
            {
                values: [3, 3, 4, 5, 5, 6, 7, 5, 6, 5, 4, 3, 4, 4, 5],
                backgroundColor: "#f690a6",
                lineColor: "#f690a6"
            },
            {
                values: [1, 2, 3, 2, 1, 2, 2, 3, 4, 4, 3, 2, 2, 2, 3],
                backgroundColor: "#761027",
                lineColor: "#761027"
            },
        ]
    }
});
zingchart.render({
    id: 'chart8',
    height: '100%',
    width: '100%',
    data: {
        type: 'hbar',
        backgroundColor: '#5BC254',
        plotarea: {
            margin: 'dynamic'
        },
        title: {
            text: "Distribution",
            textAlign: "left",
            fontColor: "white",
            adjustLayout: true
        },
        subtitle: {
            fontColor: "white",
            textAlign: "left"
        },
        scaleX: {
            lineColor: "transparent",
            item: {
                fontColor: "white",
            },
            tick: {
                lineColor: "transparent",
            },
            labels: ["0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100"]
        },
        scaleY: {
            maxValue: 15,
            lineColor: "transparent",
            item: {
                fontColor: "white"
            },
            guide: {
                lineStyle: "solid",
                lineColor: "#a1dd9d"
            },
            tick: {
                lineColor: "#a1dd9d",
            }
        },
        plot: {
            hoverState: {
                visible: false
            },
            valueBox: {
                placement: 'top'
            },
            tooltip: {
                visible: false
            }
        },
        series: [
            {
                values: [2, 3, 5, 6, 8, 10, 12],
                backgroundColor: "#fff"
            }
        ]
    }
});
function generateSeriesData(num) {
    var values = [];
    var startDate = 1349617440000;
    for (var i = 0; i < num; i++) {
        values.push([(startDate + (i * 50000)), Math.floor(Math.random() * 30)]);
    }
    return values;
}
// make data appear to be moving
setInterval(function () {
    zingchart.exec('chart6', 'setseriesvalues', {
        plotindex: 0,
        values: generateSeriesData(150)
    });
}, 500);
*{
  box-sizing: border-box;
}
html, body{
  background-color: #222;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}
.dashboard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 300px;
}
.column {
  display : flex;
  flex-direction: row;
  flex-grow: 1;
  flex-wrap:wrap;
}

.item {
  margin: 5px;
  flex-grow: 1;
  min-height: 250px;
  min-width:250px;
}

.small.item {
  min-width: 305px;
}

#br {
  display: flex;
  flex-direction : row;
  flex-grow : 1;
  flex-wrap : wrap;
  min-height: 250px;
}

#br > section {
  flex-grow : 1;
}
Sine Wave with Selection Tool 132/281 Styled Radar Chart

Related Documentation:

11
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
%v%
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
35%
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
50000
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
25
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
33kw
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
20bpm
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
12
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source