Line Chart with Zoom Menu

Please enable JavaScript to see the interactive demo.

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

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

    .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 = {
      type: 'line',
      backgroundColor: 'white',
      marginBottom: '100px',
      title: {
        text: 'Data vs. Time'
      },
      legend: {
        adjustLayout: true,
        align: 'center',
        marginTop: '15%',
        backgroundColor: 'none',
        borderWidth: '0px',
        layout: 'h',
        verticalAlign: 'top'
      },
      plot: {
        exact: true,
        lineWidth: '2px',
        preview: true,
        shadow: false
      },
      plotarea: {
        adjustLayout: true,
        margin: 'dynamic',
        marginTop: '5%',
        marginBottom: '20%',
        width: '100%'
      },
      scaleX: {
        format: '%v',
        item: {
          autoAlign: true,
          maxChars: 10
        },
        label: {
          text: 'TIME',
          marginTop: '100px'
        },
        tick: {
          lineColor: 'black',
          lineWidth: '2px',
          size: '8px'
        },
        zooming: true
      },
      scaleY: {
        decimals: 0,
        zooming: true
      },
      crosshairX: {
        plotLabel: {
          backgroundColor: '#fff',
          borderColor: 'gray',
          borderRadius: '5px',
          borderWidth: '3px',
          width: '100px'
        }
      },
      labels: [{
          text: 'Zoom',
          color: 'gray',
          x: '15px',
          y: '45px'
        },
        {
          text: 'From: ',
          color: 'black',
          fontWeight: 'bold',
          x: '400px',
          y: '45px'
        },
        {
          id: 'from-date',
          text: '3/1/12',
          color: 'black',
          x: '440px',
          y: '45px'
        },
        {
          text: 'To: ',
          color: 'black',
          fontWeight: 'bold',
          x: '490px',
          y: '45px'
        },
        {
          id: 'to-date',
          text: '6/3/14',
          color: 'black',
          x: '520px',
          y: '45px'
        }
      ],
      shapes: [{
          type: 'rect',
          id: '6-mos',
          backgroundColor: 'gray',
          label: {
            text: '6 Months',
            color: 'white',
            fontWeight: 'bold'
          },
          width: '80px',
          height: '20px',
          x: '90px',
          y: '54px'
        },
        {
          type: 'rect',
          id: '1-year',
          backgroundColor: 'gray',
          label: {
            text: '1 year',
            color: 'white',
            fontWeight: 'bold'
          },
          width: '80px',
          height: '20px',
          x: '175px',
          y: '54px'
        },
        {
          type: 'rect',
          id: '1-5-years',
          backgroundColor: 'gray',
          label: {
            text: '1.5 years',
            color: 'white',
            fontWeight: 'bold'
          },
          width: '80px',
          height: '20px',
          x: '260px',
          y: '54px'
        },
        {
          type: 'rect',
          id: 'all',
          backgroundColor: 'gray',
          label: {
            text: 'All',
            color: 'white',
            fontWeight: 'bold'
          },
          width: '80px',
          height: '20px',
          x: '345px',
          y: '54px'
        }
      ],
      preview: {
        adjustLayout: true,
        height: '40px',
        visible: true
      },
      csv: {
        url: 'https://cdn.zingchart.com/resources/CRP0HM8L_data01.csv',
        smartScales: false,
        verticalLabels: true
      }
    };

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

    let zoomToDate = (months) => {
      // get the array of dates from scale-x
      let scaleXValues = zingchart.exec('myChart', 'getobjectinfo', {
        object: 'scale',
        name: 'scale-x'
      });
      // isolate the last date
      let values = scaleXValues.values;
      // save a reference to it for updating the chart
      let lastDateStr = values[values.length - 1];
      // convert it to a date for manipulation
      let lastDate = new Date(lastDateStr);

      // make a new date object and subtract the # of months
      let newDate = new Date(lastDate);
      newDate.setMonth(newDate.getMonth() - months);

      let year = newDate.getFullYear().toString().substr(2);
      // var newYear = year.substr(2);
      let newDateStr = (newDate.getMonth() + 1) + '/' + (newDate.getDay()) + '/' + year;
      zingchart.exec('myChart', 'zoomtovalues', {
        xmax: lastDateStr,
        xmin: newDateStr
      });
    }

    zingchart.zoom = (p) => {
      zingchart.exec('myChart', 'updateobject', {
        type: 'label',
        data: {
          id: 'from-date',
          text: p.kmin
        }
      });

      zingchart.exec('myChart', 'updateobject', {
        type: 'label',
        data: {
          id: 'to-date',
          text: p.kmax
        }
      });
    }

    zingchart.shape_click = (p) => {
      switch (p.shapeid) {
        case '6-mos':
          zoomToDate(6);
          break;
        case '1-year':
          zoomToDate(12);
          break;
        case '1-5-years':
          zoomToDate(18);
          break;
        case 'all':
          zingchart.exec('myChart', 'viewall');
          zingchart.exec('myChart', 'updateobject', {
            type: 'label',
            data: {
              id: 'from-date',
              text: '3/1/12'
            }
          });
          zingchart.exec('myChart', 'updateobject', {
            type: 'label',
            data: {
              id: 'to-date',
              text: '6/3/14'
            }
          });
          break;
      }
    };
  </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 = {
  type: 'line',
  backgroundColor: 'white',
  marginBottom: '100px',
  title: {
    text: 'Data vs. Time'
  },
  legend: {
    adjustLayout: true,
    align: 'center',
    marginTop: '15%',
    backgroundColor: 'none',
    borderWidth: '0px',
    layout: 'h',
    verticalAlign: 'top'
  },
  plot: {
    exact: true,
    lineWidth: '2px',
    preview: true,
    shadow: false
  },
  plotarea: {
    adjustLayout: true,
    margin: 'dynamic',
    marginTop: '5%',
    marginBottom: '20%',
    width: '100%'
  },
  scaleX: {
    format: '%v',
    item: {
      autoAlign: true,
      maxChars: 10
    },
    label: {
      text: 'TIME',
      marginTop: '100px'
    },
    tick: {
      lineColor: 'black',
      lineWidth: '2px',
      size: '8px'
    },
    zooming: true
  },
  scaleY: {
    decimals: 0,
    zooming: true
  },
  crosshairX: {
    plotLabel: {
      backgroundColor: '#fff',
      borderColor: 'gray',
      borderRadius: '5px',
      borderWidth: '3px',
      width: '100px'
    }
  },
  labels: [
    {
      text: 'Zoom',
      color: 'gray',
      x: '15px',
      y: '45px'
    },
    {
      text: 'From: ',
      color: 'black',
      fontWeight: 'bold',
      x: '400px',
      y: '45px'
    },
    {
      id: 'from-date',
      text: '3/1/12',
      color: 'black',
      x: '440px',
      y: '45px'
    },
    {
      text: 'To: ',
      color: 'black',
      fontWeight: 'bold',
      x: '490px',
      y: '45px'
    },
    {
      id: 'to-date',
      text: '6/3/14',
      color: 'black',
      x: '520px',
      y: '45px'
    }
  ],
  shapes: [
    {
      type: 'rect',
      id: '6-mos',
      backgroundColor: 'gray',
      label: {
        text: '6 Months',
        color: 'white',
        fontWeight: 'bold'
      },
      width: '80px',
      height: '20px',
      x: '90px',
      y: '54px'
    },
    {
      type: 'rect',
      id: '1-year',
      backgroundColor: 'gray',
      label: {
        text: '1 year',
        color: 'white',
        fontWeight: 'bold'
      },
      width: '80px',
      height: '20px',
      x: '175px',
      y: '54px'
    },
    {
      type: 'rect',
      id: '1-5-years',
      backgroundColor: 'gray',
      label: {
        text: '1.5 years',
        color: 'white',
        fontWeight: 'bold'
      },
      width: '80px',
      height: '20px',
      x: '260px',
      y: '54px'
    },
    {
      type: 'rect',
      id: 'all',
      backgroundColor: 'gray',
      label: {
        text: 'All',
        color: 'white',
        fontWeight: 'bold'
      },
      width: '80px',
      height: '20px',
      x: '345px',
      y: '54px'
    }
  ],
  preview: {
    adjustLayout: true,
    height: '40px',
    visible: true
  },
  csv: {
    url: 'https://cdn.zingchart.com/resources/CRP0HM8L_data01.csv',
    smartScales: false,
    verticalLabels: true
  }
};

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

let zoomToDate = (months) => {
  // get the array of dates from scale-x
  let scaleXValues = zingchart.exec('myChart', 'getobjectinfo', {
    object: 'scale',
    name: 'scale-x'
  });
  // isolate the last date
  let values = scaleXValues.values;
  // save a reference to it for updating the chart
  let lastDateStr = values[values.length - 1];
  // convert it to a date for manipulation
  let lastDate = new Date(lastDateStr);

  // make a new date object and subtract the # of months
  let newDate = new Date(lastDate);
  newDate.setMonth(newDate.getMonth() - months);

  let year = newDate.getFullYear().toString().substr(2);
  // var newYear = year.substr(2);
  let newDateStr = (newDate.getMonth() + 1) + '/' + (newDate.getDay()) + '/' + year;
  zingchart.exec('myChart', 'zoomtovalues', {
    xmax: lastDateStr,
    xmin: newDateStr
  });
}

zingchart.zoom = (p) => {
  zingchart.exec('myChart', 'updateobject', {
    type: 'label',
    data: {
      id: 'from-date',
      text: p.kmin
    }
  });

  zingchart.exec('myChart', 'updateobject', {
    type: 'label',
    data: {
      id: 'to-date',
      text: p.kmax
    }
  });
}

zingchart.shape_click = (p) => {
  switch (p.shapeid) {
    case '6-mos':
      zoomToDate(6);
      break;
    case '1-year':
      zoomToDate(12);
      break;
    case '1-5-years':
      zoomToDate(18);
      break;
    case 'all':
      zingchart.exec('myChart', 'viewall');
      zingchart.exec('myChart', 'updateobject', {
        type: 'label',
        data: {
          id: 'from-date',
          text: '3/1/12'
        }
      });
      zingchart.exec('myChart', 'updateobject', {
        type: 'label',
        data: {
          id: 'to-date',
          text: '6/3/14'
        }
      });
      break;
  }
};

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

.zc-ref {
  display: none;
}

Bubble Pie Chart with Tooltips 186/281 Stacked Area Chart with Preview

Line Chart with Zoom Menu

Related Documentation: