Demos Back to Demos

Export ZingChart data to ZingGrid

22 of 25
How to hook up API events to export ZingChart data into ZingGrid.
Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <button onClick="exportData()">Export Data To Grid</button>
    <!-- CHART CONTAINER -->
    <div class="joint--container">
      <div id="myChart">
        <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
      </div>

      <zing-grid 
      	caption="Exported Data" 
      	sort 
      	search 
      	columns-control 
      	draggable></zing-grid>
    </div>
  </body>
</html>

CSS

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

.joint--container { display:flex; height:450px; }

#myChart, zing-grid {
	height:100%;
	width:48%;
	min-height:150px;
}

.zc-ref { display:none; }

button { cursor:pointer; padding: 10px; margin: 10px; }

JS

// on click export chart data
function exportData() {
  // getseriesdata gives you data +  more information about the series
  // like text and color
  // let chartData = zingchart.exec('myChart', 'getseriesdata');
  let chartData = zingchart.exec('myChart', 'getseriesvalues');
  let zingGridRef = document.querySelector('zing-grid');
  let labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 	let gridData = [];

  for (let i=0; i < labels.length; i++) {
    gridData.push({
      day: labels[i],
      // (hardcoded) export series data
      week1: chartData[0][i],
      week2: chartData[1][i]
    });
  }
 
	// set the series 1 value to be displayed in grid
  zingGridRef.setData(gridData);
}

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  
  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  const myConfig = {
    type: 'line',
    globals: {
      fontSize: 14
    },
    title: {
      text: 'A Simple Line Chart',
      fontSize: 24,
      // will force margin and padding on title
      // adjustLayout: true
    },
    legend: {
			draggable: true,
      cursor: 'hand',
      // will force margin and padding on legen d
      // adjustLayout: true
    },
    scaleX: {
      // set scale label
      label: { text: 'Days' },
      // convert text on scale indices
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    scaleY: {
      // scale label with unicode character
      label: { text: 'Temperature (°F)' }
    },
    // plot represents general series, or plots, styling
    plot: {
      lineWidth:3,
      // line node styling
      marker: { 
        size: 6,
        borderWidth: 0,
      },
      // hoverstate
      tooltip: {
        // turn individual point tooltip off
        // visible: false,
       	padding: '10 15',
        borderRadius: 3,
        // % symbol represents a token to insert a value. Full list here:
        // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
        text: '%plot-text %kl was %v (°F)',
        // htmlMode renders text attribute as html so
        // ° is rendered
        htmlMode: true, 
      },      
      // animation docs here:
      // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
      animation:{
        effect: 'ANIMATION_SLIDE_TOP', 
        method: 'ANIMATION_BOUNCE_EASE_OUT',
        sequence: 'ANIMATION_NO_SEQUENCE',
        speed: 975,
      }
    },
    crosshairX: {
      plotLabel: {
       	padding: '10 15',
        borderRadius: 3,
      }
    },
    series: [
      {
        // plot values
        values: [23,20,27,29,25,17,15],
        lineColor: '#9c27b0',
        marker: { backgroundColor: '#ba68c8' },
        text: 'Week 1',
      },
      {
        // plot values
        values: [35,42,null,49,35,47,35],
        lineColor: '#00bcd4',
        marker: { backgroundColor: '#4dd0e1' },
        text: 'Week 2'
      }
    ]
  };
  
  // render chart with width and height to
  // fill the parent container CSS dimensions
  zingchart.render({ 
    id: 'myChart', 
    data: myConfig, 
    height: '100%', 
    width: '100%' 
  });
});

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio