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"
}
]
};
}
Related
I got this table I want to color each row in a color depending on my data.
This works but seems to disable my onclick event in q-table for some reason.
#row-click="onRowClick"
I cannot figure out why this is happening. Im new to quasar and to be honest Im not 100% sure how this referens works
v-slot:body="props"
Eventually I want this to be a router event taking me to a different page on click.
<div id="q-app">
<div class="q-pa-md">
<q-table
:data="data"
:columns="columns"
row-key="id"
:filter="filter"
:loading="loading"
:rows-per-page-options="[5]"
#row-click="onRowClick"
>
<!-- If I remove the template here the onRowClick works -->
<template v-slot:body="props">
<q-tr :props="props" :class="tableFormat(props.row)">
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{
col.value
}}</q-td>
</q-tr>
</template>
</q-table>
</div>
</div>
CSS:
.marked-row {
background-color: green;
}
.unmarked-row {
background-color: blue;
}
new Vue({
el: '#q-app',
data () {
return {
loading: false,
filter: "",
rowCount: 10,
columns: [
{
name: "name",
required: true,
label: "Name",
align: "left",
field: "name",
// format: val => `${val}`,
sortable: true
// style: 'width: 500px'
},
{
name: "age",
required: true,
label: "Age",
align: "left",
field: "age",
format: val => `${val}`,
sortable: true
},
{
name: "location",
required: true,
label: "Location",
align: "left",
field: "location",
format: val => `${val}`,
sortable: true
}
],
data: [
{
id: 1,
name: "Diana",
age: 5,
location: "Mumbai",
color: "blue"
},
{
id: 2,
name: "Billy",
age: 4,
location: "Detroit",
color: "green"
},
{
id: 3,
name: "Mimmi",
age: 3,
location: "New York",
color: "green"
},
{
id: 4,
name: "Bengan",
age: 4,
location: "Dubai",
color: "blue"
},
{
id: 5,
name: "Chloe",
age: 7,
location: "Paris",
color: "green"
},
{
id: 6,
name: "Ben",
age: 6,
location: "Los Angeles",
color: "blue"
}
]
}
},
methods: {
tableFormat(val) {
console.log(val)
if (val.color === "blue") {
return "marked-row";
} else {
return "unmarked-row";
}
},
onRowClick(evt, row) {
console.log("clicked on ", row );
}
}
})
Here is my pen:
https://codepen.io/haangglide/pen/MWeRaJW
Doc says
Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots
So you can use #click event on q-tr
codepen - https://codepen.io/Pratik__007/pen/oNLOogY
option = {
tooltip: {},
series: {
label: { rotate: 'tangential', },
nodeClick: false,
radius: ['15%', '80%'],
type: 'sunburst',
sort: null,
data: [
{
name: "sun",
value: 3456,
itemStyle: { color: '#814175' },
label: { formatter: '{b}\n\n{c}' },
children: [{ name: '', value: 2221, itemStyle: { color: '#a4829d' }, }]
},
{
name: "mon",
value: 6555,
itemStyle: { color: '#498ce7' },
label: { formatter: '{b}\n\n{c}' },
children: [{ name: '', value: 5001, itemStyle: { color: '#79aefa' }, }]
},],
}
};
https://i.stack.imgur.com/lcA0o.jpg
This is my chart in the first picture.When i hover the chart the label was hide(second picture).
i need to show all label on hover.
The way to do this would be to assign the formatter for emphasis and downplay. You can have different formats for the default label, the label that is hovered and the non-hovered labels
series: [
{
type: 'sunburst',
data: [],
label: {
formatter: 'E.g. A \n{b}\n\n{c}'
},
emphasis: {
label: {
formatter: 'E.g. B \n{b}\n\n{c}'
}
},
downplay: {
label: {
formatter: 'E.g. C \n{b}\n\n{c}'
}
}
}
]
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.
I'm doing my first steps with dxchart of DevExtreme. At the moment I've got follow code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DevExtreme Chart</title>
<!--FRAMEWOKR-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="./lib/globalize.min.js"></script>
<script src="./lib/dx.charts.js"></script>
<!--JS-->
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="chartContainer" style="width:100%; height: 440px"></div>
</body>
</html>
JS:
$(document).ready(function(){
var dataSource = [
{
argument: '15.06.2016',
puls: 102,
temperatur: 37.6,
weight: 91
},
{
argument: '16.06.2016',
puls: 99,
temperatur: 35.1,
weight: 88
},
{
argument: '17.06.2016',
puls: 87,
temperatur: 38.0,
weight: 87
},
{
argument: '18.06.2016',
puls: 91,
temperatur: 36.3,
weight: 87
},
{
argument: '19.06.2016',
puls: 112,
temperatur: 37.1,
weight: 90
}
];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: "spline",
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
axis: "pulsAxe"
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.seriesName
}
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
"export": {
enabled: true
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
series: [
{
name: "Puls",
valueField: "puls"
},
{
name: "Temperatur",
valueField: "temperatur",
axis: "temperaturAxe"
},
{
name: "Gewicht",
valueField: "weight",
axis: "weightAxe"
}
],
valueAxis: [
{
name: "pulsAxe",
title: "Puls",
position: "left",
label: {
customizeText: function(value) {
return value.value + " bpm"
}
}
},
{
name: "temperaturAxe",
title: "Temperatur",
position: "left",
label: {
customizeText: function(value) {
return value.value + " °C"
}
}
},
{
name: "weightAxe",
title: "Gewicht",
position: "left",
label: {
customizeText: function(value) {
return value.value + " kg"
}
}
}
]
});
});
My result is this:
As you can see, there is a simple spline chart, with three various y-axes and three various value-ranges for this axes on the chart. For each axe, I've got an label (bpm, °C and kg). I implemented also the tooltip of dxchart. At the moment when I hover a point, in the tooltip there is only the value. I also would like to add dynamicly to the tooltip the label after the value. That means, when I hover a value of the axe "Puls", it should show for example this: 91 bpm. How can I do this. I tried it with the customizeTooltip: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/tooltip/?version=16_1#customizeTooltip
I had the idea, to check the seriesName and assign the label in the return something like this, but it didn't work:
tooltip: {
enabled: true,
customizeTooltip: function(point) {
if (point.seriesName == "Puls") {
return {
text: point.value + " bpm"
}
} else if (point.seriesName == "Gewicht") {
return {
text: point.value + " kg"
}
} else if (point.seriesName == "Temperatur") {
return {
text: point.value + " °C"
}
}
}
},
Hi please check the Plunker https://plnkr.co/edit/6Uoh30bb8qBNWIIbyX0O?p=preview
check your library includes
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="chartContainer" style="width:100%; height: 440px"></div>
<!-- Put your html here! -->
</body>
</html>
and JS
// Add your javascript here
$(function(){
var dataSource = [
{
argument: '15.06.2016',
puls: 102,
temperatur: 37.6,
weight: 91
},
{
argument: '16.06.2016',
puls: 99,
temperatur: 35.1,
weight: 88
},
{
argument: '17.06.2016',
puls: 87,
temperatur: 38.0,
weight: 87
},
{
argument: '18.06.2016',
puls: 91,
temperatur: 36.3,
weight: 87
},
{
argument: '19.06.2016',
puls: 112,
temperatur: 37.1,
weight: 90
}
];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: "spline",
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
axis: "pulsAxe"
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
console.log(obj.seriesName)
if (obj.seriesName == "Puls") {
return {
text: obj.value + " bpm"
}
} else if (obj.seriesName == "Gewicht") {
return {
text: obj.value + " kg"
}
} else if (obj.seriesName == "Temperatur") {
return {
text: obj.value + " °C"
}
}
// return {
// text: obj.seriesName
// }
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
"export": {
enabled: true
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
series: [
{
name: "Puls",
valueField: "puls"
},
{
name: "Temperatur",
valueField: "temperatur",
axis: "temperaturAxe"
},
{
name: "Gewicht",
valueField: "weight",
axis: "weightAxe"
}
],
valueAxis: [
{
name: "pulsAxe",
title: "Puls",
position: "left",
label: {
customizeText: function(value) {
return value.value + " bpm"
}
}
},
{
name: "temperaturAxe",
title: "Temperatur",
position: "left",
label: {
customizeText: function(value) {
return value.value + " °C"
}
}
},
{
name: "weightAxe",
title: "Gewicht",
position: "left",
label: {
customizeText: function(value) {
return value.value + " kg"
}
}
}
]
});
});
Just a newbie here trying to understand and work on extjs 4.2.1. I really like the charts and grids and wanted to incorporate them into my current application. I got the sample grid to work in my application but the chart turns out to be a little harder. I used the sample code at
sample code
which renders the chart in another window and was wondering if someone can help me put this into a div tag on one of my panels.
Here is the container I have for the chart:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="container"></div>
</div>
and the chart script: charts.js
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
var textArea;
var store = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [
{ name: 'Jul 07', visits: 245000, views: 3000000 },
{ name: 'Aug 07', visits: 240000, views: 3500000 },
{ name: 'Sep 07', visits: 355000, views: 4000000 },
{ name: 'Oct 07', visits: 375000, views: 4200000 },
{ name: 'Nov 07', visits: 490000, views: 4500000 },
{ name: 'Dec 07', visits: 495000, views: 5800000 },
{ name: 'Jan 08', visits: 520000, views: 6000000 },
{ name: 'Feb 08', visits: 620000, views: 7500000 }
]
});
Ext.define('Ext.chart.theme.CustomBlue', {
extend: 'Ext.chart.theme.Base',
constructor: function (config) {
var titleLabel = {
font: 'bold 18px Arial'
}, axisLabel = {
fill: 'rgb(8,69,148)',
font: '12px Arial',
spacing: 2,
padding: 5
};
this.callParent([Ext.apply({
axis: {
stroke: '#084594'
},
axisLabelLeft: axisLabel,
axisLabelBottom: axisLabel,
axisTitleLeft: titleLabel,
axisTitleBottom: titleLabel
}, config)]);
}
});
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
theme: 'CustomBlue',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
renderTo: "container"
});
});
You didn't explain what the problem was, however it's pretty clear from looking at the code.
The issue is that you need to give the chart a width/height, because it needs those to size appropriately. In the original example in the docs, the dimensions are provided explicitly by the fit layout used on the window.