Highcharts in AngularJS with inline variables (using Pablojim's Highchart-ng) - javascript

I'm using the Highchart charting library with AngularJS, using Pablojim's 'Highchart-ng' module.
Everything is set up properly, and the following code works as intended:
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : [1, 4, 10, 3]
}]
}"></highchart>
But
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : {{visitors}}
}]
}"></highchart>
does not. (notice the difference at 'data')
I keep getting the following error:
Error: [$parse:syntax] Syntax Error: Token 'visitors' is unexpected, expecting [:] at column 122 of the expression [{
type : 'line',
series : [{
name : 'Visitors',
data : {{visitors}}
}]
}] starting at [visitors}}
}]
}].
Note: The variable {{visitors}} is set up properly in my controller, and when using it in my template, the data works fine. It also used to work with my previous charting library, Flot.
I've tried multiple workarounds:
Normally I can work around this (initialization) problem by adding something like ng-repeat="data in visitors | limitTo: 1" to the directive, so it inits only when the variable becomes available (this works with Flot and EasyPieCharts).
Adding ui-refresh="visitors" doesn't work,
and data: {{visitors || 0}} doesn't work either.
So, how can I add variables inline, within my template files?

you can try with:
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : visitors
}]
}"></highchart>
like a var
OR
in your ng-controller
$scope.config = {
options: {
chart: { type: 'bar' }
},
series: [{
data: visitors
}],
title: { text: 'Hello' },
loading: false }
and then in your html
<highchart config="config"></highchart>

Related

I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options

Here is the clear view of the error: Can someone help me resolve it?
Type '{ legend: { position: string; }; title: { display: true; text:
string; }; }' is not assignable to type
'_DeepPartialObject<CoreChartOptions<"bar"> &
ElementChartOptions<"bar"> & PluginChartOptions<"bar"> &
DatasetChartOptions<"bar"> & ScaleChartOptions<...> &
BarControllerChartOptions>'. Object literal may only specify known
properties, and 'legend' does not exist in type
'_DeepPartialObject<CoreChartOptions<"bar"> &
ElementChartOptions<"bar"> & PluginChartOptions<"bar"> &
DatasetChartOptions<"bar"> & ScaleChartOptions<...> &
BarControllerChartOptions>'.ts(2322) index.esm.d.ts(3599, 3): The
expected type comes from property 'options' which is declared here on
type 'ChartConfiguration<"bar", any, unknown>'
Here I have attached my code in my component.ts.
new Chart('myChart',{
type: 'bar',
data :{
labels: this.team,
datasets: [
{
data: this.totalDefects,
borderColor : '#000000',
backgroundColor : '#8e5ea2',
label : "Total defect count",
}
]
},
options: {
legend: {
position : 'top',
},
title:{
display: true,
text : 'Total number of defects raised by each team across iterations'
}
}
});
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
That is because you are using v2 syntax with v3, legend and title options have to be configured in the options.plugins namespace instead of in the root of the options namespace

Setting additional point attributes in HighStock time series with large data sets

I know you can pass arbitrary data into your time series points, such as:
new Highcharts.Chart( {
...,
series: [{
name: 'Foo',
data: [ { y : 10.0, customData : 'value 1' },
{ y : 20.0, customData : 'value 2' },
{ y : 30.0, customData : 'value 3' } ]
}]
} );
However, I noticed that this doesn't quite work in HighStock when your time series is comprised of a large data set (1000+ points).
For example, here is a working fiddle http://jsfiddle.net/gparajon/c5fej775/ (less than 1000 points, which also happens to be the default turboThreshold). And here's the same fiddle, with more data, which breaks the tooltip formatter: http://jsfiddle.net/gparajon/5om258az/
Any workaround?
Thanks!
The error in the console is a bug and it is not really connect why you cannot access extra info in the formatter.
The difference between a chart and a stockchart is that a stockchart does data grouping, what means that in the formatter callback you receive grouped points which does not include extra data (how should they be grouped?).
example: https://jsfiddle.net/g04La2qh/1/
If you disable data grouping, you will receive non-grouped points with extra data.
dataGrouping: {
enabled: false
},
example: https://jsfiddle.net/g04La2qh/2/

Specify X-Axis Category in Series Data in Highcharts

I am trying to implement a stacked bar graph and I would like to understand if there is anyway that we can specify the category along with the data point in series.
I have Categories as :
xAxis: {
categories: ['DEV', 'TEST', 'Stage']
},
Series data:
series: [{
name: 'Severity-1',
data: [['TEST',20]]
},{
name: 'Severity-2',
data: [['TEST',20]]
}]
In above snippet I am trying to add a point value '30' to 'TEST' category but when I load the graph it shows up under 'DEV' category.
Example: http://jsfiddle.net/G5S9L/1/
Any idea?
Did you try:
{"xAxis": { "type" : "category" .... } ... }
It should get category from your data.
You need to use category index instead of category name, so proper example will be:
series: [{
name: 'Severity-1',
data: [[1,20]] //0-DEV, 1-TEST, 2-Stage
},{
name: 'Severity-2',
data: [[1,20]]
}]
Hey Vipul Do you want something like this ? Please check the link below for the code.
series: [{
name: 'Severity-1',
data: [['TEST',20]]
},{
name: 'Severity-2',
data: [['TEST',20]]
}]
CHECK EXAMPLE

How to import date strings into javascript as UTC objects using HighStock charting?

I'm in the process of creating a graph using HighStock (from HighCharts). I need to somehow convert the xAxis data to UTC objects but for some reason it is not graphing out the correct dates (it uses the default Jan1st).
If I import a list like ["2013-08-05 10:38:30","2013-08-06 10:38:30"] into javascript, how could I convert each element to a UTC object?
Many thanks!
$(function() {$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
xAxis : {
data : ["2013-08-05 10:38:30","2013-08-06 10:38:30"],
type : 'datetime'
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : [10,20],
tooltip: {
valueDecimals: 2
}
}]
});
});
I advice to get your all string, then use i.e split function, and use Date.UTC() function. After it you can use this as x parameter in point in serie. Like:
series:[{
data:[[Date.UTC(2012,2,2),10],[Date.UTC(2013,2,2),3]]
}]
Data cannot be used in xAxis.

In kendo dataviz chart local data binding , JSON data value was spilted?

I create a Column chart using Kendo ui dataviz.
In my program, i am going to bind the local Javascript Array variable data to chart datasource.
The JSON data was spilted like "3""9""6" for "396".
I dont know why it happened. My Source code is given blow. Please check it and Please give the solution.
Source:
/**************Variable Declaration**********************************/
var eligibilityData = new Array();
eligibilityData = {
mem_status: {
a: 396, b: "56", c: "1125", d: "8423"
}
};
/**************Create Chart**********************************/
function createBarChart(eligibilityData) {
/****** Issue: A value is 396 but it spilted into "3","9","6"************/
$("#Chart1").kendoChart({
theme : $(document).data("kendoSkin") || "default",
dataSource : {
data: JSON.stringify(eligibilityData.mem_status.a),
},
seriesDefaults: { type: "column", },
series : [
{ field: "a", name : "A" }
],
tooltip : { visible: true, },
});
}
Local data should be passed as an array. No need to call JSON.stringify
data: [eligibilityData.mem_status]
See: http://docs.kendoui.com/api/framework/datasource#configuration-data-Array
JSON.stringify does not do what you expect. What you sentence really does is:
It gets the number 396 and converts it to a string.
Converts a string into an array of one character per element.
Not sure about the way you define the DataSource (why you want a DataSource with only one element) but if that is really what you want, you might try:
dataSource : {
data: [eligibilityData.mem_status.a]
},
or
dataSource : {
data: [eligibilityData.mem_status]
},

Categories