Develop Reference

setData is not a function + Angular2-Highcharts

I was following simple example to set data to Highcharts using this Angular2-Highcharts module
As shown in the following example, i have made small tweak to dynamically set data to Highcharts. Following is the code snippet :
constructor() {
this.options = {
chart: { type: 'spline' },
title: { text : 'dynamic data example'},
series: [{ data: [2,3,5,8,13] }]
};
setTimeout(() => {
this.chart.series[0].setData([21,31,51,81,13]);
}, 3000);
setTimeout(() => {
this.chart.series.push({data:[]});
this.chart.series[1].setData([100,200,300]);
}, 5000);
}
Plunker link for the same .
Error :
ERROR TypeError: _this.chart.series[1].setData is not a function
at eval (run.plnkr.co/QZBbWi3BVy3DeOzT/app/main.ts!transpiled:28)
My Observation :
What is evident with that error is there is no setData function in the series array in the 1st element. Alternate approach to resolve this is, initializing this.options with empty object with data property :
constructor() {
this.options = {
chart: { type: 'spline' },
title: { text : 'dynamic data example'},
series: [{ data: [2,3,5,8,13] },
{ data: [] },
]
};
}
This is very crude way as i need to do the same for 50 elements in this.options.series if i see them coming dynamically
Is there any efficient and better approach to resolve this error ?
PS : Am new to Highcharts, so please bear with me if am doing something completely wrong at basic level.

setData modifies a series which already exists - if you do not have the series you cannot modify it.
If you want to add a new series, you should use chart.addSeries() method like this:
setTimeout(() => {
this.chart.addSeries({
data: [21,31,51,81,13]
});
}, 5000);
example: http://plnkr.co/edit/61IgH8t3YKjtIOgzpUPB?p=preview

CanvasJS - accessing variables - permission denied to access property toString

So, I have a form values of which I want to display in a chart. The code is as follows:
var chart;
function createChart() {
console.log($("#kok").val()); // this prints a number
try {
chart = new CanvasJS.Chart("chart", {
theme: "theme2",
title: {text:"Kannatus"},
data: [{
type:"column",
dataPoints: [
{label:"KOK", y:$("#kok").val()}, // the problem is here
{label:"KESK", y:$("#kesk").val()},
{label:"SDP", y:$("#sdp").val()},
{label:"PS", y:$("#ps").val()},
]
}]
});
} catch(e) {
console.log(e.message);
}
chart.render();
What's wrong here? Should I just use a different library?

Here the type of $("#kok").val() is string. Converting it to Number will help you out.
You can refer http://www.w3schools.com/js/js_type_conversion.asp

ElasticSearch Javascript, Highlight not working

we switched recently to ElasticSearch Angular version and everything is working as expected except the Highlight, which is not returned at all.
This is how I setup a demo query:
$esClient.search({
index: 'myIndex',
body: {
size: 10,
from: 0,
query: query,
highlight: {
fields: {
"_all": { "pre_tags": ["<em>"], "post_tags": ["</em>"] }
}
}
}
}).then(function (result) {
// map the resultset for Row Template
var currentRows = result.hits.hits.map(function (record) {
return {
"type": record._type,
"entity": record._source, // the result
"highlight": record.highlight, // the highlights
"id": record._id // Search record ID
};
});
});
If I use the same code with a classic XmlHttpRequest and pass the query model inlcuding the highlight, I get back a JSON which contains an highlight array per each result, while using the ElasticSearch Angular client the query succeed but I don't get back the highlight.
Am I doing something wrong?

I think you might want to change to this format:
{
"query" : {...},
"highlight" : {
"pre_tags" : ["<tag1>"],
"post_tags" : ["</tag1>"],
"fields" : {
"_all" : {}
}
}}
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-highlighting.html

Swapping data in Angular UI-Grid, new columns not visible when changing dataset externally

I've got a query tool I've been working on, which has an angular form that is filled out, and then when it's submitted it uses AJAX which returns JSON, which is then rendered into ui-grid, that JSON response looks like
{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "company", "employed"]
"results": [
{first_name: "John", last_name: "Smith", company: "Abc Inc", employed: true},
{first_name: "Johnny", last_name: "Rocket", company: "Abc Inc", employed: true}]
}
I'm working on both the PHP and angular so I have full control over this JSON response if need be. I'm running into an issue when my JSON response from a first AJAX call is rendered, and then I run another, seperate AJAX call on the same page and get a new data set: this new data set does not render any of the columns that were not in the original data set. This is hugely problematic as the table is essentially cleared when none of the columns are the same, and I often need to load completely different data into ui-grid in this single page app.
When the JSON is recieved I simply bind the jsonResult.results to the old $scope.myData variable that ui-grid is bound to.
I've made a plunker isolating this issue. A dataset with a "punk" column is loaded, and then clicking "swap data" will try to load a dataset with "employee" column instead of "punk". I've so far looked into directives that will refresh or reload when the $scope.myData variable changes using $watch, and looked at finding something like $scope.columnDefs to let ui-grid know. Relatively new to angular and javascript so directives are still a bit over my head.

I have updated your plunker slightly:
$scope.swapData = function() {
if ($scope.gridOpts.data === data1) {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'employee' }
];
$scope.gridOpts.data = data2;
//punk column changes to employee
}
else {
$scope.gridOpts.columnDefs = [
{ name:'firstName' },
{ name:'lastName' },
{ name:'company' },
{ name:'punk' }
];
$scope.gridOpts.data = data1;
//employee column changes to punk
}
};
http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview
Since you have the columns in your json, it should be fairly easy to do.

One additional piece that I figured out with the help of Kevin Sage's answer and the plunker example... If you are using the backward-compatible "field" attribute the swapping does not work properly when there are field name overlaps between the two sets of column definitions. The column headers and the column widths are not rendered properly in this case. Using the "name" attribute of the column definition corrects this.
$scope.swapData = function() {
if ($scope.gridOpts.data === data1) {
$scope.gridOpts.columnDefs = [
{ field:'firstName' },
{ field:'lastName' },
{ field:'company' },
{ field:'employee' }
];
$scope.gridOpts.data = data2;
//punk column changes to employee
}
else {
$scope.gridOpts.columnDefs = [
{ field:'firstName' },
{ field:'lastName' },
{ field:'company' },
{ field:'punk' }
];
$scope.gridOpts.data = data1;
//employee column changes to punk
}
};
Example here: Plunker

My solution:
$http.get('url').success(function(res) {
// clear data
gridOptions.data.length = 0;
// update data in next digest
$timeout(function() {
gridOptions.data = res;
});
});

Prepare my data for HighStocks data series input

I am trying to find a way to parse my data format so that it could be recognized by HighStocks. My data fetched from the server is in such format:
var data = [
{
"dt":"2010-06-10 14:33:39",
"val":98
},
{
"dt":"2010-06-10 14:34:18",
"val":99
},
{
"dt":"2010-06-10 14:34:28",
"val":93
},
{
"dt":"2010-06-10 14:34:38",
"val":79
},
{
"dt":"2010-06-10 14:34:48",
"val":87
},
{
"dt":"2010-06-10 14:34:58",
"val":86
},
{
"dt":"2010-06-10 14:35:08",
"val":79
},
{
"dt":"2010-06-10 14:35:17",
"val":90
}]
From the demo on Highcharts website it accepts format like:
var usdeur = [
[Date.UTC(2003,8,24),0.8709],
[Date.UTC(2003,8,25),0.872],
[Date.UTC(2003,8,26),0.8714],
[Date.UTC(2003,8,29),0.8638],
[Date.UTC(2003,8,30),0.8567],
[Date.UTC(2003,9,1),0.8536],
[Date.UTC(2003,9,2),0.8564],
[Date.UTC(2003,9,3),0.8639],
[Date.UTC(2003,9,6),0.8538],
[Date.UTC(2003,9,7),0.8489]]
So simply saying, how could I format my data 2010-06-10 14:33:39 to Date.UTC(2010,06,10,14,33,39)? Any JavaScript/jQuery method or existing libraries like date.js/moment.js allow me to do that easily (say if I don't want to use getUTC*() to get the datetime information and then put into Date.UTC())
Thanks in advance.

Why don't you format it on your sql ? It's much better than format each point of your chart.
UNIX_TIMESTAMP should help you.
Example:
SELECT UNIX_TIMESTAMP(concat(dateColumn, timeColumn)) * 1000 AS 'dateUTC';