I am using depthchart from highcharts to show data that I am geting via websockets,I want to update the data without refreshing. I tried with setdata() and update() methods but the data is updated in a strange way
Strange data:
the desired result should look like
i am geting this when i initialize new depthchart
The problem with this was because I had dynamic (x,y) points and almost on every call the starting point was changing,i solved this by first updating the starting point
chart.series[0].update({
pointStart:updatedPoint,
})
and afterwards
chart.series[0].update({
data:newData,
})
Related
I am playing with the Anychart stock candlestick chart which is very nice, in order to update the chart I use a setInterval function but it re-plots the entire chart which sucks because if I am zooming or something it resets and starts over obviously. Is there a way I can just update last price from the database every couple seconds without re-plotting the whole chart?
Current setInterval function to load chart:
setInterval(function() {
$.get('chart_data.php', function(data) {
$(".main_cont").replaceWith(data);
});
}, 2000);
My chart_data variable:
$chart_data .= "{'x':'".$open_time."','open': ".$open.",'high': ".$high.",'low': ".$low.",'close': ".$close."},";
chart_data.php file:
anychart.onDocumentReady(function() {
// create a data table
var table = anychart.data.table('x');
// add data
table.addData([<?php echo $chart_data;?>]);
// add data
//table.addData([ {'x':'08/09/2020 10:11','open': 11000,'high': 10000,'low': 8000,'close': 8500}]);
// create a stock chart
var chart = anychart.stock(true);
// create a mapping
var mapping = table.mapAs({
'date': 'date',
'open': 'open',
'high': 'high',
'low': 'low',
'close': 'close',
'fill': 'fill'
});
var plot = chart.plot(0);
// add a series using the mapping
chart.plot(0).candlestick(mapping).name();
// set container id for the chart
chart.container('container');
var series = chart.plot(0).candlestick(mapping);
chart.scroller().xAxis(false);
// initiate chart drawing
chart.draw();
});
I would like to replace the setInterval function with something that just replaces the last price data from the database to move the candle up or down, if a new record is added then draw the new candle. I have the script to update the candle or add a new candle I just cannot find a way to do it without re-drawing the whole chart.
You can use the functions for manipulating data to alter the chart.
You can use JS to fetch new data every two seconds, and use addData() to replace the existing data. If that still causes a complete refresh, you'll have to compare the difference between two arrays to determine the difference between the current data and newly fetched data, and use the insert, delete and update methods as described in the docs to alter just the changed data. However, this may still may result in a complete refresh.
You would use AJAX (from JS) to request updated data from a PHP script. The data gets returned to your JS. It's probably easiest to send/receive data in JSON format via jQuery.getJSON.
There's no need to recreate the chart or even reapply the whole data. The AnyStock API provides all you need to update a part of the data. The series will be updated automatically.
For this purpose, you can use addData() function. It replaces all rows with duplicating keys by the last seen row with that key. It means that new points will be added to the table, points with already existing keys in the table will be overridden.
So, all you need is to manage keys and apply points according to your mapping. For details, check the following sample, that simulates exactly what you need - https://playground.anychart.com/Cplq7KMd
Whenever I've looked into how to email a chart, all the answers involve some variation on using the getAs function to save the chart as an image and then either inlining it or attaching it to the email. But I'm struggling to save the chart as an image in order to attach it. When I run the following code:
var chart = demandLastWeekSheet.getCharts().getAs("image/png");
I get this error:
TypeError: demandLastWeekSheet.getCharts(...).getAs is not a function (line 8, file "Code")
In fact, I get the same error if I try .getBlob(), .modify() or any other functions from here: https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart.html
Surely these functions have not been deprecated? Am I doing something wrong/stupid? New to the world of apps script, any pointers welcome! Sorry also if this is a badly phrased question, also I am new to stack overflow :)
Any suggestions??
getCharts() returns EmbeddedChart[]. In your script, the method of getAs is used for an array. I think that this is the reason of your issue. In order to retrieve the blob of the chart using the method of getAs, please modify as follows.
From:
var chart = demandLastWeekSheet.getCharts().getAs("image/png");
To:
var chart = demandLastWeekSheet.getCharts()[0].getAs("image/png");
In this modification, the 1st chart in the sheet of demandLastWeekSheet is retrieved. If you want to retrieve the 2nd chart, please modify from [0] to [1].
Reference:
getCharts()
my code:
function d3_chart() {
// sample data array
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data("./extra/acc.csv", {"filetype": "csv"}) // data to use with the visualization
.type("line") // visualization type
.y("x") // key to use for y-axis
.x("timestamp") // key to use for x-axis
.draw() // finally, draw the visualization!
}
my csv:
timestamp,x,y,z
0,2019-02-28 12:20:19.631,1.072,-0.153,10.113
1,2019-02-28 12:20:19.731,1.072,-0.153,10.419
2,2019-02-28 12:20:19.831,1.072,-0.153,9.96
3,2019-02-28 12:20:19.931,1.072,-0.153,10.113
4,2019-02-28 12:20:20.031,1.072,-0.153,10.113
5,2019-02-28 12:20:20.132,1.225,-0.153,9.96
6,2019-02-28 12:20:20.231,1.225,-0.153,9.96
7,2019-02-28 12:20:20.331,1.225,-0.153,9.96
8,2019-02-28 12:20:20.431,0.919,-0.306,9.5
9,2019-02-28 12:20:20.531,0.919,0.459,9.807
10,2019-02-28 12:20:20.631,1.225,0.153,10.113
11,2019-02-28 12:20:20.731,1.379,-1.992,10.113
12,2019-02-28 12:20:20.831,1.838,-0.306,9.653
13,2019-02-28 12:20:20.931,0.153,0.766,10.113
14,2019-02-28 12:20:21.032,0.459,1.532,10.266
15,2019-02-28 12:20:21.133,1.072,0.0,9.96
I just got getting message:
No Data Available
What is wrong? I don't find any example in internet with csv loading via this library
Or something know how graph chart from csv via general D3 with simple example?
d3plus seems to be using v3.5.15 of d3.js. Regardless of that, you will need to tell d3plus of how to load the data. Reading the API documentation it seems you will have to load the data using
d3plus.dataLoad(path, [formatter], [key], [callback]) as explained here.
Alternatively, you can use d3.js to parse your csv file and pass it as the data. To do this you can use the
d3.csv.parse(string[, accessor]) as provided in the d3.js CSV API.
Keep in mind in both cases you will need to format your timestamps in the correct time format (For d3.js Time Format API doc), for you to be able to use the time scales. Also at least for d3.js when the data is parsed from CSV all values are string values and hence you will need to change the type of the values using an type conversion function. You can read more about this in a great guide on how to read data by Learnjsdata (d3.js v3, or d3.js v5)
There are several examples out there for d3.js v3 on importing the data for processing which may be a better option overall. Also consider d3plus has not got a github commit in over a year so the library may not be well supported.
I hope this helps and at least gives you a start. If you need more help please leave a comment below.
I'm working with ChartJS to create charts with inputs from the user. It works fine showing the results for more than one dataset, but when I post the data with Javascript using JSON I get this error "cyclic object value". I've been not able to find an answer here, so I'm going to try to explain the issue the best I can.
This is the JS object (myChart.data.datasets) I'm posting, with two datasets from ChartJS:
Then I have a save() function which post that info (working fine for just one dataset) once the chart is done.
function save() {
let data = {
datasets: myChart.data.datasets
};
$.post('/save',
{
savedData: JSON.stringify(data),
color: document.getElementById("color").value,
...
}
)
}
I have no idea what's the cyclic object here, but I know the problem is with the content of myChart.data.datasets being posted. I've used some of the filters from other similar questions, but all them makes some of the data to be lost.
I use the same object to display the chart, which works perfectly with more than one dataset. The problem just happens when posting the data.
Any ideas about what it might be happening? Truly appreciate it, thanks!
This wasn't trivial at all. As many questions & answers regarding cyclic objects in JSON are posted, none of them are very especific about what the solution is. For example, those which use the replacer parameter of JSON.stringify() don't work at all (at least in this case), as the data will be loss.
So, for me the solution was dojox.json.href from the Dojo javascript library. Here's some documentation.
It's not the whole thing, but here's some code in case someone need it. First you serialize the object:
require(["dojox/json/ref"], function(){
let data = {
datasets: dojox.json.ref.toJson(...)
}
$.post('/save',
...
});
And then you deserialize it:
require(["dojox/json/ref"], function(){
data = dojox.json.ref.fromJson(...);
});
You can import the library just like this:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>
This is the only way I've been capable to post the JSON object without loosing data.
Hope it helps!
Problem,
I want to display the pie chart using the dynamic data from API but it does not work at all. Where as if i have a hard coded data it works perfectly fine.
I have created a Plunker
<nvd3-pie-chart
data="exampleDataPieChart"
id="toolTipExample2"
x="xFunction()"
y="yFunction()"
width="150"
tooltips="true">
</nvd3-pie-chart>
http://plnkr.co/edit/Ve9X22X7RAuRGpA74tiB?p=preview
I am using github API and want to draw the pie chart for the languages used in the user repository
Please have a look and let me know where i am doing wrong
Thanks
Plunkr
2 things: your JSON format doesn't match exampleDataPieChart, as well as AngularJS doesn't know when to run $scope.$apply() internally.
Fix #1: Match the formats
var exampleDataPieChart = [{"key":"One","y":5},{"key":"Two","y":2},{"key":"Seven","y":9}]
vs.
var collectedData = [{"key":["JavaScript","CSS"],"y":[142531,205009]}]
Fix #2: Let AngularJS know you've updated data by creating a local var data then once its' ready, trigger $scope.$apply() by running $scope.collectedData = data.