Highstock From/To Invalid Date Issue - date

I have got an issue in trying to generate a graph which has a "Price" axis, and one for "Volume", similar to that in the example given on the Highstock website. It displays the volume axis just fine, but not the prices.
In trying to determine the cause of the issue, I have disabled the volume, and upon doing so, the "From" and "To" rects at the top right both indicate "Invalid Date", yet they have been on the same format, epoch by millisecond, as the volume.
So here is my setup:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'Price Graph'
},
yAxis: [{
title: {
text: 'Prices'
},
height: 200,
lineWidth: 2
}],
series: [
seriesOptions
]
});
And here is the "data" for the seriesOptions:
[[1362434092000, 20.3],
[1362434093000, 13.1],
[1362434199000, 7.01],
[1362434200000, 9.4],
[1362434796000, 7.23],
[1362434797000, 22.4],
[1362434798000, 13.1],
[1362434835000, 9.9],
[1362435142000, 9.2],
[1362435399000, 6.4],
[1362435400000, 13.5],
[1362435401000, 24.8],
[1362435453000, 6.4]]
UPDATE
Not sure if this will be of help, but found on line 292, it looks like it is failing here:
this[a+"Input"].value=xa(c.inputEditDateFormat||"%Y-%m-%d",this[a+"Input"].HCTime);
The HCTime here is undefined, so on line 20, where this function is defined:
xa=function(a,b,c){if(!s(b)||isNaN(b))return"Invalid date";
Hope this helps...
UPDATE 2
With the information in the variable seriesOptions, I tried to bring things to basics, and updated the series to be the following:
series : [{
lineWidth : 2,
marker : {
enabled : true,
radius : 2
},
shadow : true,
tooltip : {
valueDecimals : 2
},
type: 'line',
name : 'Test',
pointInterval : 15 * 1000,
data : [
[[1362434092000, 20.3],
[1362434093000, 13.1],
[1362434199000, 7.01],
[1362434200000, 9.4],
[1362434796000, 7.23],
[1362434797000, 22.4],
[1362434798000, 13.1],
[1362434835000, 9.9],
[1362435142000, 9.2],
[1362435399000, 6.4],
[1362435400000, 13.5],
[1362435401000, 24.8],
[1362435453000, 6.4]
]]
}]
This has a bit of a different outcome, one that I hope can help someone know what the problem is exactly - it also produces an empty graph space, but the "From" and "To" both say "Jan 1, 1970". An improvement from "Invalid Date", but still, doesn't make sense to me when the Epoch Converter website shows the correct translation of Tuesday, 5 March 2013 8:54:52 AM. -- What does this all mean?
UPDATE 3
This question has been up for a little while now, and I've received a hit-and-run -1 score which I'm not sure why I deserve. So to help explain a little more, I have made the following two screen shots:
Graph Image
JS Breakpoint with values
I hope this helps... It's driving me insane, and the research I've done suggests only to make sure the epoch timestamp is in Milliseconds.
Will be very, very grateful for help to this riddle - am almost finished this phase of the project, and it's been a long time coming.
Cheers.

Problem solved.
The main issue was that chart = new Highcharts.StockChart({ was being called twice in the script, before each attempt the contents of the container were being removed. On the first iteration, it had data to work with, the second time, it did not. Hence, NaN on the data.
Second issue, seriesOptions was itself an array, so foolishly I was making the series: an array of arrays.
I do have a unusual issue with the slider overlapping the volume axis, but I'll figure that out.

Related

Show labels on x axis in vue-chartjs

I`m struggling with the esthetic aspect of my chart. Actually it lookes like this:
Chart is showing data over time in 10mins intervals. With that number of labels it`s hard to see what column matches to time.
I would like to create ticks like on the image, so the chart would be way more readable. I looked into documentatnion and tried this but without effect:
scales: {
xAxes: [
{
ticks: {
drawTicks: true,
},
},
],
Pasting the answer from the comment section,
best way to work with ticks is by using callback function eg:
ticks: {
callback: function (value: any, index: any, ticks: any) {
return 'What you want to return';
},
}

Moving a vertical time cursor in Echarts fast(!)

what is the best performing way to render a time cursor in an echarts graph?
The idea is to synchronize the vertical cursor shown on one graph with another graph on the same page. While the mouse moves over one graph a vertical line is drawn. Now I'd like to have a similar line being shown at the same time location on the other graph.
I'm currently do this by sending a message with a timestamp to the other graph and add a series to the config with a markline:
{
type: 'line',
animation: false,
markLine: {
symbol: 'none',
label: {
show: false
},
lineStyle: {
type: 'solid',
color: '#000',
opacity: 1
},
data: [
{ xAxis: 0 }
]
}
}
On receiving the timestamp, the graph updates data[0].xAxis and the chart is re-rendered. With many charts being connected, it still feels sluggish and I believe that the rendering of the graph with just changing the markline series is still too expensive.
There are a few merge options wrt. the config, but I can't find one, that updates just the markline series or better just moves a line.
I was also trying 'connect', but that was connecting too much (e.g. selection, tooltip, etc.) and even slower than my current method.
There might be another option to render the line with ZRender, but I have not gone that far yet.
Any suggestions?
Cheers,
klaus

How to set min and max as a variable in quickcharts?

Currently, I am creating quickcharts line graphs and attached it to my mail body. But the dataset is fetched using a mysql query and the dataset changes time to time. Here is my sample code.
$chartConfig = "{
type: 'line',
data: {
labels: [$date_array2],
datasets: [{
data: [$value_array2],
backgroundColor: ['#F5DEB3'],
fill: false,
}]
},
options: {
title: {
display: true,
text: 'UGW Max Daily Throughput, in Gbps',
},
legend: {
display: false
},
}
}";
In here both $date_array2 and $value_array2 are fetched using a mysql query. But now I need to make a scale to visualize this graph more clear, so I dont want to start the graph with zero. But I could not make min and max values since the dataset is changing day by day. What I need to do is, I need to check the dataset(only 7 day) and idenitify the min and max values and adjust the y axis. I have read https://www.chartjs.org/docs/2.9.4/charts/line.html but couldnot find a proper solution.. Can someone propose a method to do this?

ZingChart - Alter Properties of ValueBox

I am using ZingChart to create a simple Pie Chart. I am using ColdFusion tags and a json file to style the chart. In the example below, my "target" series (the one I want to “highlight”) is 2, and I manipulating that slice by offsetting it and putting a border around it (see example). The problem with this is if the pie slice is very small, the border isn’t distinguishable.
My goal is to highlight the single valuebox associated with my target slice/series. I’ve research and experimented with the “rules”. The example below is hard-coded for the %v = 17.1 (which happens to be the value for series 2). The valuebox in this example has a border underneath it, which is great. But I can’t use the value token (%v) because there might be more than one series with the same value. I’ve tried many of the available tokens, and I can’t seem to get to find one that represents the “target” series that I identify. I thought it might be straightforward to highlight based on the text of the plot (%t) but I tried and that isn’t working either.
I tried playing around with the “custom token” feature, but won’t go into that at the moment as that didn’t work either.
How can I “highlight” the valuebox for series 2, presumably using a rule (hopefully using an available token)?
{
"graphset":[
{
"type":"pie",
"scale":{ "size-factor":"69%"},
"plot":{
"valueBox":{
"rules":[
{
"rule":"%v==17.1",
"fontSize":18,
"fontColor":"black",
"font-family":"Arial",
"border-bottom":"2px solid black"
}
],
"placement":"out",
"text":"%t:%v",
"fontSize":16,
"fontColor":"black",
"font-family":"Arial"
}
},
"series":[
{
"values":[ 1 ]
},
{
"values":[ 2 ],
"offset-r":"5%",
"border-color":"black",
"border-width":"3"
},
{
"values":[ 3 ]
},
{
"values":[ 4 ]
}
]
}
]
}
Thanks
It sounds like you are looking for the %p or %plot-index token (they are the same). This will allow you to modify the valueBox based on the index of your series.
I have included a demo here:
http://demos.zingchart.com/view/NRSRN7VT
{
type: "pie",
plot:{
valueBox:{
text: "%t: %v",
placement: "out",
rules:[
{
rule: "%p == 1",
color: "black",
fontStyle: "italic",
borderColor: "red",
borderWidth: 2,
shadow: 0,
padding: 10
}
]
}
},
series : [
{
values : [35]
},
{
values : [20]
},
{
values : [15]
}
]
}
I am on the ZingChart team. Hopefully this solves your problem.

Highstock chart offsets dates for no reason

I'm having trouble with highstock.js
For no apparent reason it seems to offset the dates halfway though when it has generated the chart.
It occurs because the date 25 march is showed twice in the chart with a value 0 for it's second entry on the x-axis. There is no data to support this second erroneously date entry.
I've made a jsfiddle here:
http://jsfiddle.net/DZGz7/
chart = new Highcharts.StockChart({
chart: {
renderTo: 'containerchart',
alignTicks: false
},
rangeSelector: {
selected: 0
},
title: {
text: 'New Members'
},
yAxis: {
allowDecimals: false
},
xAxis: {
minTickInterval: 24 * 3600 * 1000
},
plotOptions:{
line:{
dataGrouping:{enabled:false}
}
},
series: [{
type: 'column',
name: 'New Members',
data: ([
[1322611200000,3],[1322697600000,40],[1322784000000,21],[1322870400000,14],[1322956800000,5], [1323043200000,6],[1323129600000,11],[1323216000000,14],[1323302400000,16],[1323388800000,11],[1323475200000,9],[1323561600000,8],[1323648000000,8],[1323734400000,3],[1323820800000,5],[1323907200000,5],[1323993600000,4],[1324080000000,4],[1324166400000,5],[1324252800000,3],[1324339200000,5],[1324425600000,4],[1324512000000,5],[1324598400000,0],[1324684800000,1],[1324771200000,1],[1324857600000,2],[1324944000000,9],[1325030400000,4],[1325116800000,5],[1325203200000,9],[1325289600000,0],[1325376000000,6],[1325462400000,4],[1325548800000,3],[1325635200000,4],[1325721600000,6],[1325808000000,8],[1325894400000,4],[1325980800000,4],[1326067200000,6],[1326153600000,6],[1326240000000,2],[1326326400000,6],[1326412800000,5],[1326499200000,3],[1326585600000,3],[1326672000000,5],[1326758400000,5],[1326844800000,1],[1326931200000,9],[1327017600000,11],[1327104000000,6],[1327190400000,0],[1327276800000,2],[1327363200000,4],[1327449600000,4],[1327536000000,5],[1327622400000,3],[1327708800000,5],[1327795200000,8],[1327881600000,3],[1327968000000,6],[1328054400000,3],[1328140800000,2],[1328227200000,2],[1328313600000,3],[1328400000000,4],[1328486400000,0],[1328572800000,2],[1328659200000,3],[1328745600000,8],[1328832000000,2],[1328918400000,5],[1329004800000,2],[1329091200000,2],[1329177600000,10],[1329264000000,5],[1329350400000,2],[1329436800000,3],[1329523200000,4],[1329609600000,0],[1329696000000,2],[1329782400000,13],[1329868800000,5],[1329955200000,6],[1330041600000,6],[1330128000000,4],[1330214400000,5],[1330300800000,3],[1330387200000,5],[1330473600000,3],[1330560000000,2],[1330646400000,5],[1330732800000,2],[1330819200000,8],[1330905600000,1],[1330992000000,3],[1331078400000,3],[1331164800000,3],[1331251200000,8],[1331337600000,5],[1331424000000,3],[1331510400000,2],[1331596800000,2],[1331683200000,3],[1331769600000,1],[1331856000000,6],[1331942400000,1],[1332028800000,3],[1332115200000,2],[1332201600000,3],[1332288000000,6],[1332374400000,2],[1332460800000,4],[1332547200000,2],[1332633600000,7],[1332716400000,0],[1332802800000,5],[1332889200000,1],[1332975600000,4],[1333062000000,4],[1333148400000,1],[1333234800000,8],[1333321200000,1],[1333407600000,4],[1333494000000,3],[1333580400000,3],[1333666800000,4],[1333753200000,1]
])
}]
});
(zoom in around march 25 and see the data offset begins)
The dates correspond to the right data up until March 25 2012 after that it is shifted 1 day. You will be able to see the offset happening, by comparing the tooltip data to the x-axis label.
Obviously this seems like a problem in the data loaded into the graph, But I've checked it over and the next date it should display is March 26. The data seems just fine.
Any ideas what I am doing wrong here?
From http://api.Highcharts.com/highcharts#global.useUTC:
useUTC: Boolean
Whether to use UTC time for axis scaling, tickmark
placement and time display in Highcharts.dateFormat.
Advantages of
using UTC is that the time displays equally regardless of the user
agent's time zone settings. Local time can be used when the data is
loaded in real time or when correct Daylight Saving Time transitions
are required. Defaults to true.
Therefore, if you want your chart to show in the Browser's local time, you need to take action as follows in your javascript:
Highcharts.setOptions({
global: {
useUTC: false
}
});
Presumably, this should be set before you create your chart.
UTC had to be turned off, then it works.
global:{
useUTC: false
}