I need to change the styling (background & size) of a Kendo UI line chart markers dynamically using Angular.
I know this is possible with a function like this:
markers: {
background:function(e) {
return 'blue';
}
This works great when I use it on my controller, or anywhere else outside the html file after
$("#chart").kendoChart(...);
I am working with Angular, so the series options is inside my html tag with k-serias directive.
When I try to add a function there I get an error.
Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 237-237 [#] in expression [[
Here is the directive I put:
k-series="[{
type: 'line',
field: 'score',
markers: {
type: 'square',
background: function(e) { return #ffffff; }
}
}]"
All I want to do is to set a function for both background and size attributes inside the k-serias directive.
Thanks!
You can bind the directive k-series to your angular $scope.series.
In the HTML file:
k-series="series"
In JS file
$scope.series = [{
type: 'line',
field: 'score',
markers: {
type: 'square',
background: function(e) { return "#ffffff"; }
}
}];
Related
I am writting this highchart in angular and I want to create my own range selector dynamically using this.chart.update. However it keeps saying undefined update not a function. How can I fix the code. Also, I am trying to export the dataTable into the graphTable div which is into a differnt tab. I have attached a image please help. [graph/tableview image][1]
You can try to get the data from the range selector events rangeSelector.buttons.events, you can also set your own datagrouping with rangeSelector.buttons.dataGrouping.
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m',
events: {
click: function () {
console.log(this);
}
}
},
}
Demo:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/button-click/
API References:
https://api.highcharts.com/highstock/rangeSelector.buttons.events
https://api.highcharts.com/highstock/rangeSelector.buttons.dataGrouping
Implement inside chart.events.load() with this you are already close to getting data from other variables/sources and passing it inside the rangeSelector button events.
chart: {
events: {
load: function() {
let chart = this,
rangeSelector = chart.rangeSelector;
console.log(chart);
rangeSelector.update({
buttons: [{
Demo:
https://jsfiddle.net/BlackLabel/Lgdhokfy/
API References:
https://api.highcharts.com/highcharts/chart.events.load
I am using highchart on react-native with this library. I have created simple activity gauge component from high chart official site. Here is the code of component.
import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';
export default class Speedometer extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'solidgauge',
height: '110%',
},
....
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
);
}
}
When i render this component on my screen i get the error
TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')
How can i use getOptions or colors or theme or other variable with highchart inside react-native component.
You need to understand a few things here:
react-native-highcharts library create a dynamic html content and then inject into webview. Whatever is passed in the config props of ChartView is converted in to string content after flattenObject function inside the library.
If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is highcharts. This highcharts library will make the variable Highcharts in the local scope of javascript inside webview.
You are getting this error because React thinks that Highchart must be define somewhere in the component and define Highchart as a string, so if you access string.function it will throw error.
(Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the ChartView, or you can create dummy Highchart object inside your root component to make the React stop complaining about the Highchart object. Once this object is passed through CharView highchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!
I'm trying to dynamically add annotations to my high charts in React. I'm using the addAnnotation function to add a new annotation whenever a hover event is triggered on my app, but the annotation does not render. I dropped a debugger into my code, and when I call chart.annotations I can see there is currently an array of annotations, but they are not rendering. I even have make a call to the addPlotLine in this function and the plotline is rendered on the chart. My config file looks like this
chart: {
annotations: [{
labelOptions: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
verticalAlign: 'top',
align: 'right',
}
}],
annotationsOptions: {
},
.... some lots more config options
}
and my on hover function to add the annotation is as follows
if( isNumber(value) )
//this renders a plotline
chart.xAxis[0].addPlotLine(baseChartHandle.generateInteractivePlotLine(value));
// this doesn't render my annotation however
chart.addAnnotation({
linkedTo: value,
title: {
text: "It works!"
}
});
}
I found that when I added annotations using Highcharts that the "linkedTo" function never worked despite my trials.
Despite adding a guid to my point, it never was able to apply it. I would suggest in your case adding it by x and y value, then finding the point that way instead. Here is how I have added annotations in the past successfully:
series.data.forEach(function (point) {
var annotationObject =
{
id: point.id,
labelOptions: {
y: 15,
verticalAlign: 'bottom',
distance: 25
},
labels: []
};
}
var text = <get text you want to push>;
annotationObject.labels.push(
{
point: {
xAxis: 0,
yAxis: 0,
x: point.x,
y: point.y
},
text: text
}
);
_chart.addAnnotation(annotationObject);
});
I also found a bug in HighCharts when using remove annotations, as a heads up. Each point will need an id like above, but it should be called by this line:
_chart.removeAnnotation(id);
It will remove the annotation, however you will get lots of complaints from highcharts if you try to do anything after, and it will break. I found the answer here, in annotations.js :
The red box is code I added. If you do removeAnnotation(ann.id), and it rerenders, it will fail because the labels object is null. Adding this check lets you do that without the labelCollectors failing.
Happy charting.
I've used setting label on start and its working, here is the working code:
var chartDonut1 = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type : 'donut'
},
donut: {
title: "title"
}
});
But, i want to change the label on the donut based on search, and for that purpose i need to use load function.
EDIT:
Here is example of donut chart and with title: LINK
How can label be change/set on load?
I've tried setting like code bellow, but i can't make it work:
chartDonut1.load({
json: dataJsonGraph,
donut: {
title: 'title1',
},
bindto: '#chartDonut1'
});
Any suggestion will be great!
I think the bindto: '#chartDonut1' should be declared inside the generate function.
It seems you cannot change dynamically graph's title inside load function (In c3js documentation, no reference to it).
You will need to select the chart using d3 instance, then change the title. Example:
var label = d3.select('#chart2 text.c3-chart-arcs-title');
label.html(''); // remove existant text
label.insert('tspan').text('30').attr('dy', 0).attr('x', 0).attr('class','big-font');
label.insert('tspan').text('Test Data').attr('dy', 20).attr('x', 0);
A way to change it is to edit html's code : http://plnkr.co/edit/ew5dDA1R3biXnMp80LDd?p=preview
I am using the data.js plugin for highcharts. Using their basic demo I have created my own test version using our .NET generated table. The documentation on this is very sparse (essentially it is what is in data.src.js). I am getting errors that it is sending in data values as strings (HC error #14). I am not entirely sure how to modify the code to make it work with my simple table.
Here is my js code:
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('ctl00_Main_content_ucDashboard_ctl00_ctl11_ctl02_lstData_tblData')
},
chart: {
type: 'column'
}
});
});
Additional info:
It appears that the issue is that my table cells contain span tags encapsulating the values. I have no control over those tags and are there for presentation.
The <span> tags within the table are the problem. Try this:
$(function () {
$('#container').highcharts({
data: {
table: $('#ctl00_Main_content_ucDashboard_ctl00_ctl11_ctl02_lstData_tblData').clone(true).find('span').replaceWith(function() { return this.innerHTML; }).end()[0]
},
chart: {
type: 'column'
},
title: {
text: ''
}
});
});
(you could also simply remove the span tags from where ever they are coming from)
http://jsfiddle.net/5Gjyy/