epochjs / epoch

A general purpose, real-time visualization library.
http://epochjs.github.io/epoch
MIT License
4.97k stars 278 forks source link

Cannot read property 'format' of undefined #243

Open JakobStaudt opened 5 years ago

JakobStaudt commented 5 years ago

I currently want to write a chrome app that contains a epoch graph. Heres my index.html:

<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link href="styles/main.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/epoch.min.css">
</head>
<body>
  <h1>Test</h1>
  <div id="pie" style="width: 400px; height: 400px"></div>

  <script src="js/d3.js"></script>
  <script src="js/epoch.js"></script>
</body>
</html>

Heres my main.js:

chrome.app.runtime.onLaunched.addListener(function() {
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
  var width = 500;
  var height = 300;

  chrome.app.window.create('index.html', {
    id: "helloWorldID",
    outerBounds: {
      width: width,
      height: height,
      left: Math.round((screenWidth-width)/2),
      top: Math.round((screenHeight-height)/2)
    }
  });
});

var pieData = [
  { label: 'Slice 1', value: 10 },
  { label: 'Slice 2', value: 20 },
  { label: 'Slice 3', value: 40 },
  { label: 'Slice 4', value: 30 }
]

$('#pie').epoch({
  type: 'pie',
  data: pieData
});

When I run this, the chart area stays empty and the error "Uncaught TypeError: Cannot read property 'format' of undefined" appears. The line the error occurs at is 429 which contains this: d3Seconds = d3.time.format('%I:%M:%S %p'); My guess is that the error appears because d3 wasnt properly loaded but I dont know how to fix this as I think I followed the guide.

karthikonly commented 4 years ago

epoch chart is very old and it is not compatible with new version of d3.js. Try linking to older version of d3. I tried v3 and it worked.

elcordova commented 4 years ago

hey bro, you can read this https://keithpblog.org/post/upgrading-d3-from-v3-to-v4/

wangzhankun commented 3 years ago

epoch chart is very old and it is not compatible with new version of d3.js. Try linking to older version of d3. I tried v3 and it worked.

when I changed into d3.v3.min.js, there is another error

Uncaught ReferenceError: d3 is not defined
    at epoch.min.js:1