How to draw a chart with Chart.JS?
Question
I'm trying to create a chart using the the Chart.JS library, but I get the following error:
Uncaught ReferenceError: options is not defined
I've followed the documentation , but perhaps I'm missing something.
See here for my codepen example .
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
// Get the context of the canvas element we want to select
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
new Chart(ctx).PolarArea(data, options);
new Chart(ctx).PolarArea(data);
</script>
</body>
</html>
2 answers
solution1
2 ACCPTED 2015-09-21 13:09:55
I changed your data structure. With this new "data", the code works. I think that you used a specific data structure for line chart.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
// Get the context of the canvas element we want to select
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
</script>
</body>
</html>
solution2
0 2016-04-29 06:58:40
Retrieving Data from the database using Chat.js Here is the code it worked for me.
<link href="JSfiles/ui.jqgrid.css" rel="stylesheet" />
<link href="JSfiles/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script src="JSfiles/jquery-1.7.1.min.js"></script>
<script src="JSfiles/grid.locale-en.js"></script>
<script src="JSfiles/jquery.jqGrid.min.js"></script>
<script src="JSfiles/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(function () {
var lastsel2;
debugger;
$("#dataGrid").jqGrid({
url: 'offers.aspx/LoadGrid',
datatype: 'json',
mtype: 'POST',
height: 200,
width: 500,
//localReader: { CampaignID: 'CampaignID' },
editurl: 'clientArray',
onSelectRow: function (date) {
if (txAmount && txAmount !== lastsel2) {
jQuery('#dataGrid').restoreRow(lastsel2);
jQuery('#dataGrid').editRow(date, true);
lastsel2 = date;
}
},
serializeGridData: function (postData) {
//alert(postData);
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: ['China', 'Indonesia', 'Cambodia', 'Malayasia', 'Thailand', 'Vietnam', 'Date', ],
colModel: [
{ name: 'CN', index: 'CN', width: 10, height: 30, editable: false, sortable: true },
{ name: 'ID', index: 'ID', width: 10, height: 30, editable: false, sortable: true },
{ name: 'KH', index: 'KH', width: 10, height: 30, editable: false, sortable: true },
{ name: 'MY', index: 'MY', width: 10, height: 30, editable: false, sortable: true },
{ name: 'TH', index: 'TH', width: 10, height: 30, editable: false, sortable: true },
{ name: 'VN', index: 'VN', width: 10, height: 30, editable: false, sortable: true },
{ name: 'date', index: 'date', width: 10, sortable: true, sorttype: "number", formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: 'd/m/y', datefmt: 'd/m/y' } }
],
pager: '#pagingGrid',
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "date"
},
sortname: 'date',
sortorder: "desc",
sortable: true,
loadComplete: function () {
var $self = $(this);
if ($self.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$self.trigger("reloadGrid"); // Call to fix client-side sorting
}, 50);
}
},
caption: 'Incomming Offers Report '
});
jQuery("#dataGrid").jqGrid('navGrid', '#pagingGrid',
{ search: true, edit: false, add: false, del: false, refresh: true }, {}, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true });
});
</script>
C# file
--------
[WebMethod]
public static List<object> Chartload()
{
DataTable dt = new DataTable();
string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
string EndDate = DateTime.Now.ToString("yyyy-MM-dd");
List<ChartDetails> dataList = new List<ChartDetails>();
string country = string.Empty;
List<object> iData = new List<object>();
Dataclass objoffers = new Dataclass();
dt = objoffers.Getoffers("", StartDate, EndDate, "");
string[] columnNames = dt.Columns.Cast<DataColumn>().Select(x => x.ColumnName).ToArray();
foreach (string dc in columnNames)
{
List<string> labels = new List<string>();
List<double> lst_dataItem_1 = new List<double>();
for (int j = 0; j < dt.Rows.Count; j++)
{
if (dc == "date")
{
labels.Add(dt.Rows[j]["date"].ToString());
//iData.Add(labels);
}
else
{
lst_dataItem_1.Add(Convert.ToDouble(dt.Rows[j][dc].ToString()));
}
}
if (dc == "date")
iData.Add(labels);
else
iData.Add(lst_dataItem_1);
//}
}
return iData;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to draw baseline for bar chart in chart.js
how to draw pie chart in php using chart.js?
How to only draw the graph and the Xaxis gridlines using chart.js
How to draw round edges with chart.js for line diagrams
How to draw the stroke behind bars in Chart.js?
How to use chart.js script to draw multiple pie Charts
How to draw 2d line time plot with chart.js
How to draw a linear regression line in Chart.js
How to draw the X-axis (line at Y = 0) in Chart.js?
Chart.JS plugin, draw after animation
Related Tags