Demos Back to Docs

Export ZingChart Data to ZingGrid

60 of 124

You can hook up API events to export ZingChart data into ZingGrid.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/67R83PZO

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 nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></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 nonce="undefined" 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 column-drag></zing-grid>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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"></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 
      	column-drag></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

Export ZingChart Data to ZingGrid

Full Code

Related Docs

Related Docs

Demo Gallery