I'm developing application based on REST architecture and CRUD assumptions using Java, Spring, Hibernate, and AmCharts Library.
But in my project I have a problem with reloading data in a candle chart (stock chart) from AmCharts.
My JavaScript code:
var request;
firstDeploy();
function firstDeploy() {
request = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=tBTCUSD&timeFrame=1D';
}
var candleChart = AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "value"
}],
color: "#7f8da9",
dataLoader: {
url: request,
format: 'json'
},
title: "tBTCUSD",
categoryField: "date"
}],
panels: [{
title: "Value",
showCategoryAxis: false,
percentHeight: 70,
valueAxes: [{
id:"v1",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
type: "candlestick",
id: "g1",
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#7f8da9",
fillColors: "#7f8da9",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
useDataSetColors: false,
comparable: true,
compareField: "value",
showBalloon: false
}],
stockLegend: {
valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%"
}
},
{
title: "Volume",
percentHeight: 30,
marginTop: 1,
showCategoryAxis: true,
valueAxes: [{
id:"v2",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
markerType: "none",
markerSize: 0,
labelText: "",
periodValueTextRegular: "[[value.close]]"
}
}
],
chartCursorSettings: {
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW",
updateOnReleaseOnly:false
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
$(options)
function options() {
var handler = handleDropdown(handleResults)
handler('#time-frame-list', 'time')
handler('#currency-pair-list', 'currency')
}
function handleResults(results) {
var mainRequest = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=t';
var resultsArray = JSON.stringify(results);
var currencyPair = resultsArray.substr(25,6);
var timeFrame = resultsArray.substr(9,2);
request = mainRequest + currencyPair + '&timeFrame=' + timeFrame;
candleChart.dataLoader.url = request;
candleChart.dataLoader.loadData();
console.log(request);
}
function handleDropdown(handler) {
var options = {}
return function(selector, key) {
options[key] = $(selector).val()
$(selector).change(function(event) {
options[key] = this.options[event.target.selectedIndex].value
handler(options)
})
}
}
My HTML code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>amStock Example</title>
<link rel="stylesheet" href="style.css">
<script src="amcharts.js" type="text/javascript"></script>
<script src="serial.js" type="text/javascript"></script>
<script src="amstock.js" type="text/javascript"></script>
<script src="dataloader.min.js" type="text/javascript"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="cryptoscript.js" type="text/javascript"></script>
</head>
<body style="background-color:#FFFFFF">
<center>
<div class="chart-background">
<div class="drop-down-menus">
<div class="time-frame-dropdown">
<select id="time-frame-list">
<option value="1D" selected>1D</option>
<option value="1h">1H</option>
</select>
</div>
<div class="currency-pair-dropdown">
<select id="currency-pair-list">
<option value="BTCUSD" selected>BTCUSD</option>
<option value="ETHUSD">ETHUSD</option>
</select>
</div>
</div>
</div>
<div id="chartdiv" class="chart-candle" style="width:50%; height:600px;"></div>
</div>
</center>
</body>
</html>
My RestController:
#RestController
#RequestMapping("v1/crypto")
public class CandleRestController {
#Autowired
private DbService service;
#Autowired
private CandleMapper candleMapper;
#RequestMapping(method = RequestMethod.GET, value = "getCandles")
public CandleDtoCharts[] getCandleList(#RequestParam String currencyPair, #RequestParam String timeFrame) {
System.out.println(currencyPair + " " + timeFrame);
return candleMapper.mapToCandleDtoChartsList(service.getCandlesByCurrencyPairAndTimeFrame(currencyPair, timeFrame));
}
}
I know that my RestController is receiving all the time the same "request" (url) after choosing other currency pair/or time frame and I don't know why?
You have to update the dataLoader url inside the dataSet. You're updating it at the chart level, which doesn't work in the stock chart.
candleChart.dataLoader.url = request; //this doesn't work in a stock chart
candleChart.dataSets[0].dataLoader.url = request; //this does.
Related
Data from chart don't showed. Labels - ok, data - nothing)
There is only links for chart.js and canvas initialization in HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> -->
<title>Title</title>
</head>
<body>
<h2>text</h2>
<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</body>
<script src="/Users/***/Documents/django_website/js.js"></script>
</html>
JS code divided bay two parts: the first -creation data for future use in chart, the second - chart creation.
JS
var lineChartData = { labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"], datasets: [] },
array = ["[0,0,36,0,0,0,0,0]", "[20,60,15,9,2,3,39,364]"];
function getDataset(index, data) {
return {
datasets: [{
backgroundColor: ["#c45850", "#3cba9f","#8e5ea2","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9","#e8c3b9"],
data: data
}]
};
}
array.forEach(function (a, i) {
lineChartData.datasets.push(getDataset(i, JSON.parse(a)));
});
// -----------------------------------------------------------------------------
new Chart(document.getElementById("bar-chart-horizontal"), {
type: 'horizontalBar',
data: {
labels: ["Australia", "China", "USA", "New Zeland", "Sweden", "Norway", "Finland", "Netherlands"],
lineChartData
},
options: {
legend: { display: false },
title: {
display: true,
text: ''
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
It looks like there is a small mistake, but I can't find it.
Give this a shot:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<title>Title</title>
</head>
<body>
<h2>text</h2>
<canvas id="bar-chart-horizontal" width="1100" height="400"></canvas>
</body>
<script>
const labels = [
"Australia",
"China",
"USA",
"New Zealand",
"Sweden",
"Norway",
"Finland",
"Netherlands",
];
const backgroundColor = [
"#c45850",
"#3cba9f",
"#8e5ea2",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
"#e8c3b9",
];
const chartPlots = [
[0, 0, 36, 0, 0, 0, 0, 0],
[20, 60, 15, 9, 2, 3, 39, 364],
];
const datasets = chartPlots.map((data, index) => ({
data,
backgroundColor,
}));
const data = {
labels,
datasets,
};
const options = {
legend: { display: false },
title: {
display: true,
text: "Chart Title",
},
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
},
],
},
};
const chartConfig = {
type: "horizontalBar",
data: data,
options,
};
new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
</script>
</html>
I am using Kendo UI, specifically the kendo grid and the kendo dataSource.
I'm getting data from a local API. The data is retrieving correctly (checked in postman). I save (or tried to save) the result of this get result in a kendo dataSource.
Then I pass this dataSource as a parameter when creating the grid. Unfortunately, the grid doesn't show any result...
Here is the code:
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost:3000/api/reg",
dataType: "jsonp",
type: "GET",
}
},
schema:{
//data: "data",
model:{
// id: "id",
fields:{
id: { type: "number" },
Number: { type: "string" },
Date: { type: "date" },
Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
Entity: { type: "string" },
Quart: { type: "string" },
Confirmed: { type: "boolean" },
Stat: { type: "boolean" }
}
}
},
//serverFiltering : true,
//filter : [
// {field: "Legal_Entity", operator: "eq", value: "3800" },
//]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}
]
});
});
window.localStorage.removeItem("storageLe");
//edit to fetch in the comment drodown the categories
function clinetCategoryEditor(container, options) {
$('<input required name="Commen">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
//function that set the boolean status of Stat and show matched or unmatched with colors
function onDataBound(e){
var grid = this;
grid.table.find("tr").each(function(){
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Stat ? 'success' : 'error';
var text = dataItem.Stat ? 'Matched' : 'Unmatched';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/jszip.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
</head>
<body>
<div>
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
</div>
here is a sample json return from the API:
{
"id": 512,
"Number": "00000",
"Date": "2000-05-01T03:00:00.000Z",
"Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}
Thanks in advance.
Edit1: Put all the functions on the code snippet.
Edit2: print screen of the console and network tabs.
Edit3: new print screen usins json instead of jsonp (CORS error)
Here's an example of a grid populated with data based on your example. As per my comment "did you try data:[...]", you replied there is no data. In this example, the grid shows the data. This means the problem isn't it your grid. It must be in transport. Is your localhost api returning an array? As your example code is unclear and not a minimum reproducible working example I hope the example below will help you pinpoint your problem. Try it in the Telerik DOJO or anywhere you like.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
//dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}]
});
});
</script>
<style>
</style>
</div>
</body>
</html>
The #jpllosa answer help me to find where the issue is. Just adding this answer to explain better how I fix this.
I'm using a node express backend to communicate with my MySQL database, and here I have to allow cors use (if you not familiar with cors, I recommend this link: https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/)
So my main problem is I'm waiting for a "JSONP" when my data is a "JSON". With the "JSON" type i was receiving the CORS error message as you can see in my last image from the original post.
To allow cors I used the following code in my server.js file:
const cors = require('cors');
app.use(cors({
origin: '*'
}));
In the mentioned link you can see how to add specific domain to your API or use all domains with the "*" character.
Again, thanks to #jpllosa for his answer and time helping me here.
I have dropdown list from sorting grid. I want to manage same grid with pie chart, but I can't bound remote data to the piechart. The piechart must to show categories (the same role, like a dropdown list), but I can't bound to hierarchical remote data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="project">
<div id="grid"></div>
<div id="chart"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
<script>
$(document).ready(function() {
//Grid displays all products or products from one category, which set from dropdown list
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#template").html()),
height: 550,
sortable: true,
pageable: true,
dataBound:function(){
var grid = this;
$.each(grid.tbody.find('tr'),function(){
var model = grid.dataItem(this);
if(model.Discontinued==true){
$('[data-uid='+model.uid+']').addClass('k-state-selected');
}
});
},
columns: [
// { field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
{ field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
{ field: "UnitsInStock", title: "In Stock", width: 150 },
{ field: "Discontinued", title: "Discontinued", width:50 },
{ field: "QuantityPerUnit", title: "Quantity" }
]
});
//DropDown list for sorting by the category
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "odata",
severFiltering: true,
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
var data = [
{
"source": "Hydro",
"percentage": 20,
},
{
"source": "Hydro",
"percentage": 20
},
{
"source": "Solar",
"percentage": 10
},
{
"source": "Nuclear",
"percentage": 30
}
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {field: "source", aggregates: [{
field: "percentage", aggregate: "sum"
}]}
});
dataSource.read();
function getChartData() {
var chartData = [];
var view = dataSource.view();
for(var idx = 0; idx < view.length; idx++) {
chartData.push({
source: view[idx].value,
percentage: view[idx].aggregates.percentage.sum
});
}
return chartData;
}
//From This piechart I want to sorting grid
var chart = $("#chart").kendoChart({
title: {
text: "Categories and Products"
},
legend: {
position: "bottom"
},
dataSource: {
transport: {
read: function(e) {
e.success(getChartData());
}
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
aggregate: "count",
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
}],
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
});
});
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: center;
}
</style>
</div>
You can bind a kendo pie chart with remote data, I have done this many times in the past. Take a look at the following link for an example on how to achieve this.
Kendo pie chart - remote binding
I want to use amcharts in my meteor project, how can I integrate amcharts in meteor project?
I added mrt:amcharts package to my project.
Copied amcharts free version folder to my public folder. But it is not appearing.
My code is following.
chart.html
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="/amcharts/amcharts.js" type="text/javascript"></script>
<script src="/amcharts/serial.js" type="text/javascript"></script>
<script src="/amcharts/amstock.js" type="text/javascript"></script>
<link rel="stylesheet" href="/amcharts/style.css" type="text/css">
</head>
<template name="chart">
<p>chart is here</p>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</template>
chart.js
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a3 = Math.round(Math.random() * (100 + i)) + 200;
var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
chartData1.push({
date: newDate,
value: a1,
volume: b1
});
chartData2.push({
date: newDate,
value: a2,
volume: b2
});
chartData3.push({
date: newDate,
value: a3,
volume: b3
});
chartData4.push({
date: newDate,
value: a4,
volume: b4
});
}
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData2,
categoryField: "date"
},
{
title: "third data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData3,
categoryField: "date"
},
{
title: "fourth data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData4,
categoryField: "date"
}
],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
compareField: "value",
balloonText: "[[title]]:<b>[[value]]</b>",
compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
}],
stockLegend: {
periodValueTextComparing: "[[percents.value.close]]%",
periodValueTextRegular: "[[value.close]]"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
periodValueTextRegular: "[[value.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1,
valueLineBalloonEnabled:true,
valueLineEnabled:true,
valueLineAlpha:0.5
},
periodSelector: {
position: "left",
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
}
});
try this: mrt add amcharts
Also, within your chart initialization, if referencing any images (e.g. 'export.png'), please prepend the path with the package path. E.g.
"exportConfig":{
"menuTop":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": '/packages/amcharts/lib/images/export.png',
"format": 'png'
}]
}
I'm trying to bind a DataViz pie chart locally using the Kendo UI Angular directives but keep getting this error:
TypeError: Cannot call method 'toLowerCase' of undefined
at h (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:5351)
at Object.o.aggregate (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:20999)
at g (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:5624)
at ct.extend._process (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:31624)
at ct.extend.success (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:28852)
at Object.proxy [as success] (http://localhost:51717/Scripts/jquery-1.10.2.js:841:14)
at ct.extend.read (http://localhost:51717/Scripts/kendo/kendo.web.min.js:11:21673)
at http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:28381
at ct.extend._queueRequest (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:30001)
at ct.extend.read (http://localhost:51717/Scripts/kendo/kendo.dataviz.min.js:11:28266)
HTML
<div kendo-chart k-options="pie" k-data-source="countries" />
Angular
$scope.countries = {
data: [
{
category: "Asia",
value: 53.8,
color: "#9de219"
}, {
category: "Europe",
value: 16.1,
color: "#90cc38"
}, {
category: "Latin America",
value: 11.3,
color: "#068c35"
}, {
category: "Africa",
value: 9.6,
color: "#006634"
}, {
category: "Middle East",
value: 5.2,
color: "#004d38"
}, {
category: "North America",
value: 3.6,
color: "#033939"
}
]
};
$scope.pie = {
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
format: "{0}%"
}
};
Check your libraries to ensure you are using supported versions. Are you using the latest version of KendoUI? According to the KendoUI->Angular repo on GitHub you need:
jQuery v1.9.1 (not sure if later versions are supported)
Angular v1.0.5
KendoUI vCurrent
I created a working example on JSBin for you to check out. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular + KendoUI DataViz" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script src="http://rawgithub.com/kendo-labs/angular-kendo/master/build/angular-kendo.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="chart-example">
<div ng-controller="ChartController">
<div kendo-chart k-options="pie" k-data-source="countries" />
</div>
</body>
</html>
...
var app = angular.module('chart-example', ['kendo.directives']);
function ChartController($scope) {
$scope.pie = {
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
format: "{0}%"
}
};
$scope.countries = {
data: [
{
category: "Asia",
value: 53.8,
color: "#9de219"
}, {
category: "Europe",
value: 16.1,
color: "#90cc38"
}, {
category: "Latin America",
value: 11.3,
color: "#068c35"
}, {
category: "Africa",
value: 9.6,
color: "#006634"
}, {
category: "Middle East",
value: 5.2,
color: "#004d38"
}, {
category: "North America",
value: 3.6,
color: "#033939"
}
]
};
}