Interactive Map with Custom Legend

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/7LOZR2TS

<!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>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

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

<body>
  <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      backgroundColor: 'white',
      title: {
        text: 'US States with Populations Over 3 Million!',
        backgroundColor: 'none',
        color: '#666666',
        fontFamily: 'arial',
        fontSize: '28px',
        textAlign: 'left'
      },
      subtitle: {
        text: 'Select a year bubble to view states',
        marginTop: '10%',
        backgroundColor: 'none',
        bold: true,
        color: '#666666',
        fontFamily: 'arial',
        fontSize: '18px',
        textAlign: 'left'
      },
      shapes: [{
          type: 'zingchart.maps',
          options: {
            id: 'map',
            name: 'usa',
            scale: true,
            style: {
              tooltip: {
                borderRadius: '0px'
              },
              backgroundColor: '#ebebeb',
              controls: {
                placement: 'tr'
              },
              label: {
                visible: false
              }
            },
            width: '86%',
            height: '86%',
            x: '17%',
            y: '19%'
          }
        },
        {
          type: 'circle',
          id: '1950',
          backgroundColor: '#163D6B',
          borderColor: '#a5a5a5',
          borderWidth: '1px',
          cursor: 'pointer',
          label: {
            text: '1950',
            fontColor: '#666666',
            fontFamily: 'arial',
            offsetX: '30px'
          },
          size: '10px',
          x: '5%',
          y: '27%'
        },
        {
          type: 'circle',
          id: '1990',
          backgroundColor: '#4E6C90',
          borderColor: '#a5a5a5',
          borderWidth: '1px',
          cursor: 'pointer',
          label: {
            text: '1990',
            fontColor: '#666666',
            fontFamily: 'arial',
            offsetX: '30px'
          },
          size: '10px',
          x: '5%',
          y: '37%'
        },
        {
          type: 'circle',
          id: '2000',
          backgroundColor: '#879CB5',
          borderColor: '#a5a5a5',
          borderWidth: '1px',
          cursor: 'pointer',
          label: {
            text: '2000',
            fontColor: '#666666',
            fontFamily: 'arial',
            offsetX: '30px'
          },
          size: '10px',
          x: '5%',
          y: '47%'
        },
        {
          type: 'circle',
          id: '2010',
          backgroundColor: '#c0ccdb',
          borderColor: '#a5a5a5',
          borderWidth: '1px',
          cursor: 'pointer',
          label: {
            text: '2010',
            fontColor: '#666666',
            fontFamily: 'arial',
            offsetX: '30px'
          },
          size: '10px',
          x: '5%',
          y: '57%'
        }
      ],
      source: {
        text: 'Source: U.S. Bureau of the Census. Web: www.census.gov.',
        bold: true,
        color: '#666666',
        fontFamily: 'arial'
      }
    };

    zingchart.loadModules('maps,maps-usa');

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });

    // Keep track of last shape clicked
    let lastClick = null;

    // Population data for updating the chart
    let population = {
      1950: {
        bgColor: '#163D6B',
        states: ['NY', 'CA', 'PA', 'IL', 'OH', 'TX', 'MI', 'NJ', 'MA', 'NC', 'MO', 'IN', 'GA', 'WI', 'VA', 'TN', 'AL']
      },
      1990: {
        bgColor: '#4E6C90',
        states: ['CA', 'NY', 'TX', 'FL', 'PA', 'IL', 'OH', 'MI', 'NJ', 'NC', 'GA', 'VA', 'MA', 'IN', 'MO', 'WI', 'TN', 'WA', 'MD', 'MN', 'LA', 'AL', 'KY', 'AZ', 'SC', 'CO', 'CT', 'OK']
      },
      2000: {
        bgColor: '#879CB5',
        states: ['CA', 'TX', 'NY', 'FL', 'IL', 'PA', 'OH', 'MI', 'NJ', 'GA', 'NC', 'VA', 'MA', 'IN', 'WA', 'TN', 'MO', 'WI', 'MD', 'AZ', 'MN', 'LA', 'AL', 'CO', 'KY', 'SC', 'OK', 'OR', 'CT']
      },
      2010: {
        bgColor: '#c0ccdb',
        states: ['CA', 'TX', 'NY', 'FL', 'IL', 'PA', 'OH', 'MI', 'GA', 'NC', 'NJ', 'VA', 'WA', 'MA', 'IN', 'TN', 'AZ', 'MO', 'MD', 'WI', 'MN', 'CO', 'AL', 'SC', 'LA', 'KY', 'OR', 'OK', 'CT', 'IA']
      }
    };

    // Returns the styled items object
    let createItems = (year) => {
      let data = population[year];
      let items = {};
      data.states.forEach((state) => {
        let stateItem = {
          tooltip: {
            borderRadius: '0px'
          },
          backgroundColor: data.bgColor,
          borderColor: '#a5a5a5',
          borderWidth: '1px',
          hoverState: {
            visible: false
          },
          label: {
            visible: false
          }
        }
        items[state] = stateItem;
      });
      return items;
    }

    // Deep copy a Javascript object
    let copy = (obj) => {
      return JSON.parse(JSON.stringify(obj));
    }

    // Bind the shapeclick
    zingchart.shape_click = (p) => {
      let year = p.shapeid;
      if (Object.keys(population).indexOf(year) < 0) {
        return;
      }
      if (lastClick == year) {
        lastClick = null;
        zingchart.exec('myChart', 'setdata', {
          data: chartConfig
        });
      } else {
        lastClick = year;
        let newData = copy(chartConfig);
        newData.shapes[0].options.style.items = createItems(year);
        zingchart.exec('myChart', 'setdata', {
          data: newData
        });
      }
    }
  </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>
		<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	</body>
</html>

let chartConfig = {
  backgroundColor: 'white',
  title: {
    text: 'US States with Populations Over 3 Million!',
    backgroundColor: 'none',
    color: '#666666',
    fontFamily: 'arial',
    fontSize: '28px',
    textAlign: 'left'
  },
  subtitle: {
    text: 'Select a year bubble to view states',
    marginTop: '10%',
    backgroundColor: 'none',
    bold: true,
    color: '#666666',
    fontFamily: 'arial',
    fontSize: '18px',
    textAlign: 'left'
  },
  shapes: [
    {
      type: 'zingchart.maps',
      options: {
        id: 'map',
        name: 'usa',
        scale: true,
        style: {
          tooltip: {
            borderRadius: '0px'
          },
          backgroundColor: '#ebebeb',
          controls: {
            placement: 'tr'
          },
          label: {
            visible: false
          }
        },
        width: '86%',
        height: '86%',
        x: '17%',
        y: '19%'
      }
    },
    {
      type: 'circle',
      id: '1950',
      backgroundColor: '#163D6B',
      borderColor: '#a5a5a5',
      borderWidth: '1px',
      cursor: 'pointer',
      label: {
        text: '1950',
        fontColor: '#666666',
        fontFamily: 'arial',
        offsetX: '30px'
      },
      size: '10px',
      x: '5%',
      y: '27%'
    },
    {
      type: 'circle',
      id: '1990',
      backgroundColor: '#4E6C90',
      borderColor: '#a5a5a5',
      borderWidth: '1px',
      cursor: 'pointer',
      label: {
        text: '1990',
        fontColor: '#666666',
        fontFamily: 'arial',
        offsetX: '30px'
      },
      size: '10px',
      x: '5%',
      y: '37%'
    },
    {
      type: 'circle',
      id: '2000',
      backgroundColor: '#879CB5',
      borderColor: '#a5a5a5',
      borderWidth: '1px',
      cursor: 'pointer',
      label: {
        text: '2000',
        fontColor: '#666666',
        fontFamily: 'arial',
        offsetX: '30px'
      },
      size: '10px',
      x: '5%',
      y: '47%'
    },
    {
      type: 'circle',
      id: '2010',
      backgroundColor: '#c0ccdb',
      borderColor: '#a5a5a5',
      borderWidth: '1px',
      cursor: 'pointer',
      label: {
        text: '2010',
        fontColor: '#666666',
        fontFamily: 'arial',
        offsetX: '30px'
      },
      size: '10px',
      x: '5%',
      y: '57%'
    }
  ],
  source: {
    text: 'Source: U.S. Bureau of the Census. Web: www.census.gov.',
    bold: true,
    color: '#666666',
    fontFamily: 'arial'
  }
};

zingchart.loadModules('maps,maps-usa');

zingchart.render({ 
  id: 'myChart', 
  data: chartConfig,
  height: '100%',
  width: '100%',
});

// Keep track of last shape clicked
let lastClick = null;

// Population data for updating the chart
let population = {
  1950: {
    bgColor: '#163D6B',
    states: ['NY', 'CA', 'PA', 'IL', 'OH', 'TX', 'MI', 'NJ', 'MA', 'NC', 'MO', 'IN', 'GA', 'WI', 'VA', 'TN', 'AL']
  },
  1990: {
    bgColor: '#4E6C90',
    states: ['CA', 'NY', 'TX', 'FL', 'PA', 'IL', 'OH', 'MI', 'NJ', 'NC', 'GA', 'VA', 'MA', 'IN', 'MO', 'WI', 'TN', 'WA', 'MD', 'MN', 'LA', 'AL', 'KY', 'AZ', 'SC', 'CO', 'CT', 'OK']
  },
  2000: {
    bgColor: '#879CB5',
    states: ['CA', 'TX', 'NY', 'FL', 'IL', 'PA', 'OH', 'MI', 'NJ', 'GA', 'NC', 'VA', 'MA', 'IN', 'WA', 'TN', 'MO', 'WI', 'MD', 'AZ', 'MN', 'LA', 'AL', 'CO', 'KY', 'SC', 'OK', 'OR', 'CT']
  },
  2010: {
    bgColor: '#c0ccdb',
    states: ['CA', 'TX', 'NY', 'FL', 'IL', 'PA', 'OH', 'MI', 'GA', 'NC', 'NJ', 'VA', 'WA', 'MA', 'IN', 'TN', 'AZ', 'MO', 'MD', 'WI', 'MN', 'CO', 'AL', 'SC', 'LA', 'KY', 'OR', 'OK', 'CT', 'IA']
  }
};

// Returns the styled items object
let createItems = (year) => {
  let data = population[year];
  let items = {};
  data.states.forEach((state) => {
    let stateItem = {
      tooltip: {
        borderRadius: '0px'
      },
      backgroundColor: data.bgColor,
      borderColor: '#a5a5a5',
      borderWidth: '1px',
      hoverState: {
        visible: false
      },
      label: {
        visible: false
      }
    }
    items[state] = stateItem;
  });
  return items;
}

// Deep copy a Javascript object
let copy = (obj) => {
  return JSON.parse(JSON.stringify(obj));
}

// Bind the shapeclick
zingchart.shape_click = (p) => {
  let year = p.shapeid;
  if (Object.keys(population).indexOf(year) < 0) {
    return;
  }
  if (lastClick == year) {
    lastClick = null;
    zingchart.exec('myChart', 'setdata', {
      data: chartConfig
    });
  }
  else {
    lastClick = year;
    let newData = copy(chartConfig);
    newData.shapes[0].options.style.items = createItems(year);
    zingchart.exec('myChart', 'setdata', {
      data: newData
    });
  }
}

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

.zc-ref {
  display: none;
}

Gecko Style Widget Dashboard 205/281 Animated Dashboard with Tooltips

Interactive Map with Custom Legend

Related Documentation: