Gallery Back to Gallery

Line Charts - small multiples

Line Charts - small multiples

World Development Indicators - individuals using the Internet (% of population) - Middle East & North Africa

Source: The World Bank 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <style>
    body {
      padding: 1rem;
      background-color: white !important;
      font-family: Lucida Sans Unicode, Lucida Grande, Lucida Sans, Helvetica, Arial, sans-serif;
    }

    #myChart {
      height: 100%;
      width: 100%;
      margin-top: 3rem;
      min-height: 530px;
      background-color: white !important;
    }

    #title {
      font-size: 32px;
      text-align: start;
      line-height: 40px;
      margin-bottom: 0px;
      font-weight: 500
    }

    #subtitle {
      font-size: 16px;
      text-align: start;
      line-height: 32px;
      margin-top: 0px;
      margin-bottom: 0px;
      font-weight: 400;
      color: #6F6F6F;
    }

    #source {
      font-size: 16px;
      text-align: start;
      line-height: 32px;
      margin-top: 0px;
      font-weight: 400;
      color: #6F6F6F;
    }
  </style>
</head>

<body>
  <p id="title">
    Line Charts - small multiples
  </p>
  <p id="subtitle">
    World Development Indicators - individuals using the Internet (% of population) - Middle East & North Africa
  </p>
  <p id="source">
    Source: The World Bank
  </p>
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let data = [{
        country: 'Bahrain',
        values: [22.5, 29.5, 38.2, 42.9455269, 47.6910552, 49.0384681, 57.9, 62.9]
      },
      {
        country: 'Quatar',
        values: [85.3, 91.49, 92.8848265, 95.1246622, 97.3888492, 99.6528491, 99.6528042, 99.6528491]
      },
      {
        country: 'United Arab Emirates',
        values: [88, 90.4, 90.5, 90.6000073, 94.8199225, 98.4500018, 99.15, 100]
      },
      {
        country: 'Kuwait',
        values: [75.46, 78.7, 82, 85.6, 97.9999893, 99.5988496, 99.5426765, 99.1058797]
      },
      {
        country: 'Saudi Arabia',
        values: [60.5, 64.7136574, 69.6162358, 74.8792747, 94.1755996, 93.3100019, 95.7247356, 97.86]
      },
      {
        country: 'Israel',
        values: [70.250312, 75.0177532, 77.3520897, 79.6531242, 81.5811836, 83.733157, 86.7878776, 90.1273409]
      },
      {
        country: 'Oman',
        values: [66.45, 70.22, 73.53, 76.8453905, 80.1856357, 85.5, 90.3, 95.23]
      },
      {
        country: 'Malta',
        values: [68.9138, 73.17, 75.960019, 78.0751488, 81.0119111, 81.6580443, 85.7785608, 86.8587642]
      },
      {
        country: 'Lebanon',
        values: [70.5, 73, 74, 76.11, 78.1807749, 80.9, 80.9, 84.1]
      },
      {
        country: 'Morocco',
        values: [56, 56.8, 57.0799994, 58.2712364, 61.762212, 64.8038652, 74.3763145, 84.1203631],
      },
      {
        country: 'West Bank and Gaza',
        values: [46.6, 53.67, 56.7, 59.9, 63.3, 64.3999937, 70.6225837, 74.6]
      },
      {
        country: 'Iran, Islamic Rep.',
        values: [29.95, 39.35, 45.3349762, 53.2267717, 64.0439736, 70.200565, 77.7708385, 84.11087]
      },
      {
        country: 'Tunisia',
        values: [43.8, 46.16, 46.4999943, 49.5999948, 55.5001551, 64.1908102, 66.6999983, 71.9]
      },
      {
        country: 'Egypt, Arab Rep.',
        values: [29.4, 33.8946039, 37.8193834, 41.2480671, 44.9502043, 46.9243368, 57.2828664, 71.914201]
      },
      {
        country: 'Algeria',
        values: [22.5, 29.5, 38.2, 42.9455269, 47.6910552, 49.0384681, 57.9, 62.9]
      },
      {
        country: 'Jordan',
        values: [41.4, 46.2, 54.22, 56.15, 64.5, 66.1, null, null]
      },
      {
        country: 'Djibouti',
        values: [12.7, 17, 22.9, 30.8, 55.6814093, 58, 59, 59]
      },
      {
        country: 'Syrian Arab Republic',
        values: [26.2, 28.09, 29.9797972, 31.8696273, 32.7, 33.77, 34.65, 35.78]
      },
      {
        country: 'Iraq',
        values: [9.2, 13.21, 16.8, 37.67, 41.94, 43.3, 60, null]
      },
      {
        country: 'Yemen, Rep.',
        values: [20, 22.55, 24.0854095, 24.5792084, 26.7183548, null, null, null]
      },
      {
        country: 'Libya',
        values: [16.5, 17.76, null, null, null, null, null, null]
      },
    ];
    let graphset = data.map((item) => {
      return {
        type: 'area',
        title: {
          text: item.country,
          fontSize: '14px',
          fontWeight: 600,
        },
        plot: {
          aspect: 'spline',
          marker: {
            visible: false
          }
        },
        scaleX: {
          maxItems: 2,
          lineWidth: '2px',
          lineColor: '#e2e2e2',
          tick: {
            visible: false
          },
          labels: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
        },
        scaleY: {
          minValue: 0,
          step: 50,
          maxValue: 100,
          lineWidth: '0px',
          rules: [{
            rule: '%v == 100',
            format: '%v%',
          }],
          item: {
            rules: [{
              rule: '%v == 0',
              visible: false
            }]
          },
          guide: {
            lineWidth: '2px',
            lineStyle: 'dotted',
            rules: [{
              rule: '%v == 0',
              visible: false
            }]
          },
          tick: {
            visible: false
          },
        },
        series: [{
          values: item.values,
          lineColor: '#1F77B4',
          backgroundColor: '#c6dff7'
        }]
      };
    });
    let chartConfig = {
      graphset
    };
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '1000px',
      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>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
</head>

<body>
  <p id="title">
    Line Charts - small multiples
  </p>
  <p id="subtitle">
    World Development Indicators - individuals using the Internet (% of population) - Middle East & North Africa
  </p>
  <p id="source">
    Source: The World Bank
  </p>
  <div id="myChart"></div>
</body>

</html>
let data = [{
    country: 'Bahrain',
    values: [22.5, 29.5, 38.2, 42.9455269, 47.6910552, 49.0384681, 57.9, 62.9]
  },
  {
    country: 'Quatar',
    values: [85.3, 91.49, 92.8848265, 95.1246622, 97.3888492, 99.6528491, 99.6528042, 99.6528491]
  },
  {
    country: 'United Arab Emirates',
    values: [88, 90.4, 90.5, 90.6000073, 94.8199225, 98.4500018, 99.15, 100]
  },
  {
    country: 'Kuwait',
    values: [75.46, 78.7, 82, 85.6, 97.9999893, 99.5988496, 99.5426765, 99.1058797]
  },
  {
    country: 'Saudi Arabia',
    values: [60.5, 64.7136574, 69.6162358, 74.8792747, 94.1755996, 93.3100019, 95.7247356, 97.86]
  },
  {
    country: 'Israel',
    values: [70.250312, 75.0177532, 77.3520897, 79.6531242, 81.5811836, 83.733157, 86.7878776, 90.1273409]
  },
  {
    country: 'Oman',
    values: [66.45, 70.22, 73.53, 76.8453905, 80.1856357, 85.5, 90.3, 95.23]
  },
  {
    country: 'Malta',
    values: [68.9138, 73.17, 75.960019, 78.0751488, 81.0119111, 81.6580443, 85.7785608, 86.8587642]
  },
  {
    country: 'Lebanon',
    values: [70.5, 73, 74, 76.11, 78.1807749, 80.9, 80.9, 84.1]
  },
  {
    country: 'Morocco',
    values: [56, 56.8, 57.0799994, 58.2712364, 61.762212, 64.8038652, 74.3763145, 84.1203631],
  },
  {
    country: 'West Bank and Gaza',
    values: [46.6, 53.67, 56.7, 59.9, 63.3, 64.3999937, 70.6225837, 74.6]
  },
  {
    country: 'Iran, Islamic Rep.',
    values: [29.95, 39.35, 45.3349762, 53.2267717, 64.0439736, 70.200565, 77.7708385, 84.11087]
  },
  {
    country: 'Tunisia',
    values: [43.8, 46.16, 46.4999943, 49.5999948, 55.5001551, 64.1908102, 66.6999983, 71.9]
  },
  {
    country: 'Egypt, Arab Rep.',
    values: [29.4, 33.8946039, 37.8193834, 41.2480671, 44.9502043, 46.9243368, 57.2828664, 71.914201]
  },
  {
    country: 'Algeria',
    values: [22.5, 29.5, 38.2, 42.9455269, 47.6910552, 49.0384681, 57.9, 62.9]
  },
  {
    country: 'Jordan',
    values: [41.4, 46.2, 54.22, 56.15, 64.5, 66.1, null, null]
  },
  {
    country: 'Djibouti',
    values: [12.7, 17, 22.9, 30.8, 55.6814093, 58, 59, 59]
  },
  {
    country: 'Syrian Arab Republic',
    values: [26.2, 28.09, 29.9797972, 31.8696273, 32.7, 33.77, 34.65, 35.78]
  },
  {
    country: 'Iraq',
    values: [9.2, 13.21, 16.8, 37.67, 41.94, 43.3, 60, null]
  },
  {
    country: 'Yemen, Rep.',
    values: [20, 22.55, 24.0854095, 24.5792084, 26.7183548, null, null, null]
  },
  {
    country: 'Libya',
    values: [16.5, 17.76, null, null, null, null, null, null]
  },
];
let graphset = data.map((item) => {
  return {
    type: 'area',
    title: {
      text: item.country,
      fontSize: '14px',
      fontWeight: 600,
    },
    plot: {
      aspect: 'spline',
      marker: {
        visible: false
      }
    },
    scaleX: {
      maxItems: 2,
      lineWidth: '2px',
      lineColor: '#e2e2e2',
      tick: {
        visible: false
      },
      labels: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
    },
    scaleY: {
      minValue: 0,
      step: 50,
      maxValue: 100,
      lineWidth: '0px',
      rules: [{
        rule: '%v == 100',
        format: '%v%',
      }],
      item: {
        rules: [{
          rule: '%v == 0',
          visible: false
        }]
      },
      guide: {
        lineWidth: '2px',
        lineStyle: 'dotted',
        rules: [{
          rule: '%v == 0',
          visible: false
        }]
      },
      tick: {
        visible: false
      },
    },
    series: [{
      values: item.values,
      lineColor: '#1F77B4',
      backgroundColor: '#c6dff7'
    }]
  };
});
let chartConfig = {
  graphset
};
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '1000px',
  width: '100%'
});
body {
  padding: 1rem;
  background-color: white !important;
  font-family: Lucida Sans Unicode, Lucida Grande, Lucida Sans, Helvetica, Arial, sans-serif;
}

#myChart {
  height: 100%;
  width: 100%;
  margin-top: 3rem;
  min-height: 530px;
  background-color: white !important;
}

#title {
  font-size: 32px;
  text-align: start;
  line-height: 40px;
  margin-bottom: 0px;
  font-weight: 500
}

#subtitle {
  font-size: 16px;
  text-align: start;
  line-height: 32px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 400;
  color: #6F6F6F;
}

#source {
  font-size: 16px;
  text-align: start;
  line-height: 32px;
  margin-top: 0px;
  font-weight: 400;
  color: #6F6F6F;
}
Radar chart - small multiples 3/281 "speedometer" type chart

Related Documentation: