I have some charts that are created client-side using Javascript. I would like them to use data queried and calculated server-side in my .net codebehind.
Each chart only needs passed 2 numbers, and I suppose a third variable (its name).
This is proving harder than I expected as I haven't found a working answer by googling?
I know I could create some hidden values on the page, but since the chart drawing script is in the head of the document surely it would try to create the charts before reading these values
If you are using ASP.NET MVC and Razor, you could use the following method
1. Calculate the needed values for the charts in code behind and assign it to model properties.
2. Put Razor code to render chart variables above the chart drawing script.
<!-- Render chart variables -->
<script type="text/javascript">
var chartVariable1 = #Html.Raw(#Model.ChartVariable1);
</script>
<!-- Chart drawing script -->
Related
I have read through this question:
What's the command to "reset" a bokeh plot?
Which is close to what I'm trying to do. Except I'm trying to use an HTML button and have the JavaScript reset the bokeh plot, rather than creating a button in Python and tying the JS Callback to that python button. How can I pass the reference of the bokeh plot up to the javascript?
If you have plot with a glyph in Python like this:
p = figure()
renderer = p.line(x=[1,2], y=[1,2], name='lines')
Then you can access the renderer model in JavaScript as follows:
renderer = Bokeh.documents[0].get_model_by_name('lines')
You can do it in Bokeh callbacks as well as in any 3rd party JS libraries you are using in your Bokeh app.
However, if you want just to reset the plot using the ResetTool you could do so in JS just by clicking on the ResetTool icon in the toolbar and without referencing to plot model like this:
reset_btn = document.getElementsByClassName('bk-tool-icon-reset')
reset_btn[0].click()
The above works for Bokeh v1.3.0 and is not guaranteed to work in the future versions as Bokeh CSS library can change.
Bokeh populates a global Bokeh.index structure with all the views that are renderered on a page, and an Bokeh.documents structure with all the documents on a page. You will need to sift through one of those to find the Bokeh model that you are looking for. Typically setting name on the Python side will make this easier, so that you can search for the object with that name value.
In a ASP.NET Core MVC project I use multiple views with JQuery's DataTables objects. Previously, all these tables were initialized with a little javascript below each View (this code was at the bottom of 10-15 views):
<script>
$(document).ready(function () {
$('#table').DataTable();
});
</script>
Now, we want to change some of the settings for the whole project, so I want to get rid of all the seperate code snippets and initialize the DataTable object from one javascript. I came up with a solution, but I want to know whether this is the best way of doing it, and if not, what the best practice consists of.
I created one small javascript file, that is loaded in my _layout.chshtml file, which checks if there is a html table element (auto-generated by the razor makeup in .net core mvc):
$(document).ready(function () {
// This snippet checks whether the html of a view contains
// a #table element (id tag).
if ($('#table').length) {
$('#table').DataTable({
"pageLength": 50
// other settings
});
}
});
Is this the correct way of doing this?
Thanks for any help!
I think the way you are doing it is correct but first
you should consider whether you need this in all you pages or not?
because adding it to your layout page it will be loaded everytime any page is requested which adds at least 100kb-1MB to your page.
second you don't need the if($(..).length) JQuery will do it automatically
my suggestion for such cases is to first use a class not an ID then put your JS code here in the layout page but don't load your scripts here, load them on the pages where they are used there and before initializing check if DataTable is loaded or not.
I have a few JSON files I can use with my force directed graph and I wish to choose which one I run.
I can just change the name of what JSON is read in the HTML file
<script type="text/javascript" src="networkA.json"></script>
to
<script type="text/javascript" src="networkB.json"></script>
but I wish to do this dynamically.
So when I first load the SVG my choice of data pops up and I get to choose which one I want the force directed graph to run off.
Also, wish to change this when its running, but knowing how to do the start up will probably answer that question.
Here is a perfect demo that can change dynamically:
'http://projects.flowingdata.com/tut/interactive_network_demo/'
but I wish to do something similar on a force directed graph
Use d3.json to load the data dynamically based on UI selection, as documented here:
https://github.com/mbostock/d3/wiki/Requests
I´m do several graphic template for each type that i could use after.
All the graphs are jsp and share the characteristic that use json for the data. some graphs are updated dynamically with a timer.
My idea was to make a jsp container that i can invoke the graphs to use, but dont work well and found two problems.
The function that is used to invoke is this:
<script class="code" type="text/javascript" language="javascript">
$(document).ready(function(){
$('#result1').load('Bars1.jsp');
//$('#result2').load('Bars2.jsp');
$('#result3').load('./../Area/Area1.jsp')
});
</script>
My first problem is that the graph only works when the path of the container is the same as any of the graphics I invoke. Also works when I invoke a graph that is in another different route. But when refresh sometimes one or two graphs not appear.
But if the path to the container dont have other jsp graphic doesn't work. example
<script class="code" type="text/javascript" language="javascript">
$(document).ready(function(){
$('#result1').load('/Bars/Bars1.jsp');
$('#result2').load('/Area/Area1.jsp');
});
</script>
i´ve done everithing, use the libraries in the container, use libraries in each graph with the path to the container and dont work.
Help please. Regards.
SHORT: my python code generates a webpage with a table. i'm considering rewriting it to generate a js file instead, that holds the table contents in an array ... and then let the table be generated client-side. I am not sure of the pros and cons. Anyone care to offer their experience/insight? Are there other solutions?
LONG: the web page contains a single table and an embedded gmap. the table is a set of locations with several columns of location-stats and also two navigation columns. one nav column consists of onclicks that will recenter embedded gmap to the lat,lon of the location. the other nav column consists of hrefs that open a new window with a gmap centered on the lat,lon.
Until recently, my python code would do some number crunching on a list of files, and then generate the html file. also i wrote a js file that keeps the webpage liquid upon browser window resizing.
Recently, I modified my python code so that it:
placed the lat,lon info in a custom attribute of the tr elements
no longer produced the nav column tds
and then wrote a js function that
loops through the trs onLoad
reads the lat,lon from the custom attribute
inserts the nav tds
fwiw, this reduced the size of the html file by 70% while increasing the js by 10%.
ok, so now I am debating if I should go all the way and write my python code to generate 2 files
an essentially abstract html file
a js file containing a js array of the locations and their stats
If your API can output a JSON document with your data, you gain significant flexibility and future-proofing. This might even be something your users will want to access directly for their own external consumption. And of course your JS code can easily generate a table from this data.
However nobody here can tell you whether this is worth doing or not, as that depends entirely on the scope of your project and opportunity cost of time spent re-architecting.