Export ZingChart data to ZingGrid

58 of 122
How to hook up API events to export ZingChart data into ZingGrid.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-html,
    .zg-body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

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

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

    .zg-body .zc-ref {
      display: none;
    }

    .zg-body button {
      cursor: pointer;
      padding: 10px;
      margin: 10px;
    }

    @media (max-width: 600px) {
      .zg-body .joint--container {
        display: block;
      }
      .zg-body #myChart,
      zing-grid {
        width: 100%;
      }
    }

    zing-grid[loading] {
      height: 450px;
    }
  </style>
</head>

<body class="zg-body">

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>

  <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>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // 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:load 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%'
      });
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">

    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>

    <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>
.zg-html, .zg-body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

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

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

.zg-body .zc-ref { display:none; }

.zg-body button { cursor:pointer; padding: 10px; margin: 10px; }

@media (max-width: 600px) {
  .zg-body .joint--container { display: block; }
  .zg-body #myChart, zing-grid {  width: 100%; }
}
// 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:load 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 ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery