Issues while using donut chart

Question

I am new to web development and am trying to use patternFly Donut chart for my project. But when I try to check it by running as simple HTML it throws below error. Could someone help me with this?

Error image

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
    <div id="donut-chart-6" class="example-donut-chart-utilization"></div>
    <script>
  var c3ChartDefaults = $().c3ChartDefaults();
  var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
  utilizationDonutChartConfig.bindto = '#donut-chart-6';
  utilizationDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  utilizationDonutChartConfig.size = {
    width: 200,
    height: 171
  };

  utilizationDonutChartConfig.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };
  var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
  $().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>

Dependency issue it seems. Try to check the order of the JS scripts you are using. Either some are missing, or the order is not as it should be. — Mohammed Joraid, Aug 01 '17 at 11:48

score 1 · Answer 1 · answered Aug 01 '17 at 12:01

Your use of $() is confusing. Commenting out the lines that use it yields a donut chart. It seems like you're trying to load default configurations, but I didn't find any information on the c3 website indicating that it was a jQuery plugin. Perhaps you're misunderstanding what jQuery does? If you're trying to load some sort of default configurations from a form as JSON then you might need to get more creative.

For simplicity, in the example below I've reformatted your data as a single object.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
    <div id="donut-chart-6" class="example-donut-chart-utilization"></div>
    <script>
  //var c3ChartDefaults = $().c3ChartDefaults();
  //var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
  utilizationDonutChartConfig = {
    bindto : '#donut-chart-6',
    data : {
      type: "donut",
      columns: [
        ["Used", 60],
        ["Available", 40]
      ],
      groups: [
        ["used", "available"]
      ],
      order: null
    },
    size : {
      width: 200,
      height: 171
    },
   tooltip : {
    //contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
    }
  }
  var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
  //$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>

score 0 · Answer 2 · answered Nov 27 '17 at 10:29

0

var c3ChartDefaults =  (<any>$()).c3ChartDefaults();

This worked for me.

answered Nov 27 '17 at 10:29

Rakesh Lochan Sarma

123
2
10

Issues while using donut chart

2 Answers2