wrobstory/bearcart

Wrong js and css paths

jlopezpena opened this issue · 6 comments

jlopezpena commented

I am trying a variation of the first example in the documentation, pointing the rickshaw js and css files at different locations (lib and css folders in my tree) as follows:

import bearcart
import pandas as pd

html_path = r'html/index.html'
data_path = r'html/data/data.json'
js_path = r'html/lib/rickshaw.min.js'
css_path = r'html/css/rickshaw.min.css'


#All of the following import code comes from Wes McKinney's book, Python
#for Data Analysis

import pandas.io.data as web

all_data = {}

for ticker in ['AAPL', 'GOOG']:
    all_data[ticker] = web.get_data_yahoo(ticker, '1/1/2010', '1/1/2013')

price = pd.DataFrame({tic: data['Adj Close']
                      for tic, data in all_data.iteritems()})

vis = bearcart.Chart(price)
vis.create_chart(html_path=html_path, data_path=data_path,
                 js_path=js_path, css_path=css_path)

The index.html and data.json files get created in the right locations, but the html source keeps looking for rickshaw js and css in the html root:

<!doctype>
<head>
  <link rel="stylesheet" href="rickshaw.min.css">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="rickshaw.min.js"></script>

<style>
body {
  font: 10px sans-serif;
}
#chart {
    float: left;
    margin-top: 70px;
          }
#y_axis {
   float: left;
   margin-top: 70px;
          }
#legend {
        float: left;
        margin-left: 15px;
        margin-top: 70px;
}
</style>
</head>
<body>

        <div id="y_axis"></div>
        <div id="chart"></div>
        <div id="legend"></div>


<script>

var palette = new Rickshaw.Color.Palette( {scheme: 'spectrum14'} );

d3.json('html/data/data.json', function(error, json) {

var graph = new Rickshaw.Graph( {
                element: document.querySelector("#chart"),
                min: 'auto',
                width: 750,
                height: 400,
                renderer: 'line',
                series: [
                         {name: 'AAPL',
                          color: palette.color(),
                          data: json[0].data},

                         {name: 'GOOG',
                          color: palette.color(),
                          data: json[1].data}
                          ]
                })

var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );



var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph,

} );

var legend = new Rickshaw.Graph.Legend( {
    graph: graph,
    element: document.getElementById('legend')

} );

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
    graph: graph,
    legend: legend
});

graph.render();

});


</script>

</body>
wrobstory commented

Yikes- good catch, thanks for posting the issue. Just fixed it in commit 1b6651f. Let me know if you have any other issues!

jlopezpena commented

Thanks for the quick fix!

There are still some path-related glitches. In my example before, my python script lives in the root, creates the html inside the html folder, the data in the html/data folder, but the urls inside the html file are wrong because they all have a prepended html/ which is not needed from the html file.

If I remove the html prefix from the data, lib and css paths, then files get created in the wrong place (corresponding folders from root, not from the html folder.

Am I making any sense? I can create a separate issue with a more detailed description if you want.

wrobstory commented

Re-opened!

Can you give a short snippet of example code that demonstrates what's breaking?

jlopezpena commented

Same example above, look at the line

d3.json('html/data/data.json', function(error, json)

the index.html file (which is already inside the html folder) is calling the relative path html/data/data.json which means is looking for the data file at html/html/data/data.json wrt my script root folder. If I change the js data path to
data_path = r'data/data.json'
then the file would be created in the wrong directory (or the command would fail because the directory does not exist).

A possible solution for this would be to provide a separate path variable, something like html_root which would be prefixed to the rest of the paths at file creation time, but not used inside the jinja template. I might try that out and send a PR if it works.

jlopezpena commented

I sent a PR with a quick fix (also corrected some docstring). With my changes this code works for me and puts everything in the right place:

import bearcart
import pandas as pd

html_path = r'index.html'
data_path = r'data/data.json'
js_path = r'lib/rickshaw.min.js'
css_path = r'css/rickshaw.min.css'
html_prefix = r'html'

#All of the following import code comes from Wes McKinney's book, Python
#for Data Analysis

import pandas.io.data as web

all_data = {}

for ticker in ['AAPL', 'GOOG']:
    all_data[ticker] = web.get_data_yahoo(ticker, '1/1/2010', '1/1/2013')

price = pd.DataFrame({tic: data['Adj Close']
                      for tic, data in all_data.iteritems()})

vis = bearcart.Chart(price)
vis.create_chart(html_path=html_path, data_path=data_path,
                 js_path=js_path, css_path=css_path, html_prefix=html_prefix)
wrobstory commented

Excellent- thank you! That seems like a very reasonable solution to the issue. I was trying to think of a way to cleanly write relative paths into the Jinja template, but all of my solutions felt messy. This wraps it up relatively neatly.