Problem with Chart.js version > 4
With the following scriptversion radar charts are working https://cdn.jsdelivr.net/npm/chart.js
the version 4.2.1 gives an error with radar charts.
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js"> error in chart.js line 7 (unexpected token "{". ... -->
I don't find a working example for Chartjs > 4.0
``
`<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Radar Chart</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> --> <!-- works -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js"></script> <!-- doesn't work -->
<!-- error in chart.js line 7 (unespected token "{". ... -->
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'radar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Whatever 1',
data: [12, 19, 23, 5, 32, 3],
borderWidth: 1
}, {
label: 'Whatever 2',
data: [12, 1, 22, 15, 2, 23],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>``
You are using the esm version, you need to use the footing link: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js
Related
The google chart images were perfectly coming in PDF till few months back.
But now images are not coming.
If I try the html, google chart is coming correctly.
If I try to convert that HTML into PDF using wkhtmltopdf, chart not showing.
I am using wkhtmltopdf from command line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GRAPH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<b>GRAPH</b>
</td>
</tr>
<tr>
<td align="center">
<div class="text-center" id="chart_div70918" style="display: block; margin: 0 auto; width: 400px;height: 160px; "></div>
</td>
</tr>
</table>
<script type="text/javascript">
var scr = document.createElement("script");
scr.setAttribute("src",'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart", "bar"],"callback":"drawChart70918"}]}');
document.head.appendChild(scr);
function drawChart70918() {
var data = google.visualization.arrayToDataTable([
["Subject", "Class Highest", "Marks Obtained", { role: "style" } ]
,["English", 13, 43, "#1909a0"],["Hindi -Oral", 48, 40, "#1909a0"],["Maths", 13, 38, "#1909a0"],["G.k.", 12, 39, "#1909a0"],["Drawing", 48, 44, "#1909a0"] ]);
var view = new google.visualization.DataView(data);
var options = {
fontSize : 6,
fontName: 'Times New Roman',
hAxis :{showTextEvery:1,"slantedText":true, "slantedTextAngle": 45 },
vAxis: {minValue: 0},
legend: { position: "right" },
colors: ['#a5e893', '#1909a0'],
bar: {groupWidth: "40%"},
chartArea:{left:10,top:20,width:'75%',height:'60%'}
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div70918"));
chart.draw(view, options);
}
</script>
</body>
</html>
I am trying to setup Chart.js to use in my project.
This is example with i am trying to reproduce and i get this
I am using PyCharm, so it was easy to download all libraries and i added chart.js in Installed aps
My test.html:
{% load staticfiles %}
<html>
<head>
<title>django-chartjs line chart demo</title>
<!--[if lte IE 8]>
<script src="{% static 'js/excanvas.js' %}"></script>
<![endif]-->
</head>
<body>
<h1>Some Line Charts loaded in Ajax!</h1>
<canvas id="myChart" width="500" height="400"></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
<script type="text/javascript">
$.get('{% url "line_chart_json" %}', function(data) {
var ctx = $("#myChart").get(0).getContext("2d");
new Chart(ctx, {
type: 'line', data: data
});
});
</script>
</body>
</html>
My view:
class LineChartJSONView(BaseLineChartView):
def get_labels(self):
"""Return 7 labels for the x-axis."""
return ["January", "February", "March", "April", "May", "June", "July"]
def get_providers(self):
"""Return names of datasets."""
return ["Central", "Eastside", "Westside"]
def get_data(self):
"""Return 3 datasets to plot."""
return [[75, 44, 92, 11, 44, 95, 35],
[41, 92, 18, 3, 73, 87, 92],
[87, 21, 94, 3, 90, 13, 65]]
line_chart = TemplateView.as_view(template_name='main/mark/test.html')
line_chart_json = LineChartJSONView.as_view()
Because you're looking at the json result; you're doing something like this:
http://localhost:8000/yourapp/line_chart/json
where you should do:
http://localhost:8000/yourapp/line_chart
Good Morning,
I am trying to handle two events on a single GeoChart,but i am not getting result ,
Only One Event was handling at a time .
The following code is.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
google.visualization.events.addListener(geomap, 'select', sampleselectevent);
function sampleselectevent() {alert('I am an sampel event'); }
geomap.draw(data, options);
google.visualization.events.addListener(geomap, 'drawingDone', showcmpltd);
function showcmpltd() {alert('Data collection is completed to dispaly chart'); }
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Please Help me
Thanks in advance.
The pie chart works perfectly on all browsers except for IE 7 and 8, where all I see is a blank screen. I've looked around but I could not seem to find a solution that works.
Any help is appreciated
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28],
]);
var options = {
title: 'Pie Chart',
legend: {postion:'right', alignment: 'center'},
pieSliceText: 'value',
chartArea: {left: 10, width:"30%", height:"50%"},
height: 300
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
You have an errant comma at the end of your data array:
var data = google.visualization.arrayToDataTable([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28], <-- this comma is the problem
]);
IE does not like commas after the last element in an array, and will kick and scream and throw a tantrum to rival a petulant two-year-old child when it sees one.
I have a chart I've created using GViz like so:
It's a combo chart, with one series displayed as columns and the other displayed as a stepped area (0% opacity, connectSteps : false). I don't want to use line because that only does a dot in the middle of each column.
I'm trying to have the lines show above the columns because they represent a target amount. I've tried switching the order of the data columns, but it displayed the same way. Is there a way to specify z-index on series?
Side note: This is a chart on a Google Site, but by editing the HTML, I can specify most options available through GViz. I've already looked through the documentation but have not seen something to do this.
There is currently no way to adjust the Z-axis on combo charts (so you can't do what you're trying to do in the way you're doing it).
However, if you want to be tricky, you can recreate the same sort of chart using XY scatter charts.
Example (copy-paste in to Google Playground):
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Targets');
data.addRows([
[1, 0, null],
[1, 1, null],
[1, null, null],
[2, 0, null],
[2, 3, null],
[2, null, null],
[3, 0, null],
[3, 3, null],
[3, null, null],
[0.5,null,1.5],
[1.5,null,1.5],
[1.5,null,null],
[1.5,null,2.5],
[2.5,null,2.5],
[2.5,null,null],
[2.5,null,3],
[3.5,null,3],
]);
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(
document.getElementById('visualization'));
chart.draw(data, {
width: 600,
height: 400,
series: {0:{color: 'black', lineWidth: 40, pointSize: 0}, 1:{color: 'red', lineWidth: 10, pointSize: 0}} });
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>