Develop Reference

Prepare my data for HighStocks data series input - javascript

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';

Related

I am trying to get JSON from Poloniex's public API method (specifically the returnChartData method) to display chart history of cryptocurrencies against one another into a Highchart Stockchart graph (looking like the demo one here.).
This is part of my JavaScript code to use the Poloniex returnChartData callback, get the JSON from it and implement it into the 'data' segment of the chart. So far it is not working and I can't for the life of me figure out what I need to change.
var poloniexUrl = "https://poloniex.com/public?command=returnChartData&currencyPair=BTC_XMR&start=1405699200&end=9999999999&period=14400";
$.getJSON(poloniexUrl, function(data){
results = data;
});
// Creates Chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'cryptoChart',
backgroundColor: 'white'
},
title: {
text: currentTitle
},
series: [{
data: results,
turboThreshold: 1000
}],
xAxis: {
original: false
},
rangeSelector: {
selected: 1
},
plotOptions: {
line: {
gapSize: 2
}
}
});
Would love any help!

Refer to this live demo: http://jsfiddle.net/kkulig/0f4odg5q/
If you use turboThreshold the points' options need to be given as an integer or an array (Explanation: https://api.highcharts.com/highstock/plotOptions.series.turboThreshold). In your case the format is JSON, so I disabled turboThreshold to prevent Higcharts error 12 (https://www.highcharts.com/errors/12):
turboThreshold: 0
$.getJSON is asynchronous - the best way to make sure that data variable is initialized is using it inside callback function (second argument of getJSON):
$.getJSON(poloniexUrl, function(data) {
// Creates Chart
var chart = new Highcharts.StockChart({
chart: {
(...)
The data that you fetch looks like candlestick series - I changed the type of the series:
type: 'candlestick'
Date will be properly understood by Highcharts if it's kept in the x property of JSON object (not date):
data: data.map((p) => {
p.x = p.date;
return p
}),

I am using the easyautocomplete, http://easyautocomplete.com/, to populate a list as the user types in a search field. The code is as follows:
var options = {
url: function(phrase) {
if (phrase !== "") {
return "http://<url>/todo?query=" + phrase + "&format=json";
} else {
return "http://<url>/todo?query=empty&format=json";
}
},
getValue: "results",
ajaxSettings: {
dataType: "jsonp"
},
requestDelay: 300,
theme: "round"
};
$("#product-list").easyAutocomplete(options);
I am getting a response from my API that looks like:
{
"results": [
"list_item_1",
"list_item_2",
"list_item_3",
...
"list_item_50"
]
}
I have a feeling I'm not formatting the response properly, but I'm not sure how to fix it.

A look through the guide it looks like getValue would be if you had an array of objects and wanted to pull a particular key from each one. From the list location section it looks like you are looking for listLocation to specify the object key that has the array of things to autocomplete. So changing getValue to listLocation should give you the results you are looking for

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

I want to use JsArray with the Webix component DataTable. But I have one problem. When I use JsArray format I can’t update the data in the Webix datagrid. Unfortunately, I can see only the beginning of its data. Check the sample to understand the issue:
var array1 = [ [1,"Marie","Oslo"],[2,"John","Los Angeles"],[3,"Kate","London"] ];
var array2 = [ [4,"Martin","Manchester"],[5,"Joana","Lisbon"],[6,"Ronaldo","Barcelona"],[7,"Matthew","Portland"] ];
webix.ui({
view:"button",
label:"test new data",
click: function() {
new_data()
}
});
webix.ui({
view:"datatable",
id: "mytable",
columns:[
{id:"data0", header:"ID" },
{id:"data1", header:"Name" },
{id:"data2", header:"City" }
],
datatype: "jsarray",
data: array1
});
function new_data () {
var mytable = $$("mytable");
mytable.parse(array2);
}
After pressing the button “test new data”, 4 new empty lines appear in the table.

To solve this issue, you should specify data format in the parse command
mytable.parse(array2, "jsarray");
The component will expect the json data, by default.
I hope that it'll help you)

Below is my JSON format of data from which I want to create a pie chart in highcharts..
{
"title": {"text": "Pie"},
"series":
[
{
"type": "pie",
"name": "Actual",
"data":
[
[
"Salesgrowth",
45
],
[
"marketshare",
26.8
]
]
}
]
}
This is valid JSON , I am getting this output from Web Service, when I call this service and evoke this method to run this JSON output to create pie then I get the error as follows,
Uncaught TypeError: Cannot set property 'renderTo' of undefined
Below is the JQuery function that I make use to call my file where I stored this JSON output from my web service,
function loadJson() {
$(document).ready(function () {
//alert("inside");
var chart;
var seriesData;
$.getJSON("val1.json", function (data) {
var chartoptions = data;
chartoptions.chart.renderTo = 'container';
chart = new Highcharts.Chart(chartoptions);
});
});
},
and this function runs well with other kind of charts like bar graph,line graph and column graph...tested with all kinds of graphs, I am facing problem only with pie chart...any help will be greatly appreciated
---------Updated question------
Below is my JSON output I have changed in order to get values
{
"title":{"text":"Financial"},
"chart":{"type":"pie"},
"series":
[ {"name":"Actual-Market Share","data":["Market Share",30]},{"name":"Actual-Market Share","data":["Sales Growth",70]}]}
and below is the output I am getting,
I am not able to identify what I am exactly messing with...Any idea will be of great help...
----------Updated output-----------
{
"legend":{"enabled":"true"},
"title":{"text":"Financial"},
"chart":{"type":"pie"},
"series":[{"name":"Actual","data":[{"str":"Market Share","flo":20}]},
{"name":"Actual","data":[{"str":"Sales Growth","flo":30}]},
{"name":"Actual","data":[{"str":"Operating Profit","flo":40}]},
{"name":"Actual","data":[{"str":"Gross Margin %","flo":10}]}]}

Your json doesn't include a chart object, so setting chart.renderTo won't work.
If you can change the webservice, get it to add the following to your json:
chart: {
},
If you can't change the back end, you can change your javascript to add the chart object before setting renderTo:
$.getJSON("val1.json", function (data) {
var chartoptions = data;
if (typeof chartoptions.chart === 'undefined') {
chartoptions.chart = {};
}
chartoptions.chart.renderTo = 'container';
chart = new Highcharts.Chart(chartoptions);
});