I am trying to learn some chart rendering techniques for front end web development. There is a d3 tutorial where the javascript function can be edited on the website (great for learning purposes) and I am attempting to use my own data instead. In the tutorial website I am attempting to modify the rawgit
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",
with my own rawgit dataset:
//Read the data
d3.csv("https://raw.githubusercontent.com/bbartling/Data/master/City%20Rec%20Center%202%20kW%202019.csv",
One thing to note is my data is hourly and the tutorial data is daily.. So would I need to modify anything with the time parse function?
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
I am trying to follow this learn javascript site that talks about timeParse but not having anyluck... Could anyone give me a tip?
Also to mention my dataset the timestamp/index column is Date not date and the data is kW not value... Do I need to modify the tutorial code to accommodate for this as well?
I think I actually figured this out. At least I got the chart to render on the tutorial site... Changing the timeParse function to this:
//Read the data
d3.csv("https://raw.githubusercontent.com/bbartling/Data/master/City%20Rec%20Center%202%20kW%202019.csv",
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%m/%d/%Y %H:%M")(d.Date), value : d.kW }
},
Related
Apologies if this seems basic to some, but I'm new to JS/node.js/JSON and still finding my way. I've searched this forum for an hour but cannot find a specific solution.
I have a basic website setup running of a local Node.js server along with 2x JSON data files with information about 32x local suburbs.
An example of an API GET request URL on the site would be:
.../api/b?field=HECTARES
The structure of the JSON files are like:
JSON Structure
In the JSON file there are 32x Features (suburbs), each with it's own list of Properties as shown above. What I am trying to do is use the API 'field' query to push all the HECTARES values each of the 32x Features into a single output variable. The code below is an example of how far I have got:
var fieldStats = [];
var fieldQ = req.query['field'];
for (i in suburbs.features) {
x = suburbs.features[i].properties.HECTARES;
fieldStats.push(x);
}
As you can see in the above "HECTARES" is hard-coded - I need to be able to pass the 'fieldQ' variable to this code but have no idea how to.
Advice appreciated!
Exactly the same syntax you are using just above:
suburbs.features[i].properties[fieldQ];
Hello everyone i'm a beginner in highstock
i want to work with this to convert my data to graph
then i find some problem in this example of Lazy Loading
i have much question :
need to change this highstock to my data just use a simple data
like this :
[883612800000,3.41,5.01,3.37,4.58],
[886291200000,4.62,5.97,4.34,5.91],
[888710400000,5.89,7.01,5.40,6.88],
[891388800000,6.87,7.41,6.17,6.85],
[893980800000,6.88,7.91,6.42,6.68],
[896659200000,6.61,7.24,6.39,7.16],
[899251200000,7.22,9.54,7.12,8.67],
[901929600000,8.56,10.92,7.75,7.80],
[904608000000,7.84,10.05,7.65,9.52],
[907200000000,9.19,10.33,7.12,9.28],
[909878400000,9.39,9.85,7.94,7.99],
[912470400000,8.00,10.37,7.90,10.23],
[915148800000,10.53,11.82,9.27,10.29],
[917827200000,10.42,10.48,8.63,8.71]`
then in the same example i want a method how to removed the zoom and the scroll in the bottom
and in last
need to sample exampling about this function
function afterSetExtremes(e) {
var chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
'&end=' + Math.round(e.max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
** in the end thanks for all and sorry for my bad english any confused ask in commentaire **
You cannot load form filesystem (security reasons in browsers) so you need to have a webserver. Please check our article how to load data and process
I am trying to embed a bokeh plot in a webpage served by a simple Flask app, using the embed.autoload_server function that I picked up from looking over the bokeh embed examples on github. Everything seems to be working as expected on the python side of things, but the page renders without any data (even though the data is within the JS plot object). I do see the 5 bokeh plot manipulation buttons but I do not see the actual plot. After turning on the JS console I see that the i variable is being returned as undefined in the following statement (line 23512, bokeh.js):
i = this.get('dimension');
As a result, ranges[i] is also undefined, which is the error I'm getting in the console.
I can navigate the browser to the actual plot json and I see all the data as expected there, which is why I turned to the JS console to troubleshoot.
Any ideas would be very appreciated, my JS is pretty rusty at the moment. Is there a relationship between the attributes of the python "plot" objects and the JS "plot" objects? It seems like this is just an issue of my front end object missing the "dimension" attribute.
In response to the question, here is the code, it is pretty much lifted directly from the candlestick example code, but that was from a pull from several weeks ago, so it very well could be dated. I pulled again since and didn't revisit this code since there were no issues creating the plot data.
def candlestick():
store = pd.HDFStore('../data/dt_metastock.h5')
keys = [key for key in store.keys() if 'daily' in key]
df = store[keys[0]][:800]
#df['date'] = pd.to_datetime(df['date'])
mids = (df.open + df.close)/2
spans = abs(df.close-df.open)
inc = df.close > df.open
dec = df.open > df.close
w = 12*60*60*1000 # half day in ms
output_server("candlestick")
figure(tools="pan,wheel_zoom,box_zoom,reset,previewsave",
plot_width=1000, name="candlestick")
hold()
segment(df.idx, df.high, df.idx, df.low, color='black')
w = .5
rect(df.idx[inc].values, mids[inc], w, spans[inc], fill_color="#D5E1DD", line_color="black")
rect(df.idx[dec].values, mids[dec], w, spans[dec], fill_color="#F2583E", line_color="black")
curplot().title = keys[0]
xaxis().major_label_orientation = pi/4
grid().grid_line_alpha=0.3
tag = embed.autoload_server(curplot(), cursession())
return tag
Can you post the code of your plot? Recently, we have merged a new layout system and it seems to me that you are probably using and old way to set up the axes in your plot...
consider this fiddle link FIDDLE. In this example I would like to use a csv file to load data at line no.33-[data.csv] and data at line no.158-[data1.csv]. I want to use two separate csv files. I tried using a csv file for data at line no.33 with this code
d3.csv("data.csv", function(csvData) {
csvData.forEach(function (d,i) {
data[i] = {
first: +d.first,
second: +d.second
}
});
console.log(data);
I was able to get an output but the charts had moved far away from each other with the following errors : Unexpected value NaN parsing cy attribute. How to load the two datasets in an efficient way using two separate csv files ?
Here is hopefully the final plunker in this ever-growing project :) (A lot of the csv work here has been guided by the great Lars...as usual, many kudos to him.)
Updated plunker with data on top chart coming from datam.csv.
I am new to JavaScript and D3 and cannot figure out how to allow users to upload a csv file and displaying a scatterplot using d3. I am using the tag to allow user to select file. But I am not sure on what the next step should be. Is there a way to read the csv file and store it's contents in a d3 array and then displaying a graph using that array ??
Thanks in advance
Look into the d3.csv function (https://github.com/mbostock/d3/wiki/CSV). Here is a simple example
//load up the example.csv file
d3.csv('example.csv',
function(data){
//this is an object, the contents of which should
//match your example.csv input file.
console.log(data);
// do more stuff with 'data' related to
// drawing the scatterplots.
//
//-----------------------
},
function(error, rows) {
console.log(rows);
};
);
There are a number of examples online showing you how to go from a data array to a scatterplot...it's a matter of modifying those examples to fit your specific data format.