document is not defined

[Pimaweichai]

• G2 Version:
  "bizcharts": "^3.0.5",

• Platform:
  mac

• Mini Showcase(like screenshots):

• CodePen Link:

import {Chart, Axis, Tooltip, Geom} from "bizcharts";

const data = [
    {month:'1',temperature:20},
    {month:'2',temperature:30},
];

export default (
    <Chart height={400} data={data} forceFit>
        <Axis name="month" />
        <Axis name="temperature" label={{formatter: val => `${val}°C`}} />
        <Tooltip crosshairs={{type : "y"}} />
        <Geom type="line" position="month*temperature" size={2} color={'city'} />
        <Geom type='point' position="month*temperature" size={4} color={'city'} />
    </Chart>
)

When I use the bizcharts and render by server side. It shows the problem 'document is not defined'

I have create the issue at bizcharts alibaba/BizCharts#51. They suggest me to create a new issue here.

[leungwensen]

@Pimaweichai could you provide a repo that can reproduce the problem?

[Pimaweichai]

@leungwensen Problem have solved.

[leungwensen]

How? Could you share your solution here?

[Pimaweichai]

@leungwensen https://github.com/JedWatson/exenv can provide the document. Now there's another problem is that when g2 and bizcharts will support React 16?

[Pimaweichai]

the beta version will be ok, on this Friday. Really appreciate your help. @leungwensen

[leungwensen]

Thank you!

[mghazanfar89]

@Pimaweichai I am getting the same error. I have installed https://github.com/JedWatson/exenv and do not know where to use var ExecutionEnvironment = require('exenv');
Can you please guide me how to remove "document is not defined" error and create charts?

[superbull]

@Pimaweichai I am also want to ask how do you solve this issue? Could you please paste an example code? Thanks!

[superbull]

I found a way to solve this error without install exenv.

import React from 'react';
import ReactDOM from 'react-dom';
let bizcharts;
if (process.browser) {
  bizcharts = require('bizcharts');
}

const data = [
  { genre: 'Sports', sold: 275, income: 2300 },
  { genre: 'Strategy', sold: 115, income: 667 },
  { genre: 'Action', sold: 120, income: 982 },
  { genre: 'Shooter', sold: 350, income: 5271 },
  { genre: 'Other', sold: 150, income: 3710 }
];

const cols = {
  sold: { alias: 'amount' },
  genre: { alias: 'game type' }
};

export default () => {
  return (
    <div>
      {process.browser &&
        <bizcharts.Chart width={600} height={400} data={data} scale={cols}>
          <bizcharts.Axis name="genre" />
          <bizcharts.Axis name="sold" />
          <bizcharts.Legend position="top" dy={-20} />
          <bizcharts.Tooltip />
          <bizcharts.Geom type="interval" position="genre*sold" color="genre" />
        </bizcharts.Chart>
      }
    </div>
  );
}

[chdharm]

@Pimaweichai
I am using react 16 with bizcharts 3.5 and getting ReferenceError: document is not defined.
I am facing this issue and not able to understand how to use https://github.com/JedWatson/exenv
this library. I am rendering this chart from Server side into a variable as a plain html and converting it into PDF directly. Express is my backend.

[fulgari]

I found a way to solve this error without install exenv.

import React from 'react';
import ReactDOM from 'react-dom';
let bizcharts;
if (process.browser) {
  bizcharts = require('bizcharts');
}

const data = [
  { genre: 'Sports', sold: 275, income: 2300 },
  { genre: 'Strategy', sold: 115, income: 667 },
  { genre: 'Action', sold: 120, income: 982 },
  { genre: 'Shooter', sold: 350, income: 5271 },
  { genre: 'Other', sold: 150, income: 3710 }
];

const cols = {
  sold: { alias: 'amount' },
  genre: { alias: 'game type' }
};

export default () => {
  return (
    <div>
      {process.browser &&
        <bizcharts.Chart width={600} height={400} data={data} scale={cols}>
          <bizcharts.Axis name="genre" />
          <bizcharts.Axis name="sold" />
          <bizcharts.Legend position="top" dy={-20} />
          <bizcharts.Tooltip />
          <bizcharts.Geom type="interval" position="genre*sold" color="genre" />
        </bizcharts.Chart>
      }
    </div>
  );
}

Now I get this one...

ReferenceError: process is not defined
    at Analysis.render (webpack-internal:///./pages/analysis.jsx:152:5)