Gallery Back to Gallery

Mixed Time Series with Zooming

Powered by ZingChart 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
  <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"];

    function fetchData() {
      // after initial chart render. Fetch data.
      fetch('https://cdn.zingchart.com/datasets/gold-stock-data.json')
        .then(function(res) {
          return res.json();
        })
        .then(function(jsonData) {
          // update series
          zingchart.exec('myChart', 'setseriesvalues', {
            values: [jsonData.highData, jsonData.volumeData],
          });

          // update labels after rendering data
          zingchart.exec('myChart', 'modify', {
            data: {
              scaleX: {
                labels: jsonData.timeLabels,
              },
            },
          });
        });
    };

    zingchart.bind('myChart', 'label_click', (e) => {
      zingchart.exec(e.id, 'reload');
      fetchData();
    });

    let chartConfig = {
      type: 'mixed',
      backgroundColor: '#f4f4f4',
      title: {
        text: 'Gold from 1975 to 2019',
        backgroundColor: 'none',
        color: '#818181',
        fontFamily: 'Roboto',
        fontSize: '16px',
        height: '40px',
      },
      subtitle: {
        text: 'More than 30,000 data points',
        color: '#818181',
        fontFamily: 'Roboto',
        fontSize: '11px',
        paddingTop: '20px',
      },
      legend: {
        visible: false,
      },
      plot: {
        lineColor: '#00baf0',
        lineWidth: '1px',
        marker: {
          backgroundColor: '#fbfbfb',
          borderColor: '#00baf0',
          borderWidth: '2px',
          shadow: false,
          size: '3px',
        },
        maxTrackers: 0,
        mode: 'fast',
        shadow: false,
      },
      plotarea: {
        backgroundColor: '#fbfbfb',
        marginBottom: '65px',
        marginLeft: '60px',
        marginRight: '55px',
        marginTop: '45px',
      },
      scaleX: {
        guide: {
          lineColor: '#c7c9c9',
          lineStyle: 'solid',
        },
        item: {
          paddingTop: '5px',
          fontColor: '#818181',
          fontSize: '10px',
        },
        label: {
          visible: false,
        },
        labels: [],
        lineColor: '#c7c9c9',
        lineWidth: '1px',
        maxItems: 7,
        maxLabels: 7,
        mirrored: true,
        tick: {
          lineColor: '#c7c9c9',
          lineWidth: '1px',
        },
        zooming: true,
      },
      scaleY: {
        values: '0:2000:500',
        decimals: 0,
        format: '$%v',
        guide: {
          lineColor: '#c7c9c9',
          lineStyle: 'solid',
        },
        item: {
          paddingRight: '5px',
          fontColor: '#818181',
          fontSize: '10px',
        },
        lineColor: '#c7c9c9',
        lineWidth: '1px',
        refLine: {
          alpha: 0.25,
          lineColor: '#c7c9c9',
          visible: true,
        },
        shadow: false,
        tick: {
          lineColor: '#c7c9c9',
          lineWidth: '1px',
        },
      },
      scaleY2: {
        values: '0:1000000:500000',
        decimals: 0,
        guide: {
          visible: false,
        },
        item: {
          paddingRight: '5px',
          fontColor: '#818181',
          fontSize: '10px',
          offsetX: '2px',
        },
        lineColor: '#c7c9c9',
        lineWidth: '1px',
        multiplier: true,
        offsetX: '2px',
        shadow: false,
        tick: {
          lineColor: '#c7c9c9',
          lineWidth: '1px',
          offsetX: '2px',
        },
      },
      labels: [{
        id: 'reload_btn',
        text: 'Reload',
        backgroundColor: '#fff',
        borderColor: '#777',
        borderRadius: '5px',
        borderWidth: '1px',
        cursor: 'hand',
        fontColor: '#777',
        padding: '5px',
        x: '60px',
        y: '10px',
      }, ],
      series: [{
          type: 'area',
          text: 'Price',
          values: [],
          backgroundColor: '#00baf0 #fbfbfb',
          decimals: 2,
        },
        {
          type: 'bar',
          text: 'Volume',
          values: [],
          backgroundColor: '#003849',
          scales: 'scale-x,scale-y-2',
        },
      ],
      crosshairX: {
        plotLabel: {
          text: '%t was %v<br>on %kl',
          padding: '8px',
          borderRadius: '5px',
        },
      },
      gui: {
        behaviors: [{
            id: 'SaveAsImage',
            enabled: 'none',
          },
          {
            id: 'Print',
            enabled: 'none',
          },
          {
            id: 'BugReport',
            enabled: 'none',
          },
          {
            id: 'FullScreen',
            enabled: 'none',
          },
          {
            id: 'ZoomIn',
            enabled: 'none',
          },
          {
            id: 'ZoomOut',
            enabled: 'none',
          },
          {
            id: 'LogScale',
            enabled: 'none',
          },
          {
            id: 'DownloadPDF',
            enabled: 'none',
          },
          {
            id: '3D',
            enabled: 'none',
          },
          {
            id: 'HideGuide',
            enabled: 'none',
          },
        ],
        contextMenu: {
          button: {
            visible: false,
          },
          gear: {
            visible: false,
          },
        },
      },
      noData: {
        text: 'Mining gold data from servers...',
      },
      scrollX: {
        bar: {
          backgroundColor: '#fff',
        },
        handle: {
          alpha: 0.7,
          backgroundColor: '#ccc',
          borderWidth: '0px',
          height: '5px',
        },
      },
      source: {
        text: 'Source: COMEX Gold Futures via Quandl',
        fontColor: '#818181',
        fontFamily: 'Roboto',
        fontSize: '9px',
      },
    };

    zingchart.ASYNC = true;

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

    window.addEventListener('load', function() {
      fetchData();
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
		<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>
function fetchData() {
  // after initial chart render. Fetch data.
  fetch('https://cdn.zingchart.com/datasets/gold-stock-data.json')
    .then(function (res) {
      return res.json();
    })
    .then(function (jsonData) {
      // update series
      zingchart.exec('myChart', 'setseriesvalues', {
        values: [jsonData.highData, jsonData.volumeData],
      });

      // update labels after rendering data
      zingchart.exec('myChart', 'modify', {
        data: {
          scaleX: {
            labels: jsonData.timeLabels,
          },
        },
      });
    });
};

zingchart.bind('myChart', 'label_click', (e) => {
  zingchart.exec(e.id, 'reload');
  fetchData();
});

let chartConfig = {
  type: 'mixed',
  backgroundColor: '#f4f4f4',
  title: {
    text: 'Gold from 1975 to 2019',
    backgroundColor: 'none',
    color: '#818181',
    fontFamily: 'Roboto',
    fontSize: '16px',
    height: '40px',
  },
  subtitle: {
    text: 'More than 30,000 data points',
    color: '#818181',
    fontFamily: 'Roboto',
    fontSize: '11px',
    paddingTop: '20px',
  },
  legend: {
    visible: false,
  },
  plot: {
    lineColor: '#00baf0',
    lineWidth: '1px',
    marker: {
      backgroundColor: '#fbfbfb',
      borderColor: '#00baf0',
      borderWidth: '2px',
      shadow: false,
      size: '3px',
    },
    maxTrackers: 0,
    mode: 'fast',
    shadow: false,
  },
  plotarea: {
    backgroundColor: '#fbfbfb',
    marginBottom: '65px',
    marginLeft: '60px',
    marginRight: '55px',
    marginTop: '45px',
  },
  scaleX: {
    guide: {
      lineColor: '#c7c9c9',
      lineStyle: 'solid',
    },
    item: {
      paddingTop: '5px',
      fontColor: '#818181',
      fontSize: '10px',
    },
    label: {
      visible: false,
    },
    labels: [],
    lineColor: '#c7c9c9',
    lineWidth: '1px',
    maxItems: 7,
    maxLabels: 7,
    mirrored: true,
    tick: {
      lineColor: '#c7c9c9',
      lineWidth: '1px',
    },
    zooming: true,
  },
  scaleY: {
    values: '0:2000:500',
    decimals: 0,
    format: '$%v',
    guide: {
      lineColor: '#c7c9c9',
      lineStyle: 'solid',
    },
    item: {
      paddingRight: '5px',
      fontColor: '#818181',
      fontSize: '10px',
    },
    lineColor: '#c7c9c9',
    lineWidth: '1px',
    refLine: {
      alpha: 0.25,
      lineColor: '#c7c9c9',
      visible: true,
    },
    shadow: false,
    tick: {
      lineColor: '#c7c9c9',
      lineWidth: '1px',
    },
  },
  scaleY2: {
    values: '0:1000000:500000',
    decimals: 0,
    guide: {
      visible: false,
    },
    item: {
      paddingRight: '5px',
      fontColor: '#818181',
      fontSize: '10px',
      offsetX: '2px',
    },
    lineColor: '#c7c9c9',
    lineWidth: '1px',
    multiplier: true,
    offsetX: '2px',
    shadow: false,
    tick: {
      lineColor: '#c7c9c9',
      lineWidth: '1px',
      offsetX: '2px',
    },
  },
  labels: [
    {
      id: 'reload_btn',
      text: 'Reload',
      backgroundColor: '#fff',
      borderColor: '#777',
      borderRadius: '5px',
      borderWidth: '1px',
      cursor: 'hand',
      fontColor: '#777',
      padding: '5px',
      x: '60px',
      y: '10px',
    },
  ],
  series: [
    {
      type: 'area',
      text: 'Price',
      values: [],
      backgroundColor: '#00baf0 #fbfbfb',
      decimals: 2,
    },
    {
      type: 'bar',
      text: 'Volume',
      values: [],
      backgroundColor: '#003849',
      scales: 'scale-x,scale-y-2',
    },
  ],
  crosshairX: {
    plotLabel: {
      text: '%t was %v<br>on %kl',
      padding: '8px',
      borderRadius: '5px',
    },
  },
  gui: {
    behaviors: [
      {
        id: 'SaveAsImage',
        enabled: 'none',
      },
      {
        id: 'Print',
        enabled: 'none',
      },
      {
        id: 'BugReport',
        enabled: 'none',
      },
      {
        id: 'FullScreen',
        enabled: 'none',
      },
      {
        id: 'ZoomIn',
        enabled: 'none',
      },
      {
        id: 'ZoomOut',
        enabled: 'none',
      },
      {
        id: 'LogScale',
        enabled: 'none',
      },
      {
        id: 'DownloadPDF',
        enabled: 'none',
      },
      {
        id: '3D',
        enabled: 'none',
      },
      {
        id: 'HideGuide',
        enabled: 'none',
      },
    ],
    contextMenu: {
      button: {
        visible: false,
      },
      gear: {
        visible: false,
      },
    },
  },
  noData: {
    text: 'Mining gold data from servers...',
  },
  scrollX: {
    bar: {
      backgroundColor: '#fff',
    },
    handle: {
      alpha: 0.7,
      backgroundColor: '#ccc',
      borderWidth: '0px',
      height: '5px',
    },
  },
  source: {
    text: 'Source: COMEX Gold Futures via Quandl',
    fontColor: '#818181',
    fontFamily: 'Roboto',
    fontSize: '9px',
  },
};

zingchart.ASYNC = true;

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

window.addEventListener('load', function () {
  fetchData();
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
Stacked Area with Crosshair 263/275 Rose Radar Chart with Custom Tokens

Related Documentation: