I would like to add dynamic data to a chart JS Horizontal Bar Graph,
How would I implement this on a data that is coming from mysql
data: [
['2022-01-01', '2022-01-15'], <<<<< this one how would I able to replace it with my own data
]
data
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);
This is the url json data
[{"call_time":"0","total_inc_traffic":"1363.10","total_out_traffic":"88.70"},
{"call_time":"1","total_inc_traffic":"479.57","total_out_traffic":"36.98"},
{"call_time":"2","total_inc_traffic":"239.57","total_out_traffic":"13.43"},
{"call_time":"3","total_inc_traffic":"190.28","total_out_traffic":"8.20"},
{"call_time":"4","total_inc_traffic":"223.80","total_out_traffic":"0.00"},
{"call_time":"5","total_inc_traffic":"158.87","total_out_traffic":"19.58"},
{"call_time":"6","total_inc_traffic":"27.52","total_out_traffic":"36.18"},
{"call_time":"7","total_inc_traffic":"47.70","total_out_traffic":"69.57"},
{"call_time":"8","total_inc_traffic":"2234.35","total_out_traffic":"137.60"},
{"call_time":"9","total_inc_traffic":"150.67","total_out_traffic":"162.07"},
{"call_time":"10","total_inc_traffic":"4497.05","total_out_traffic":"267.32"},
{"call_time":"11","total_inc_traffic":"5049.87","total_out_traffic":"242.42"},
{"call_time":"12","total_inc_traffic":"5227.67","total_out_traffic":"286.88"},
{"call_time":"13","total_inc_traffic":"3384.30","total_out_traffic":"360.88"},
{"call_time":"14","total_inc_traffic":"3650.73","total_out_traffic":"328.28"}]
How to show this json data in a grouped bar graph. The bar graph can be any bar graph. Please help
How can I retrieve data from Parse.com through javascript or API and display it with amcharts.js or highcharts.js?
Or are there any other chart js I can try?
Thanks in advance.
amCharts wrote a tutorial how to load external data, if you receive an array of objects you can pass it directly to the chart instance to create it or call "validateData" to apply the data changes.
var chart = AmCharts.makeChart("chartdiv", { ... });
...
chart.dataProvider = newDataArray;
chart.validateData();
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.
i wont to create this chart in extjs 4
http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line
or any way to implement Google chart in extjs4
Extjs 4 have chart library . You need to create a
service that will return XML or json. Create store and add a store to graph.
In order to take data from yahoo (not from Google yet) I created component in C#
You can read it in my blog
http://gregnozik.blogspot.com/2011/09/yahoo-finance-api.html
After you create a store you create a chart
var lineChart = new Ext.chart.LineChart({
store: store,
xField: 'framework',
yField: 'users'
});