In Google visualization ChartWrapper class, the code to draw a chart (bar chart, pie chart, etc) is as follows:
wrapper = new google.visualization.ChartWrapper({
dataTable: dataTable.toJSON(),
chartType: chartType,
options: options
});
console.log("Wrapper: " + wrapper.toJSON());
console.log(" ");
wrapper.draw(result[0]);
I am curious if there's an equivalent way of doing this using Highcharts where instead of calling new google.visualization.chartWrapper(...), we can just call something like new highcharts.chartWrapper(...). The options can include the container div id where the chart will be drawn.
Even if there is no way to do, any suggestions how I should be go about doing something similar to this?
As far as I know, in dataTable I can specify my data series in JSON format. In chartType, I can specify bar, column, pie, etc. Based on the highcharts example I saw, I can even write a service that generates a HTML file on the server side as shown here -> http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/ and send back a response.
But what I don't know is how do I tell Highcharts to insert the chart right at container id specified in my options on the same page.
In this example, for instance, wrapper is just a json representation of the chart (which I can generate). What I am not sure is how do I convert that json representation to a highcharts map that gets inserted where I want on the same page.
Sorry, if this question seems complicated. I can clarify if you need additional information.
Related
I was working with trading view(https://www.tradingview.com/chart/?symbol=NASDAQ:AAPL&source=unauth_header&feature=launch_chart) charting library, It shows the data for the currency pair as intended.
I have looked into the following guideline
tradingview charting library
Now what I am looking for is to plot the chart with my own data. Is there any widget or any way I can provide my own data to tradingview and it will create the candlestick chart with the data provided.
yes you can feed your data with custom DataFeed.
you should set datafeed property of your widgetOptions like this
let options={
... other options
datafeed:new UDFCompatibleDatafeed('url api url'),
... other options
}
_chart = new widget(this.options);
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
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 trying to use this widget to display 3 sets of data. the first set should be shown as a bar chart, and the rest can be displayed as lines on the chart.
From what I've read, Rickshaw Graphs should be able to do this by using the 'multi' renderer but I can't get that render to work at all.
Here is the ruby Array data object I'm sending, formatted to make it more readable:
iterationData:
[
{
:name=>"Delivered",
:renderer=>"bar",
:data=> [
{:x=>1, :y=>0},
{:x=>2, :y=>4},
{:x=>3, :y=>4},
{:x=>4, :y=>11}
]
},
{
:name=>"Estimated",
:renderer=>"line",
:data=> [
{:x=>1, :y=>2.7},
{:x=>2, :y=>5.4},
{:x=>3, :y=>8.10},
{:x=>4, :y=>10.8},
{:x=>5, :y=>13.5},
{:x=>6, :y=>16.2},
{:x=>7, :y=>18.9},
{:x=>8, :y=>21.59},
{:x=>9, :y=>24.29},
{:x=>10, :y=>26.99}
]
},
{
:name=>"Outlook",
:renderer=>"line",
:data=> [
{:x=>1, :y=>2.75},
{:x=>2, :y=>5.5},
{:x=>3, :y=>8.25},
{:x=>4, :y=>11.0},
{:x=>5, :y=>13.75},
{:x=>6, :y=>16.5},
{:x=>7, :y=>19.25},
{:x=>8, :y=>22.0},
{:x=>9, :y=>24.75},
{:x=>10, :y=>27.5}
]
}
]
and here is my calls to show the graph and to send data to the graph:
send_event in the ruby job:
send_event("#{projectID}-burnup-chart", {:series => iterationData})
dashboard.erb code:
<div data-id="23405488441-burnup-chart" data-view="Rickshawgraph" style="background-color:#ff9618" data-legend=true data-unstack=true data-renderer="bar" data-color-scheme="compliment" data-max="40"></div>
This just displays a blank widget with an orange background. The graph hasn't rendered at all. Can anyone suggest how I might achieve this? Or has anyone used a different widget to create a working burn up chart like this that they might be able to suggest?
I believe what you are trying to do is impossible because of the way that this widget marshals parameters from Dashing to Rickshaw.
Specifically, these complicated lines of code:
https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L193-L253
I'm not sure if Rickshaw gets mad if you send it extra data, but the author of the widget seems very concerned about sending it incorrectly. Essentially, you are falling into this case:
https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L237-L245
You might be able to get it to work if you added a line to that else if, like this:
else if series?.data?
# Rickshaw data. Need to clone, otherwise we could end up with multiple graphs sharing
# the same data, and Rickshaw really doesn't like that.
answer = {
renderer: series.renderer # add your renderer
name: series.name
data: series.data
color: series.color
stroke: series.stroke
}
Or better yet, just use jQuery Extend to make a new copy:
answer = $.extend(true, {}, series);
Let me know how it goes and I'll update my answer to assist if further problems arise.
I'm trying to create a pie chart with javascript that will allow users to click on a slice and "view what makes up that slice." If you've ever used mint.com you'll know what I mean - say you're viewing an expenses pie chart and you click the "Automobile" slice, then you see the slice expand into a new chart of Gas, Maintenance, etc.
To take this a step further, I'm dealing with a large amount of data, so being able to fetch (ajax) the new data when the slice is clicked would be a useful option as well (though I can probably get away without it).
Perhaps "nested", "multi-level" and "drill-down" are not the right terms because I've been searching all day and cannot seem to find a solution.
Does anyone know of a library for this? Thanks in advance!
I've implemented similar drilldown systems using the HighCharts point click event. Here's the rough syntax:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: myInitialDataArray, // make sure each data point has an id
point: {
events: {
click: function () {
$.post('/get/data/by/id/' + this.id, function(data) {
// you may need to format your data here
chart.series[0].setData(data);
});
}
}
}
}]
});
In this example, you define a click event that uses the point's id value (this.id) to perform an Ajax post to a URL. You then use the data from your post to re-bind the chart series.
Please note that each time you use the setData function to update the chart, each data point needs to have an id value in order for the drilldown to continue.
Hope this helps!
Try psd3 pie chart library
Demo - https://pshivale.github.io/psd3
Source - https://github.com/pshivale/psd3
It supports multi-level pie charts, donut charts and sunburst charts. It also supports drilling down a pie slice by double clicking it.