falkan3 / jchart Goto Github PK

I added your demo base configuration code, downloaded/uploaded your src scripts and included the jquery 3.3.1 link. After doing all this, I receive the following errors.

Do you have any idea what I am doing wrong?

`jchart.js:57 Uncaught ReferenceError: require is not defined

(anonymous) @ jchart.js:57

(anonymous) @ jchart.js:19

(anonymous) @ jchart.js:21

jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).jChart is not a function TypeError: $(...).jChart is not a function

w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2

c @ jquery-3.3.1.min.js:2

setTimeout (async)

(anonymous) @ jquery-3.3.1.min.js:2

u @ jquery-3.3.1.min.js:2

fireWith @ jquery-3.3.1.min.js:2

fire @ jquery-3.3.1.min.js:2

u @ jquery-3.3.1.min.js:2

fireWith @ jquery-3.3.1.min.js:2

ready @ jquery-3.3.1.min.js:2

_ @ jquery-3.3.1.min.js:2

jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).jChart is not a function

JS

`<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="src/js/jchart.js"></script> <script> $(document).ready(function() { //Donut Chart const myChart = $("#element").jChart({ // selectors elements: { container: null, body: null, group: null, figure: null, svg: null, segments: [], markers: null }, // your own data data: [], // values necessary for the graphing, like sum of values of all segments values: {}, placeholder: { data: { value: 0, // value of the segment color: { normal: '#00a3f2', // stroke/fill color of the segment active: '#00d8f2', }, draw: true, // whether to draw the segment on the chart or not; default true push: true, // whether to push the next segment via offset. Best to set false together when draw is set to false (the empty section will always be at the end that way); default true order: null, // drawing order title: 'untitled', strokeWidth: 3 } }, // appearance options appearance: { type: 'donut', // or 'pie', 'bar' baseColor: '#ddd', segmentColor: { normal: '#00a3f2', active: '#00d8f2', }, baseOffset: 0, // offset for starting point of first segment baseStrokeWidth: 1, strokeWidth: 3, // default stroke width for all segments animated: true, title: { chartTitle: '', showValue: true, // tooltips showPercentage: true, showSummary: false, // summary - show a value inside the donut chart summaryTitle: '', // by default it shows the percentage of the greatest segment in the chart // (if summaryTitle is empty) summarySegment: null // the segment's id which percentage will be displayed in the summary }, /* DONUT AND CIRCLE */ radius: 100 / (2 * Math.PI), innerCutout: 0.75, // how "thin" the segments are from the center point. (0 will render a pie chart (full circle)) centerX: 21, centerY: 21, /* DONUT */ subType: 'circle', // render type: circle for circle based approach, path for line and arc approach using path isGauge: false, // if the donut will be rendered as a full circle or a half-circle gap: 1, // gap between segments for donut chart (in percentage, 1 = 1%) /* BAR */ showMarkers: true, markerColor: '#f45a42', markerCount: 10, markerWidth: 0.5, // in percentage of width - 0.5 means 0.5% rx: 0, // horizontal corner radius ry: 0 // vertical corner radius }, // callback function callbacks: { onInit() { }, onRefresh() { }, onSegmentMouseover() { }, onSegmentMouseout() { } } }); }); </script>`