javascript - d3js throwing following error d3.v3.min.js:1 Uncaught TypeError: t.slice is not a function -
i trying pass data (stock infomration) flask d3js .
following code. , able see when select different stocks, can see data passed flask html page using console.log function. know flask code works. beginner in java scripts. have hacked code different sources.
flask code:
from flask import flask, render_template, request, jsonify import os import json bokeh.plotting import figure bokeh.resources import cdn bokeh.embed import file_html, components import pandas pd app = flask(__name__) files_list = os.listdir("/users/kpatel/desktop/test2/data") @app.route('/') def index(): return render_template('index.html', files_list=files_list) @app.route('/stocks') def stocks(): = request.args.get('a', 0, type=str) data_df = pd.read_csv("/users/kpatel/desktop/test2/data/"+a) data_df["date"] = pd.to_datetime(data_df['date'], format='%y-%m-%d %h:%m:%s.%f') data_df.drop('date', axis=1, inplace=true) data = data_df.to_json(orient="records") return data if __name__ == '__main__': app.run(debug=true) now issue occurs not able see image in html page. following code creates space, not image.
<!doctype html> <html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <script type=text/javascript> $(document).ready(function(){ $("#stocks").change(function(){ $.getjson('/stocks', { a: $(this).val() }, function(data) { var data = {{ data|safe }} draw(data) $("#result").text(data.result); }); return false; console.log(); }); }); </script> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispedges; } .x.axis path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style> </head> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var margin = {top: 20, right: 80, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var parsedate = d3.time.format("%y%m%d").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.category10(); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.temperature); }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); function draw(data) { color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); data.foreach(function(d) { d.date = parsedate(d.date); }); var cities = color.domain().map(function(name) { return { name: name, values: data.map(function(d) { return {date: d.date, price: +d[name]}; }) }; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([ d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.price; }); }), d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.price; }); }) ]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("price ($)"); var city = svg.selectall(".city") .data(cities) .enter().append("g") .attr("class", "city"); city.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return color(d.name); }); city.append("text") .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.price) + ")"; }) .attr("x", 3) .attr("dy", ".35em") .text(function(d) { return d.name; }); }; </script> <div class="container"> <div class="header"> <h3 class="text-muted">how manage json requests</h3> </div> <hr/> <div> <select id="stocks" class="target"> {% list_ in files_list %} <option value={{list_}} >{{list_}}</option> {% endfor %} </select> </div> <div> <p> <span id="result">?</span> </div> </div> </body> </html> error follows:
d3.v3.min.js:1 uncaught typeerror: t.slice not functionjn @ d3.v3.min.js:1e @ d3.v3.min.js:1t.parse @ d3.v3.min.js:1(anonymous function) @ (index):100draw @ (index):99(anonymous function) @ (index):17c @ jquery.min.js:3p.firewith @ jquery.min.js:3k @ jquery.min.js:5r @ jquery.min.js:5
what issue here?
Comments
Post a Comment