It is very strange that last time I run the program everything is ok, but this time it does not work, the result web page a empty and I really don't know where make the error.(Sorry only add some words to Thank you Thank you Thank you)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<style>
#chartdiv
{
width : 100%;
height : 500px;
font-size : 11px;
}
</style>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script type="text/javascript">
AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {
/**
* Parse CSV
*/
var data = AmCharts.parseCSV(response, {
"useColumnNames": true
});
/**
* Create the chart
*/
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": data,
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
}
});
});
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
The CSV file is probably cached now in your browser, this causes Amcharts to immediately create the Chart. Unfortunately the div container doesn't exist yet. Either move your chart initialisation script tag below the chart div or wrap it in a DOMContentLoaded eventlistener or move the script to a separate file.
Option 1 move the script tag below the target div
<body>
<div id="chartdiv"></div>
<script type="text/javascript">
AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {
/**
* Parse CSV ....
*/
});
</script>
</body>
Option 2 wrap initialisation around DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event) {
AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {
/**
* Parse CSV ....
*/
});
});
Related
I want to use the chart component in kendoui, but I encountered the following problem in the process of using it, the problem prompted me $(...).kendoChart is not a function. I have introduced the required js, I want to know what I should do, here is my code
<head>
<meta charset="utf-8" />
<title></title>
<script src="${base.contextPath}/lib/kendoui/js/jquery.min.js"></script>
<script src="${base.contextPath}/lib/kendoui/js/kendo.all.min.js"></script>
</head>
<body>
<style>
</style>
<div class="row" id="exmple">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
</div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"]
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</body>
Uncaught TypeError: $(...).kendoChart is not a function
The problem is caused by a missing kendo library (kendo.dataviz.min.js) essential for the chart. This file doesn't seem to be available unless the product is bought as described in this forum post:
I have a grid that has a grid in the detailInit and when I add a new row to the grid in the detailInit the detailInit collapses.
How can I stop it from collapsing when a new record is added? I have tried using e.preventDefault() on the button click event of adding a new row but that didn't work out.
You cannot prevent it from collapsing because every time you change something to the data it automatically rebinds and redraw the table.
What you can do however is to capture the rebinding, find the opened details and after the binding finish reopen them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];
$(document).ready(function () {
let expanded = [];
var element = $("#grid").kendoGrid({
dataSource: data,
toolbar: [{name: "create"}],
height: 600,
detailInit: detailInit,
editable: true,
columns: [
{
field: "id",
title: "id",
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{command: ["destroy"]},
],
dataBinding: function (e) {
expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
return $(row).data("uid");
});
},
dataBound: function (e) {
this.expandRow(this.tbody.children().filter(function (idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
},
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(e.data.orders);
},
}
},
});
}
</script>
</div>
</body>
</html>
I have an example kendo treeList created: http://dojo.telerik.com/akAwe/4
In the example, how do i make child cells of "Protocol names" column clickable?
Thanks.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script type="text/x-kendo-template" id="template">
<a href='https://www.google.com/?test=#: ProtocolName #'>#: ProtocolName #</a>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ "id": 61, "parentId": 1, "ProtocolName": "P2", "SeriesDescription": "P2 " },
{ "ExamStart": "9/19/2015 8:00 AM", "id": 1, "ProtocolName": "P2", "SeriesDescription": "P2 ", "parentId": null },
{ "id": 62, "parentId": 2, "ProtocolName": "P1", "SeriesDescription": "P1 " },
{ "id": 63, "parentId": 2, "ProtocolName": "P2", "SeriesDescription": "P2 ", },
{ "ExamStart": "9/19/2015 8:13 AM", "id": 2, "ProtocolName": "P1, P2", "SeriesDescription": "P1 , P2 ", "parentId": null }
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
columnMenu: true,
dataBound: onDataBound,
columns: [{
field: 'ExamStart',
title: 'Date/Time'
}, {
field: 'ProtocolName',
title: 'Protocol names',
sortable: false,
template: $("#template").html()
}, {
field: 'SeriesDescription',
title: 'Series descriptions',
sortable: false
}]
});
});
function onDataBound(arg) {
$(".k-treelist-group").each(function (index) {
$(this).find('a').replaceWith($(this).find('a').text());
});
}
</script>
</div>
</body>
</html>
Update 1:
<script type="text/x-kendo-template" id="template">
<a href='localhost:20327/\\#/dose/test'>#: ProtocolName #</a>
</script>
Let me know if any concern.
I have a Kendo UI Grid, which contains four columns:
Highlight MAC Time Message
The Highlight column can contain the values "yes" or "no", and this column is hidden.
I need to create a row template that will highlight (change the color or something) the row if the value is yes.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<style>
.change-background {
background-color: red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
var ds = new kendo.data.DataSource({
data: [{
Highlight: "Yes",
MAC: "111",
Time: "aaa",
Message: "a1"
}, {
Highlight: "No",
MAC: "222",
Time: "bbb",
Message: "b2"
}]
});
$("#grid").kendoGrid({
dataSource: ds,
dataBound: onDataBound,
columns: [
{ hidden: true, field: "Highlight" },
{ field: "MAC" },
{ field: "Time" },
{ field: "Message" }
],
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.Highlight == "Yes") {
var element = $('tr[data-uid="' + row.uid + '"] ');
$(element).addClass("change-background");
}
});
}
</script>
</body>
</html>
Let me know if any concern.
You can apply condition in Row Template, Try Something like below
$("#grid").kendoGrid({
dataSource: ds,
rowTemplate: '<tr class="#:Highlight ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC #</td><td>#:Time #</td><td>#:Message#</td></tr>'
});
DataSource
var ds = new kendo.data.DataSource({
data: [{
Highlight : "Yes",
MAC :"...",
Time :"...",
Message:"...."
}, {
Highlight : "No",
MAC :"...",
Time :"...",
Message:"...."
}]
});
I am using kendo line chart in my application, the x axis values/labels are overlapping. The xAxis.labels.step property doesn't work in my case as the categoryaxis is bind to an datasource that can contain a date difference in days/moths/years. How can i avoid ovelapping?
I have used rotation to fix this issue, but is there any other approach?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var seriesData = [
{
year: new Date(Date.parse("12/12/2011")),
value: 1
},
{
year: new Date(Date.parse("13/12/2012")),
value: 3
},
{
year: new Date(Date.parse("23/12/2012")),
value: 4
}
];
$("#chart").kendoChart({
categoryAxis: {
min: new Date("12/1/2011"),
max: new Date("23/12/2012"),
baseUnit: "days",
type: "date",
field: "year",
labels: {
dateFormats: {
days: "MM/dd/yy"
},
}
},
chartArea: {
width: 300,
height: 200
},
series: [
{
field: "value",
type: "line"
}
],
dataSource: {
data: seriesData
}
});
</script>
</body>
</html>
Kendo chart's x-axis labels can be adjusted dynamically using dataBound-event with the following dataBound function.
function dataBound(e) {
var chart = $("#chart").data("kendoChart");
if (seriesData.view().length > 2) {
chart.options.categoryAxis.labels.step = 5;
}
else {
chart.options.categoryAxis.labels.step = 1;
}
}
See full demo -> JSFIDDLE