I have seen multiple incarnations of this error, but not seen an answer directly related to using the Dojo API/CDN. I am just going through a quick Dojo charting tutorial to figure out how to correctly apply a pie chart. I was using the simple instructions to set up a web page I could use to test from my local (see below). Everytime I launch the .html file, I get the error - Uncaught ReferenceError: require is not defined. All previous answers point to the src being faulty, whether its a cdn, api, or file path. I have tried multiple cdn's and configurations, including src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"and
<script data-dojo-config="async: 1"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>`,
yet I still get the same error (These are straight from the documentation). Any suggestions as to what is causing this error and how to resolve it to test my simple pie chart?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Pie Chart!</title>
<script> src="//ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>
</head>
<body>
<script>
require([
'dojo/dom',
'dojo/dom-construct',
'dojox/charting/Chart',
'dojox/charting/themes/Claro',
'dojox/charting/PiePlot'
], function (dom, domConstruct, Chart, theme, PiePlot) {
var pieChart = new Chart("chartNode");
// Set the theme
pieChart.setTheme(theme);
// Add the only/default plot
pieChart.addPlot("default", {
type: PiePlot, // our plot2d/Pie module reference as type value
radius: 200,
fontColor: "black",
labelOffset: -20
});
// Add the series of data
pieChart.addSeries("January",chartData);
// Render the chart!
pieChart.render();
});
</script>
<div id="chartNode" style="width: 550px; height: 550px;"></div>
</body>
</html>
The first thing that there is a type error in your script tag line 6 ,
closed tag script and src attrib outside the script tag , that why you have the error reuire is not ...
Also after correcting those you'ill still have some errors ,
so you need to fix an import
The 'dojox/charting/PiePlot' should be replaced by 'dojox/charting/plot2d/Pie'
and you need to declare your chartData here ,
If you need a file version see this GIST
Otherwise see below working snippet :
require([
'dojo/dom',
'dojo/dom-construct',
'dojox/charting/Chart',
'dojox/charting/themes/Claro',
'dojox/charting/plot2d/Pie'
], function(dom, domConstruct, Chart, theme, PiePlot) {
chartData = [
{ y: 389, text: "data1 " },
{ y: 125, text: "data 2" },
{ y: 285, text: "data 3" },
{ y: 193, text: "data 4" },
{ y: 21, text: "No data" }
];
var pieChart = new Chart("chartNode");
// Set the theme
pieChart.setTheme(theme);
// Add the only/default plot
pieChart.addPlot("default", {
type: PiePlot, // our plot2d/Pie module reference as type value
radius: 200,
fontColor: "black",
labelOffset: -20
});
// Add the series of data
pieChart.addSeries("January", chartData);
// Render the chart!
pieChart.render();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<div id="chartNode" style="width: 550px; height: 550px;"></div>
Related
I am trying to use the Highcharts set of javascript libraries to create a page that displays both a stock prices chart and a gantt chart (using the Highstocks and Highcharts Gantt libraries)
I do not have problems creating and displaying either of these plots independently on separate pages.
However, I cannot get the two libraries to work together in order to display these two plots on the same webpage.
I would appreciate any help i can get on how to get these two libraries to work together.
Attempt 1. If I import the highstock script first
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
then the following happens:
the prices plot will display but the gantt plot does not.
It throws two error messages in the console:
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at m (highstock.src.js:463)
at Object.d.error (highstock.src.js:474)
at highcharts-gantt.src.js:21
at highcharts-gantt.src.js:9
and
Uncaught TypeError: Highcharts.ganttChart is not a function
at myExample.html:60
Attempt 2. If I import the gantt script first
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
then the following happens:
the gantt plot will display but the prices plot does not.
It throws two error messages in the console:
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at d (highcharts-gantt.src.js:463)
at Object.c.error (highcharts-gantt.src.js:474)
at highstock.src.js:21
at highstock.src.js:9 ```
and
Uncaught TypeError: Highcharts.stockChart is not a function
at myExample.html:28
Example Code
A minimum viable code for demonstrating the problem i am running into is below:
<html>
<head>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
</head>
<body>
<!-- ================================================================== -->
<!-- PRICES PLOT -->
<!-- ================================================================== -->
<div id="pricesChart" style="height: 500px; min-width: 310px"></div>
<script type="text/javascript">
var prices =
[[Date.parse("2019-06-01 00:00:00"), 0.081558],
[Date.parse("2019-06-02 00:00:00"), 0.081728],
[Date.parse("2019-06-03 00:00:00"), 0.081624],
[Date.parse("2019-06-04 00:00:00"), 0.08164500000000001]
];
var lineplotOptions = {
xAxis: { type: 'datetime' },
series: [{
type: "line",
data: prices,
yAxis: 0,
}],
};
Highcharts.stockChart('pricesChart', lineplotOptions);
</script>
<!-- ================================================================== -->
<!-- GANT CHART -->
<!-- ================================================================== -->
<div id="container"></div>
<script type="text/javascript">
var tasks =
[{
start: Date.parse("2019-06-01 06:00:00"),
end: Date.parse("2019-06-01 20:30:00"),
name: 'task1'
}, {
start: Date.parse("2019-06-01 09:20:00"),
end: Date.parse("2019-06-03 02:00:00"),
name: 'task2'
}, {
start: Date.parse("2019-06-02 11:00:00"),
end: Date.parse("2019-06-03 21:10:00"),
name: 'task1'
}];
var gant_options = {
yAxis: { uniqueNames: true },
scrollbar: {enabled: true },
series: [{
name: 'Project 1',
data: tasks
}]
}
var mychart = Highcharts.ganttChart('container', gant_options);
</script>
</body>
</html>
Similar questions on stackoverflow
The following are similar questions on stack overflow, but which don't quite deal with my specific case.
Using highcharts & highstock together on same page
use highchart and highstock on the same page
These two deal with highcharts and highstock libraries on the same page.
Highstock library extends on the functionality of highcharts, so there is no need to also import highcharts.
This does not help my case because the functionality i need is not included in either highstock or highcharts-gantt on their own.
You can load highstock and highcharts-gantt separately like that:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
var Highstock = window.Highcharts;
window.Highcharts = null;
</script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
initialization:
Highstock.stockChart('container1', {
series: [{
data: []
}]
});
Highcharts.ganttChart('container2', {
series: [{
data: []
}]
});
Demo:
https://jsfiddle.net/BlackLabel/Lxnjwsb9/1/
I'm trying to dynamically add annotations to my high charts in React. I'm using the addAnnotation function to add a new annotation whenever a hover event is triggered on my app, but the annotation does not render. I dropped a debugger into my code, and when I call chart.annotations I can see there is currently an array of annotations, but they are not rendering. I even have make a call to the addPlotLine in this function and the plotline is rendered on the chart. My config file looks like this
chart: {
annotations: [{
labelOptions: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
verticalAlign: 'top',
align: 'right',
}
}],
annotationsOptions: {
},
.... some lots more config options
}
and my on hover function to add the annotation is as follows
if( isNumber(value) )
//this renders a plotline
chart.xAxis[0].addPlotLine(baseChartHandle.generateInteractivePlotLine(value));
// this doesn't render my annotation however
chart.addAnnotation({
linkedTo: value,
title: {
text: "It works!"
}
});
}
I found that when I added annotations using Highcharts that the "linkedTo" function never worked despite my trials.
Despite adding a guid to my point, it never was able to apply it. I would suggest in your case adding it by x and y value, then finding the point that way instead. Here is how I have added annotations in the past successfully:
series.data.forEach(function (point) {
var annotationObject =
{
id: point.id,
labelOptions: {
y: 15,
verticalAlign: 'bottom',
distance: 25
},
labels: []
};
}
var text = <get text you want to push>;
annotationObject.labels.push(
{
point: {
xAxis: 0,
yAxis: 0,
x: point.x,
y: point.y
},
text: text
}
);
_chart.addAnnotation(annotationObject);
});
I also found a bug in HighCharts when using remove annotations, as a heads up. Each point will need an id like above, but it should be called by this line:
_chart.removeAnnotation(id);
It will remove the annotation, however you will get lots of complaints from highcharts if you try to do anything after, and it will break. I found the answer here, in annotations.js :
The red box is code I added. If you do removeAnnotation(ann.id), and it rerenders, it will fail because the labels object is null. Adding this check lets you do that without the labelCollectors failing.
Happy charting.
update: It appears that everything has been solved by including the bootstrap.min.js in the html file itself (even though the bootstrap file is extended from layout, it must have been included after the other dependent scripts are, as its components weren't being accessed by them). I'll post as an answer when I can unless someone else can do so (I may not understand the problem as well as you).
I'm trying to use Web2py to test a simple MetricsGraphics example, but no graph loads in the browser.
Current error preventing graph from being displayed:
TypeError: $(args.target+' h2.chart_title').popover is not a function. (In '$(args.target+' h2.chart_title').popover', '$(args.target+' h2.chart_title').popover' is undefined)
The error occurs in metricsgraphics.min.js
HTML file:
{{extend 'layout.html'}}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="{{=URL('static','js/d3/d3.min.js')}}"></script>
<link href="{{=URL('static','js/metric-graphics/css/metricsgraphics.css')}}" rel='stylesheet' type="text/css">
<script src="{{=URL('static','js/metric-graphics/js/metricsgraphics.min.js')}}"></script>
<h3>Graph</h3>
<div class="result text-center col-xs-5">
<script>
data_graphic({
title: "UFO Sightings",
description: "Yearly UFO sightings from 1945 to 2010.",
data: [{'year':1964, 'sightings':6}] // JSON.parse({{=sample}}), // also tried as JSON.parse([{"year":1945, "sightings":"6"}])
markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}],
width: 600,
height: 250,
target: ".result",
x_accessor: "year",
y_accessor: "sightings",
});
</script>
{{#=BEAUTIFY(response._vars)}}
Python controller function:
def chart_view():
'''This will show the graph for a feed (axes)'''
# sample = [{"year": "1945", "count": 6}, {"year": "1950", "sightings": 35}, {"year": "1964", "sightings": 6}]
return dict()
To write a Python object into a view, it must be preceded by an equals sign:
{{=sample}}
There may be other errors, as it is not clear how you are getting sample to that view.
I'm a beginner with HIGHCHARTS.
I want to start from this example :
http://people.canonical.com/~bradf/media/highstock/examples/basic-line/index.htm
I downloaded the corresponding JSON file :
http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json
And I want to run it locally (and after test it with my own JSON files).
But it doesn't works!
I use the source code of the example, I've just modified the getJSON line.
I have this :
$.getJSON('./data/json/'+ name+'-c.json&callback=?', function(data) { ... }
I think that the issue comes from the callback.
Any ideas?
To make the example working on your local you will have to follow the below steps:
I assume that the json source code you have downloaded from the url http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json is stored in a file data.json
Now as you would have noticed, the json source in the file data.json would be like as below:
?(/* AAPL historical OHLC data from the Google Finance API */
[
/* May 2006 */
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
[1147910400000,63.18],
.......
....
So now as you would have noticed there are code lines ?(/* AAPL historical OHLC data from the Google Finance API */ and /* May 2006 */ in the json source which are causing the things to go wrong by generating a parse error because the data source with such code lines is not a valid json string.
So you will have to remove each and every such invalid code line from the whole json file to make the things working correctly.
After removing all the invalid line of code your json file should look like:
[
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
....
...
]
3. Now till this step you are ready with a valid json data source for the Highstock chart, so finally to display the chart you will have to use the code like:
$(function() {
$.getJSON('data.json', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
The whole page source code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
$(function() {
$.getJSON('data.json', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
&callback=? is normally appended for jsonp which is a technique used for cross domain calls (to other websites for example.)
From what I can see you should try removing it from the call.
In your case:
$.getJSON('./data/json/'+ name+'-c.json, function(data) { ... }
After having tried a couple of ways to solve the issue, I decided to ask for some help. The thing is, that I provide information on a website, which users in most cases don’t look too much. On the other hand this information needs to be a click away if needed. So I am using a Shield UI JavaScript chart, that binds to remote data. What I need is to initialize the chart, but not to show the data. This needs to be postponed until (and if) the user clicks on the chart.
Is there a way to bind the data later (asynchronously). How can this be achieved?
Below is some code I worked on, for testing purposes it is local data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../../../css/shieldchart.css" />
<script src="../../../../external/jquery-1.8.2.min.js" type="text/javascript">//</script>
<script src="../../../../external/jquery.mousewheel/jquery.mousewheel.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/rgbcolor.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/canvg.js" type="text/javascript">//</script>
<script src="../../../../external/globalize/globalize.js" type="text/javascript">//</script>
<script src="../../../../common/core.js" type="text/javascript">//</script>
<script src="../../../js/shieldchart.js" type="text/javascript">//</script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: auto;"></div>
<script type="text/javascript">
$(document).ready(function () {
var Information= [12,22,22,12,32,44,34 ];
$("#container").shieldChart({
events: {
seriesClick: function pointSelectHandler(args) {
var containterproducts = $("#container").swidget();
containterproducts.destroy();
$("#container").shieldChart({
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Electricity prices"
},
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "User Information",
data: Information
},
]
});
}
},
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Click to show data"
},
});
});
You are on a right way to solve the problem. You initially create a chart that contains no data and eventually bind it to the data source.
However you may not use the seriesClick event, since you don’t have any series that the user can click on.
If you want to use that event, than you need to add for instance a single value, let’s say 1, so that the user is able to click on the pie:
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "Logins",
data: [1]
},
]
or alternatively, you can have your code and only change the event used:
click: function pointSelectHandler(args) {}
In this case you will show the data when the user clicks on the chart and won’t be in need of any series.
This is the more comfortable strategy, because with the pie chart type it is easy to visualize a sample data series. But if you are using line type chart it will be more complicated for the user to get to know that he needs to click on a data series to get the actual data.