Scatter Plot with Markers

Please enable JavaScript to see the interactive demo.

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

<!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>
    .zc-body {
      background: #fff;
    }

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

    .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"]; // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chartId = 'myChart';

    // VARS
    // -----------------------------
    let i,
      iSum1 = 0,
      iSum2 = 0,
      iSum3 = 0,
      iMed1,
      iMed2,
      iMed3,
      aData = [
        [],
        [],
        [],
        []
      ];

    // CHART DATA
    // -----------------------------
    let aCountries = [
      'Ireland',
      'Mexico',
      'United States',
      'Dominican Republic',
      'Venezuela',
      'Flanders',
      'Switzerland',
      'New Zealand',
      'Northern Ireland',
      'Netherlands',
      'Australia',
      'Great Britain',
      'Norway',
      'Sweden',
      'Uruguay',
      'Poland',
      'Denmark',
      'Austria',
      'Philippines',
      'Germany-West',
      'Taiwan',
      'Spain',
      'Israel,Jews',
      'Japan',
      'Croatia',
      'Finland',
      'Israel,Arabs',
      'Chile',
      'Portugal',
      'Slovenia',
      'Cyprus',
      'France',
      'Germany-Est',
      'South Korea',
      'Italy',
      'South Africa',
      'Slovak Republic',
      'Czech Republic',
      'Russia',
      'Hungary',
      'Latvia',
      'Ukraine',
      'Turkey',
      'Mean...',
    ];

    for (i = 0; i < aCountries.length - 1; i++) {
      let r1 = rand(5, 40);
      let r2 = rand(35, 70);
      let r3 = rand(65, 95);
      iSum1 += r1;
      iSum2 += r2;
      iSum3 += r3;
      aData[0].push([i, r1]);
      aData[1].push([i, r2]);
      aData[2].push([i, r3]);
    }

    iMed1 = parseFloat((iSum1 / (aCountries.length - 1)).toFixed(1));
    iMed2 = parseFloat((iSum2 / (aCountries.length - 1)).toFixed(1));
    iMed3 = parseFloat((iSum3 / (aCountries.length - 1)).toFixed(1));

    aData[0].push([aCountries.length - 1, iMed1]);
    aData[1].push([aCountries.length - 1, iMed2]);
    aData[2].push([aCountries.length - 1, iMed3]);

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'hscatter',
      backgroundColor: '#FFF',
      title: {
        text: 'Religious Involvement, Self-assessed Religiosity and Happiness',
        align: 'left',
        fontSize: '16px',
        fontWeight: 'bold',
        paddingLeft: '20px'
      },
      subtitle: {
        text: '(Mean values scaled from 0 to 100, *random data)',
        align: 'left',
        fontSize: '13px',
        fontStyle: 'italic',
        fontWeight: 'normal',
        padding: '0 0 0 20px'
      },
      legend: {
        layout: 'float',
        margin: 'auto auto 15px 120px',
        borderWidth: 0,
        marker: {
          type: 'inherit'
        },
        item: {
          fontSize: '12px'
        },
      },
      plotarea: {
        margin: '80px 20px 70px 130px'
      },
      scaleX: {
        values: aCountries,
        itemsOverlap: true,
        maxItems: 999,
        mirrored: true,
        guide: {
          visible: true
        },
        item: {
          color: '#000',
          fontWeight: 'normal',
          fontSize: '11px'
        },
        tick: {
          visible: true
        },
      },
      scaleY: {
        minValue: 0,
        maxValue: 100,
        step: 20,
        markers: [{
            type: 'line',
            alpha: 0.25,
            lineColor: '#3A3AA2',
            lineWidth: '8px',
            range: [iMed1]
          },
          {
            type: 'line',
            alpha: 0.25,
            lineColor: '#FDBD49',
            lineWidth: '8px',
            range: [iMed2]
          },
          {
            type: 'line',
            alpha: 0.25,
            lineColor: '#843939',
            lineWidth: '8px',
            range: [iMed3]
          },
        ],
        item: {
          color: '#000',
          fontSize: '11px',
          fontWeight: 'normal'
        },
        guide: {
          visible: false
        },
        tick: {
          visible: true
        },
      },
      scaleY2: {
        minValue: 0,
        maxValue: 100,
        step: 20,
        guide: {
          visible: false
        },
        item: {
          color: '#000',
          fontSize: '11px',
          fontWeight: 'normal',
        },
        tick: {
          visible: true
        },
      },
      series: [{
          text: 'Religious Involvement',
          values: aData[0],
          scales: 'scale-x,scale-y',
          marker: {
            type: 'square',
            backgroundColor: '#3A3AA2',
            borderWidth: 0,
            size: '4px'
          },
        },
        {
          text: 'Self-assessed Religiosity',
          values: aData[1],
          scales: 'scale-x,scale-y-2',
          marker: {
            type: 'triangle',
            backgroundColor: '#FDBD49',
            borderWidth: 0,
            size: '4px'
          },
        },
        {
          text: 'Happiness',
          values: aData[2],
          scales: 'scale-x,scale-y',
          marker: {
            backgroundColor: '#843939',
            borderWidth: '0px',
            size: '4px'
          },
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: chartId,
      width: '100%',
      height: '800px',
      output: 'svg',
      data: chartConfig,
    });

    // HELPER FNS
    // -----------------------------

    function rand(min, max) {
      return Math.round(min + (max - min) * Math.random());
    }
  </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 id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
</body>
</html>

// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';

// VARS
// -----------------------------
let i,
  iSum1 = 0,
  iSum2 = 0,
  iSum3 = 0,
  iMed1,
  iMed2,
  iMed3,
  aData = [[], [], [], []];

// CHART DATA
// -----------------------------
let aCountries = [
  'Ireland',
  'Mexico',
  'United States',
  'Dominican Republic',
  'Venezuela',
  'Flanders',
  'Switzerland',
  'New Zealand',
  'Northern Ireland',
  'Netherlands',
  'Australia',
  'Great Britain',
  'Norway',
  'Sweden',
  'Uruguay',
  'Poland',
  'Denmark',
  'Austria',
  'Philippines',
  'Germany-West',
  'Taiwan',
  'Spain',
  'Israel,Jews',
  'Japan',
  'Croatia',
  'Finland',
  'Israel,Arabs',
  'Chile',
  'Portugal',
  'Slovenia',
  'Cyprus',
  'France',
  'Germany-Est',
  'South Korea',
  'Italy',
  'South Africa',
  'Slovak Republic',
  'Czech Republic',
  'Russia',
  'Hungary',
  'Latvia',
  'Ukraine',
  'Turkey',
  'Mean...',
];

for (i = 0; i < aCountries.length - 1; i++) {
  let r1 = rand(5, 40);
  let r2 = rand(35, 70);
  let r3 = rand(65, 95);
  iSum1 += r1;
  iSum2 += r2;
  iSum3 += r3;
  aData[0].push([i, r1]);
  aData[1].push([i, r2]);
  aData[2].push([i, r3]);
}

iMed1 = parseFloat((iSum1 / (aCountries.length - 1)).toFixed(1));
iMed2 = parseFloat((iSum2 / (aCountries.length - 1)).toFixed(1));
iMed3 = parseFloat((iSum3 / (aCountries.length - 1)).toFixed(1));

aData[0].push([aCountries.length - 1, iMed1]);
aData[1].push([aCountries.length - 1, iMed2]);
aData[2].push([aCountries.length - 1, iMed3]);

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'hscatter',
  backgroundColor: '#FFF',
  title: {
    text: 'Religious Involvement, Self-assessed Religiosity and Happiness',
    align: 'left',
    fontSize: '16px',
    fontWeight: 'bold',
    paddingLeft: '20px'
  },
  subtitle: {
    text: '(Mean values scaled from 0 to 100, *random data)',
    align: 'left',
    fontSize: '13px',
    fontStyle: 'italic',
    fontWeight: 'normal',
    padding: '0 0 0 20px'
  },
  legend: {
    layout: 'float',
    margin: 'auto auto 15px 120px',
    borderWidth: 0,
    marker: {
      type: 'inherit'
    },
    item: {
      fontSize: '12px'
    },
  },
  plotarea: {
    margin: '80px 20px 70px 130px'
  },
  scaleX: {
    values: aCountries,
    itemsOverlap: true,
    maxItems: 999,
    mirrored: true,
    guide: {
      visible: true
    },
    item: {
      color: '#000',
      fontWeight: 'normal',
      fontSize: '11px'
    },
    tick: {
      visible: true
    },
  },
  scaleY: {
    minValue: 0,
    maxValue: 100,
    step: 20,
    markers: [
      {
        type: 'line',
        alpha: 0.25,
        lineColor: '#3A3AA2',
        lineWidth: '8px',
        range: [iMed1]
      },
      {
        type: 'line',
        alpha: 0.25,
        lineColor: '#FDBD49',
        lineWidth: '8px',
        range: [iMed2]
      },
      {
        type: 'line',
        alpha: 0.25,
        lineColor: '#843939',
        lineWidth: '8px',
        range: [iMed3]
      },
    ],
    item: {
      color: '#000',
      fontSize: '11px',
      fontWeight: 'normal'
    },
    guide: {
      visible: false
    },
    tick: {
      visible: true
    },
  },
  scaleY2: {
    minValue: 0,
    maxValue: 100,
    step: 20,
    guide: {
      visible: false
    },
    item: {
      color: '#000',
      fontSize: '11px',
      fontWeight: 'normal',
    },
    tick: {
      visible: true
    },
  },
  series: [
    {
      text: 'Religious Involvement',
      values: aData[0],
      scales: 'scale-x,scale-y',
      marker: {
        type: 'square',
        backgroundColor: '#3A3AA2',
        borderWidth: 0,
        size: '4px'
      },
    },
    {
      text: 'Self-assessed Religiosity',
      values: aData[1],
      scales: 'scale-x,scale-y-2',
      marker: {
        type: 'triangle',
        backgroundColor: '#FDBD49',
        borderWidth: 0,
        size: '4px'
      },
    },
    {
      text: 'Happiness',
      values: aData[2],
      scales: 'scale-x,scale-y',
      marker: {
        backgroundColor: '#843939',
        borderWidth: '0px',
        size: '4px'
      },
    },
  ],
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: chartId,
  width: '100%',
  height: '800px',
  output: 'svg',
  data: chartConfig,
});

// HELPER FNS
// -----------------------------

function rand(min, max) {
  return Math.round(min + (max - min) * Math.random());
}

.zc-body { background:#fff; }

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

.zc-ref {
  display: none;
}

Pie Chart Generator Transformation 2 47/281 Dynamic Scatter Chart

Scatter Plot with Markers

Related Documentation: