Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ASP.NET + SandDance: examples? #121

Closed
win32nipuh opened this issue Oct 21, 2019 · 6 comments
Closed

ASP.NET + SandDance: examples? #121

win32nipuh opened this issue Oct 21, 2019 · 6 comments

Comments

@win32nipuh
Copy link

I did not found the examples to see how to use SandDance in ASP.NET, ASP.NET Core applications.
I am sure it will be useful.
@danmarshall
Copy link
Contributor

Hi @win32nipuh , you can take a look at the export to html feature, and use the html as a template. In the SandDance App, click the DataBrowser tab on the left. The export button is at the bottom.
I have copied an example below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SandDance - Titanic%20%2844%29</title>
    <link rel="stylesheet" type="text/css"
        href="https://unpkg.com/@msrvida/sanddance-embed@1/dist/css/sanddance-embed.css" />
    <link rel="stylesheet" type="text/css"
        href="https://unpkg.com/@msrvida/sanddance-explorer@1/dist/css/sanddance-explorer.css" />
</head>

<body>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/deck.gl@6/deckgl.min.js"></script>
    <script src="https://unpkg.com/vega@4/build/vega.min.js"></script>
    <script src="https://unpkg.com/office-ui-fabric-react@6.204.4/dist/office-ui-fabric-react.js"></script>
    <script src="https://unpkg.com/@msrvida/sanddance-explorer@1/dist/umd/sanddance-explorer.js"></script>
    <script src="https://unpkg.com/@msrvida/sanddance-embed@1/dist/umd/sanddance-embed.js"></script>

    <div id="app"></div>

    <pre id='csv-data' style='display:none'>Name,Class,Joined,Job,TicketCost,Age,Gender,Survived,Department
"MINAHAN, Mrs Lillian E.",1st Class Passenger,Queenstown,,90,37,Female,True,
"MINAHAN, Miss Daisy E.",1st Class Passenger,Queenstown,,90,33,Female,True,
"KEANE, Miss Nora Agnes",2nd Class Passenger,Queenstown,,12.35,46,Female,True,
"SLAYTER, Miss Hilda Mary",2nd Class Passenger,Queenstown,,12.35,30,Female,True,
"BRADLEY, Miss Bridget Delia",3rd Class Passenger,Queenstown,,7.725,22,Female,True,
"BUCKLEY, Mr Daniel",3rd Class Passenger,Queenstown,Farm Labourer,7.820833333,21,Male,True,
"SHINE, Miss Ellen",3rd Class Passenger,Queenstown,,7.829166667,20,Female,True,
"SMYTH, Miss Julia",3rd Class Passenger,Queenstown,,7.733333333,17,Female,True,</pre>    
    <script>SandDanceEmbed.load(Object.assign({rawText: document.getElementById('csv-data').innerText}, {"type":"csv","displayName":"Titanic (44)"}))</script>

</body>

</html>

@win32nipuh
Copy link
Author

Ok, thank you, will try.

@win32nipuh
Copy link
Author

Thanks, I see, it works.
Only the question how to load a data via ajax request.
I have already asked Vega developers vega/vega#2097

@danmarshall
Copy link
Contributor

The SandDanceEmbed.load function will take an array of objects, or a DataFile structure. The DataFile structure can optionally take a dataUrl property. In the example above, we used the rawText property.

So if you need to make your own ajax request, once you have your response, you can either pass the text or an array that has been parsed.

@ZedZipDev
Copy link

Thanx, I need to execute ajax request->ASP.NET controller->database. I.e. finally to display the chart based on database query.

@ZedZipDev ZedZipDev mentioned this issue Oct 29, 2019
Closed
@danmarshall danmarshall mentioned this issue Jan 3, 2020
Closed
@meenakshi-dhanani
Copy link

Hi @win32nipuh , you can take a look at the export to html feature, and use the html as a template. In the SandDance App, click the DataBrowser tab on the left. The export button is at the bottom.
I have copied an example below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SandDance - Titanic%20%2844%29</title>
    <link rel="stylesheet" type="text/css"
        href="https://unpkg.com/@msrvida/sanddance-embed@1/dist/css/sanddance-embed.css" />
    <link rel="stylesheet" type="text/css"
        href="https://unpkg.com/@msrvida/sanddance-explorer@1/dist/css/sanddance-explorer.css" />
</head>

<body>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/deck.gl@6/deckgl.min.js"></script>
    <script src="https://unpkg.com/vega@4/build/vega.min.js"></script>
    <script src="https://unpkg.com/office-ui-fabric-react@6.204.4/dist/office-ui-fabric-react.js"></script>
    <script src="https://unpkg.com/@msrvida/sanddance-explorer@1/dist/umd/sanddance-explorer.js"></script>
    <script src="https://unpkg.com/@msrvida/sanddance-embed@1/dist/umd/sanddance-embed.js"></script>

    <div id="app"></div>

    <pre id='csv-data' style='display:none'>Name,Class,Joined,Job,TicketCost,Age,Gender,Survived,Department
"MINAHAN, Mrs Lillian E.",1st Class Passenger,Queenstown,,90,37,Female,True,
"MINAHAN, Miss Daisy E.",1st Class Passenger,Queenstown,,90,33,Female,True,
"KEANE, Miss Nora Agnes",2nd Class Passenger,Queenstown,,12.35,46,Female,True,
"SLAYTER, Miss Hilda Mary",2nd Class Passenger,Queenstown,,12.35,30,Female,True,
"BRADLEY, Miss Bridget Delia",3rd Class Passenger,Queenstown,,7.725,22,Female,True,
"BUCKLEY, Mr Daniel",3rd Class Passenger,Queenstown,Farm Labourer,7.820833333,21,Male,True,
"SHINE, Miss Ellen",3rd Class Passenger,Queenstown,,7.829166667,20,Female,True,
"SMYTH, Miss Julia",3rd Class Passenger,Queenstown,,7.733333333,17,Female,True,</pre>    
    <script>SandDanceEmbed.load(Object.assign({rawText: document.getElementById('csv-data').innerText}, {"type":"csv","displayName":"Titanic (44)"}))</script>

</body>

</html>

This works amazingly well. Thank you so much.
I have added a file picker to choose a csv file and let that csv be visualized with SandDance.

You could check it out:
https://codesandbox.io/s/elastic-wave-j2v03?fontsize=14&hidenavigation=1&theme=dark

@danmarshall danmarshall mentioned this issue May 21, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@win32nipuh @danmarshall @meenakshi-dhanani @ZedZipDev