Gallery Back to Gallery

Horizontal Bar Chart with Search

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingChart Demo: Horizontal Bar Chart with Search</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      margin: 10px;
      padding: 10px;
      background-color: #fff;
    }

    .zcdemo {
      position: relative;
    }

    #filterbox {
      position: absolute;
      top: 6px;
      left: calc(50% + 22px);
      z-index: 999;
    }

    #filter {
      padding: 3px 5px;
      width: 110px;
      height: auto;
      font-size: 12px;
      font-weight: 500;
    }

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

<body class="zc-body">

  <div class="zcdemo">
    <div id="filterbox">
      <input type="text" id="filter">
    </div>
    <div id="myChart">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DOM ELEMENTS
    // -----------------------------
    let zcId = 'myChart';
    let zcFilter = document.querySelector('#filter');

    // DEFINE DATA
    // -----------------------------
    // Tech data
    let tech = [
      ['Angular', 2016],
      ['AngularJS', 2010],
      ['Babbage Assembly', 1971],
      ['Bash', 1989],
      ['BASIC', 1964],
      ['Bootstrap 4', 2018],
      ['C++', 1985],
      ['C#', 2002],
      ['CakePHP', 2005],
      ['Django', 2005],
      ['Drupal', 2000],
      ['Elixir', 2011],
      ['Ember.js', 2012],
      ['Erlang', 1999],
      ['Flask', 2010],
      ['Gensim', 2009],
      ['Go', 2009],
      ['Haskell', 1990],
      ['HTML', 1993],
      ['Java', 1996],
      ['Javascript', 1996],
      ['jQuery', 2006],
      ['Kotlin', 2016],
      ['Laravel', 2011],
      ['Node.js', 2009],
      ['Numpy', 2006],
      ['PHP', 1995],
      ['Python 2', 1991],
      ['Python 3', 2009],
      ['PyTorch', 2016],
      ['React', 2013],
      ['React Native', 2016],
      ['Ruby on Rails', 2006],
      ['Ruby', 1996],
      ['Rust', 2015],
      ['Sass', 2007],
      ['Swift', 2014],
      ['Tensorflow', 2016],
      ['TypeScript', 2012],
      ['Vue', 2014],
      ['Windows 10', 2015],
      ['WordPress', 2003],
    ];

    // Alpha-sort array
    tech.sort(function(a, b) {
      return b[1] - a[1];
    });

    // Get full year
    let cyear = new Date().getFullYear();

    // Get min. year
    let minyear = Number.MAX_VALUE;
    tech.map(function(el) {
      minyear = Math.min(minyear, el[1]);
    });

    // Full data
    let chartConfig = {
      type: 'line',
      backgroundColor: '#eeeeee #f9f9f9',
      borderColor: '#ccc',
      borderWidth: '1px',
      title: {
        text: 'How long has Technology \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 existed?',
        fontSize: 17,
      },
      plot: {
        tooltip: {
          text: '<span style="font-size:21px;font-weight:bold;">%plot-text</span><br>Invented in %data-invented (%data-years years ago)',
          align: 'left',
          fontSize: 13,
          padding: '10px',
        },
        valueBox: {
          type: 'first',
          text: '%plot-text (%data-years yrs)',
          fontSize: 10,
          fontWeight: 'normal',
          placement: 'left',
        },
        hoverMarker: {
          visible: false,
        },
        hoverState: {
          visible: false,
        },
        jsRule: 'plotJsRule()',
        lineWidth: '8px',
        marker: {
          borderWidth: '0px',
          visible: false,
        },
      },
      plotarea: {
        margin: '40 20 45 20',
      },
      scaleX: {
        maxValue: cyear,
        minValue: minyear,
        item: {
          fontSize: 10,
        },
        markers: [{
          type: 'line',
          range: [cyear],
          label: {
            fontSize: 11,
            text: cyear,
          },
          labelPlacement: 'opposite',
          lineColor: '#999',
          lineWidth: 1,
          valueRange: true,
        }, ],
        offsetStart: 80,
        step: 10,
      },
      scaleY: {
        maxValue: tech.length,
        minValue: 0,
        offsetStart: 10,
        step: 1,
        visible: false,
      },
      series: [],
      source: {
        text: 'Source: https://howoldisit.glitch.me/',
        align: 'left',
        fontSize: 11,
        offsetY: -4,
        padding: '0 5',
        target: '_blank',
        url: 'https://howoldisit.glitch.me/',
      },
    };

    tech.map(function(el, idx) {
      let plot = {
        text: el[0],
        dataTech: el[0].toLowerCase(),
        dataInvented: el[1],
        dataYears: cyear - el[1],
        values: [
          [el[1], idx],
          [cyear, idx],
        ],
      };
      chartConfig.series.push(plot);
    });

    // DEFINE CHART
    // -----------------------------
    // Main chart render location
    let chartId = 'myChart';

    // INPUT CHANGE EVENT
    // -----------------------------
    zcFilter.addEventListener('keyup', myHandler);

    function myHandler() {
      let filled = zcFilter.value.length !== 1;
      if (filled) zingchart.exec(zcId, 'update');
    }

    zingchart.render({
      id: zcId,
      width: '100%',
      height: '560px',
      output: 'svg',
      data: chartConfig,
      events: {
        load: loaded,
      },
    });

    // CHART RENDERED
    // -----------------------------
    // Set CSS class to show chart after render
    function loaded() {
      let chart = document.querySelector('#' + chartId);
      chart.classList.add('loaded');
    }

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

    // Plot rule
    function plotJsRule(p) {
      let tech = p['data-tech'];
      let isNotFound = tech.indexOf(zcFilter.value.toLowerCase()) === -1;
      if (isNotFound) {
        return {
          lineColor: '#ccc',
        };
      }
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingChart Demo: Horizontal Bar Chart with Search</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
	<body class="zc-body">

    <div class="zcdemo">
      <div id="filterbox">
        <input type="text" id="filter">
      </div>
      <div id="myChart">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    </div>
	
  </body>
</html>
// DOM ELEMENTS
// -----------------------------
let zcId = 'myChart';
let zcFilter = document.querySelector('#filter');

// DEFINE DATA
// -----------------------------
// Tech data
let tech = [
  ['Angular', 2016],
  ['AngularJS', 2010],
  ['Babbage Assembly', 1971],
  ['Bash', 1989],
  ['BASIC', 1964],
  ['Bootstrap 4', 2018],
  ['C++', 1985],
  ['C#', 2002],
  ['CakePHP', 2005],
  ['Django', 2005],
  ['Drupal', 2000],
  ['Elixir', 2011],
  ['Ember.js', 2012],
  ['Erlang', 1999],
  ['Flask', 2010],
  ['Gensim', 2009],
  ['Go', 2009],
  ['Haskell', 1990],
  ['HTML', 1993],
  ['Java', 1996],
  ['Javascript', 1996],
  ['jQuery', 2006],
  ['Kotlin', 2016],
  ['Laravel', 2011],
  ['Node.js', 2009],
  ['Numpy', 2006],
  ['PHP', 1995],
  ['Python 2', 1991],
  ['Python 3', 2009],
  ['PyTorch', 2016],
  ['React', 2013],
  ['React Native', 2016],
  ['Ruby on Rails', 2006],
  ['Ruby', 1996],
  ['Rust', 2015],
  ['Sass', 2007],
  ['Swift', 2014],
  ['Tensorflow', 2016],
  ['TypeScript', 2012],
  ['Vue', 2014],
  ['Windows 10', 2015],
  ['WordPress', 2003],
];

// Alpha-sort array
tech.sort(function (a, b) {
  return b[1] - a[1];
});

// Get full year
let cyear = new Date().getFullYear();

// Get min. year
let minyear = Number.MAX_VALUE;
tech.map(function (el) {
  minyear = Math.min(minyear, el[1]);
});

// Full data
let chartConfig = {
  type: 'line',
  backgroundColor: '#eeeeee #f9f9f9',
  borderColor: '#ccc',
  borderWidth: '1px',
  title: {
    text: 'How long has Technology \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 existed?',
    fontSize: 17,
  },
  plot: {
    tooltip: {
      text: '<span style="font-size:21px;font-weight:bold;">%plot-text</span><br>Invented in %data-invented (%data-years years ago)',
      align: 'left',
      fontSize: 13,
      padding: '10px',
    },
    valueBox: {
      type: 'first',
      text: '%plot-text (%data-years yrs)',
      fontSize: 10,
      fontWeight: 'normal',
      placement: 'left',
    },
    hoverMarker: {
      visible: false,
    },
    hoverState: {
      visible: false,
    },
    jsRule: 'plotJsRule()',
    lineWidth: '8px',
    marker: {
      borderWidth: '0px',
      visible: false,
    },
  },
  plotarea: {
    margin: '40 20 45 20',
  },
  scaleX: {
    maxValue: cyear,
    minValue: minyear,
    item: {
      fontSize: 10,
    },
    markers: [
      {
        type: 'line',
        range: [cyear],
        label: {
          fontSize: 11,
          text: cyear,
        },
        labelPlacement: 'opposite',
        lineColor: '#999',
        lineWidth: 1,
        valueRange: true,
      },
    ],
    offsetStart: 80,
    step: 10,
  },
  scaleY: {
    maxValue: tech.length,
    minValue: 0,
    offsetStart: 10,
    step: 1,
    visible: false,
  },
  series: [],
  source: {
    text: 'Source: https://howoldisit.glitch.me/',
    align: 'left',
    fontSize: 11,
    offsetY: -4,
    padding: '0 5',
    target: '_blank',
    url: 'https://howoldisit.glitch.me/',
  },
};

tech.map(function (el, idx) {
  let plot = {
    text: el[0],
    dataTech: el[0].toLowerCase(),
    dataInvented: el[1],
    dataYears: cyear - el[1],
    values: [
      [el[1], idx],
      [cyear, idx],
    ],
  };
  chartConfig.series.push(plot);
});

// DEFINE CHART
// -----------------------------
// Main chart render location
let chartId = 'myChart';

// INPUT CHANGE EVENT
// -----------------------------
zcFilter.addEventListener('keyup', myHandler);

function myHandler() {
  let filled = zcFilter.value.length !== 1;
  if (filled) zingchart.exec(zcId, 'update');
}

zingchart.render({
  id: zcId,
  width: '100%',
  height: '560px',
  output: 'svg',
  data: chartConfig,
  events: {
    load: loaded,
  },
});

// CHART RENDERED
// -----------------------------
// Set CSS class to show chart after render
function loaded() {
  let chart = document.querySelector('#' + chartId);
  chart.classList.add('loaded');
}

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

// Plot rule
function plotJsRule(p) {
  let tech = p['data-tech'];
  let isNotFound = tech.indexOf(zcFilter.value.toLowerCase()) === -1;
  if (isNotFound) {
    return {
      lineColor: '#ccc',
    };
  }
}
.zc-body { 
  margin: 10px;
  padding: 10px;
  background-color: #fff;
}

.zcdemo { 
  position: relative; 
}

#filterbox {
  position: absolute;
  top: 6px;
  left: calc(50% + 22px); 
  z-index: 999;
}

#filter {
  padding: 3px 5px;
  width: 110px;
  height: auto;
  font-size: 12px;
  font-weight: 500;
}

.zc-ref { display:none; }
Financial Widget Dashboard 15/272 Holiday Tree

Related Documentation: