Razor foreach loop inside Javascript - javascript

I'm creating a google chart and I have now made it look like I want it to with amounts of lines/bars and multiple axises and so on, now I want to have dynamic data inside of it.
function drawVisualization()
{
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Day', 'KG', 'Average', 'peak'],
['1', 22000, 70, 90],
['2', 21000, 80, 87],
['3', 19000, 75, 79],
['4', 25000, 60, 88],
['5', 24000, 90, 95]
]);
So as of right now this is how the data is sent to the chart, 1,2,3,4,5 for hAxis and the rest for vAxis.
However I thought I could use a foreach in here and do something like this to return data:
#foreach (var c in db.Query(getWorkout))
{
['1', #c.kg, #c.rep, #c.sett];
}
The foreach actually works while no code is inside it so I guess the errors are all due to ['1', #c.kg, #c.rep, #c.sett]; this.
Anyone got any ideas of what to do? Would be tremendously thankful!

try following
#foreach (var c in db.Query(getWorkout))
{
<text>['1', #c.kg, #c.rep, #c.sett],</text>
}

I think it should work
first create an array in JavaScript
var dbData = [['Day', 'KG', 'Average', 'peak']];
then use razor #foreach to append data
#foreach (var c in db.Query(getWorkout))
{
dbData.push(['1', #c.kg, #c.rep, #c.sett]);
}
then
var data = google.visualization.arrayToDataTable(dbData);

Related

Dynamically change view column names in Google Charts

My data is as below
var data = google.visualization.arrayToDataTable([
['Date', 'A|36~Batman', 'A|37~Superman', 'A|38~Aquaman'],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
While plotting this chart in the graph, I want to show the label values split after the '~' sign i.e. (Batman, Superman, Aquaman). I need the values before the tilde during the OnClick event of my chart so I need those values in the data as my onclick code is as below
var col = chart.getSelection()[0]['column'];
var Id = data.getColumnLabel(col).substr(0, data.getColumnLabel(col).indexOf("~"));
So to fetch data, I need the Id values as well. I was able to loop the columns and modify the column label values, but I don't know the code to set the column label as new values. My code to loop is as below
var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
var ColumnName = view.getColumnLabel(i);
var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
// set new column name in the view
}
How to replace the old column name with the new column name?
use method --> setColumnLabel
however, this method does not exist on the view,
so you'll have to change the column label on the data table
since the view is based on the data table,
the view pick up the new label as well...
var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
var ColumnName = view.getColumnLabel(i);
var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
data.setColumnLabel(i, NewColumnName);
}
EDIT
instead of using the label to store two values,
take advantage of the properties available on the column.
var data = google.visualization.arrayToDataTable([
['Date', {id: 'A|36', label: 'Batman'}, {id: 'A|37', label: 'Superman'}, {id: 'A|38', label: 'Aquaman'}],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
then you can use methods --> getColumnId() & getColumnLabel()
if that isn't enough, you can provide your own custom properties...
var data = google.visualization.arrayToDataTable([
['Date', {id: '36', label: 'Batman', p: {category: 'A'}}, {id: '37', label: 'Superman', p: {category: 'A'}}, {id: '38', label: 'Aquaman', p: {category: 'A'}}],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
then use method --> getColumnProperty(1, 'category')

Using context variables as javascript parameters

I'm working on a project in Django, for part of it I'm trying to use Googles chart api, which uses a Javascript function to plot the graph. So what I'm trying to do is generate the graph data in my views.py and then pass the data through the context variables to the script. To test this I tried to do:
graphplot = [['Age', 'Weight'],[ 8, 12],[ 4, 5.5],[ 11, 14],[ 4, 5],[ 3, 3.5],[ 6.5, 7]]
context = {
"graphplot": graphplot,
}
in my views.py then I have:
var data = google.visualization.arrayToDataTable({{graphplot}});
in my template, however this doesn't seem to work.
When I do:
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
It does show the graph so I know it's not a problem with the JavaScript.
Any help would be appreciated
Try this, It should work.
var plot_data = {{graphplot}};
var data = google.visualization.arrayToDataTable(plot_data);

How to count and display the occurrence of a number in a json array of numbers

Please forgive me if this is a dumb or basic question but I have not been able to find a good solution. I have a json array of numbers:
[30, 37,34,56,76,87,54,34,2,4,2,5,5,3,4,3,4, 90]
I would like to count how many times each number occurs and use that data to produce a graph using d3js. How can I go about doing this? If there is a D3 method that does this, that would be great. But a javascript/jquery solution would do as well.
In plain Javascript:
var items = [30, 37, 34, 56, 76, 87, 54, 34, 2, 4, 2, 5, 5, 3, 4, 3, 4, 90],
histogram = items.reduce(function (r, a) {
r[a] = (r[a] || 0) + 1;
return r;
}, {});
document.write('<pre>' + JSON.stringify(histogram, 0, 4) + '</pre>');
For the graphing, check out c3. This can be easily done with something like this:
var chart = c3.generate({
data: {
x: 'x',
columns: [
numbers.unshift('x'),
occurrences.unshift('occurrences'),
],
type: 'bar'
} });
where numbers is an array of all distinct numbers and occurrences is an array of the numbers of time each occurs.
Demo

I want to use "PieChart", "ComboChart" and "Control"

I want to use "PieChart", "ComboChart" and "Control" in a such way that "Control" would be able to adjust "Pie" and "Combo". The problem starts when my Database in like this:
['Name', 'Age', 'date', 'ville'],
['Michael' , 12, 2012, 'A'],
['Elisa', 20, 2012, 'B'],
['Robert', 7, 2012, 'A'],
['Michael', 54, 2013, 'A'],
['Elisa', 22, 2013, 'E'],
['Robert', 3, 2013, 'F'],
['Michael', 42, 2014, 'G'],
['Elisa', 33, 2014, 'H'],
['Robert', 42, 2014, 'G']
I wish "ComboCahrt" to perform like what this link illustrates:
https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart
Having such the output, we need to retrieve a query for the "ComboChart". My script is found in this link
http://jsfiddle.net/alirezamoussaei/SNRRr/1/
I will be appreciated it if you could make changes to correct the code:
...
P.S: I employed "BarChart" in my code. Please let me know how to change it to "ComboChart".
I changed your code (see
http://jsfiddle.net/dlaliberte/qRt7e/) such that it appears to work as you are requesting. The key is that a single control can be bound to more than one chart using e.g.
bind([control], [barChart, pieChart])
Once you do this, don't also draw the pieChart separately, but let the dashboard draw it for you.
The BarChart can function as a combo chart just by specifying different chart types for individual series. The top level chartType option just provides the default chart type. You could say 'ComboChart' instead, and then the default is a line chart.
Docs on combochart: https://developers.google.com/chart/interactive/docs/gallery/combochart
Docs on ChartWrapper: https://google-developers.appspot.com/chart/interactive/docs/reference#chartwrapperobject

JSON understanding and arrays

I am in process of reverse engineering a JS script. Somewhere is says:
var a = [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
values: [5, 15, 250, 20, 23]
},{
name: 'sample2',
data: ["Otu1", "Otu5", "Otu6", "Otu7"],
values: [234, 29, 239, 5]
}]
First question: What type of object is it? is it JSON? Or is it an array of JSON objects?
I need to write this in this form:
var b = {
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
values: [5, 15, 250, 20, 23]
}
var c = {
name: 'sample2',
data: ["Otu1", "Otu5", "Otu6", "Otu7"],
values: [234, 29, 239, 5]
}
var a = b + c
Could you please help? Any insights are appreciated. Thank you community !
"First question: What type of object is it? is it JSON? Or is it an array of JSON objects?"
It's an Array of JavaScript Objects. It could be serialized into JSON data, but currently you should just see it as JavaScript code. The notation is similar, but the resulting data is different.
(And actually in your case, for the notation to be JSON-like, you'd need to use double quotes. But even then, you're still creating JavaScript Objects)
"I need to write this in this form: "
For this, you could make an Array of JavaScript Objects like this:
var a = [b, c];
You have an array of Objects here, remember JSON simply means JavaScript Object Notation

Categories