Develop Reference

missing ) after argument list jQuery

Recently I posted on Hight Charts where I did like to create dynamic charts based on Razor view loop. Here's the link - Dynamic Chart
I tried one of the solution provided by a SO user as follows:
<script>
async function createChart(containerName, dryArgument, operatingArgument){
let dryData = await fech(dryArgument)
let operatingData = await fech(operatingArgument)
Highcharts.chart(containerName, {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'Dry',
data: JSON.parse(dryData)
}, {
name: 'Operating',
data: JSON.parse(operatingData)
}]
});
}
</script>
In the front-end, used this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
//Dynamic Chart - Starts
#if (Model.aLstTopsideModuleGroupBy.ToList().Count > 0)
{
foreach (var item in Model.aLstTopsideModuleGroupBy)
{
foreach (var item2 in item)
{
int i = 0;
<div id="container#i"></div>
<p class="highcharts-description">
</p>
<script>
window.onload = function () {
createChart('#container#i',#item2.BaseDry,#item2.BaseOp);
};
</script>
i++;
}
}
}
//Dynamic Chart - Ends
</div>
</div>
</div>
I am not sure if this is the correct way to do it, but got the following exception while trying:
Uncaught SyntaxError: missing ) after argument list
Is there any way to resolve the exception? I know, am doing something doing wrong here, any idea or suggestion would be appreciated.
Update 1: Exception

You don't have your Java Script correctly set up.
First of all, fetch() does return a promise that will give you a response object once fulfilled. That response object has json() function returning a promise that will return the json as JavaScript object once fulfilled. Promises are best awaited. The start of your createChart function should look this:
async function createChart(containerName, dryArgument, operatingArgument){
let dryData = await fetch(dryArgument) /* note you have a typo in your question */
let dryJson = await dryData.json();
let operatingData = await fetch(operatingArgument)
let operatingJson = await operatingData.json();
/* rest of code here */
In the series setup of HighCharts you now need to make these changes:
series: [
{
name: 'Dry',
data: dryJson
}, {
name: 'Operating',
data: operatingJson
}]
This does assume that dryJson and operatingJson are single dimension javascript arrays with numbers in it (so [1,2,3] will work, ['1', '2', '3'] doesn't nor does {items:[{score:1}]}.
The exact setup in the Razor page is a task I leave at you, it shouldn't be that hard to verify if the outcome of the rendered page matches the actual need.
For testing purposes I created stack snippet where I use posts and users from the Stack API as Json sources. As those are a slightly different shape you see a map over its items array to get the desired array of numbers:
async function createChart(containerName, dryArgument, operatingArgument){
let dryData = await fetch(dryArgument)
let dryJson = await dryData.json();
let operatingData = await fetch(operatingArgument)
let operatingJson = await operatingData.json();
Highcharts.chart(containerName, {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'Dry',
data: dryJson.items.map(i => i.score)
}, {
name: 'Operating',
data: operatingJson.items.map(i => i.reputation / 100)
}]
});
}
async function start() {
var key = '1*tsYg4Q3UbK06qftc8VmQ(('
await createChart('container1', 'https://api.stackexchange.com/2.3/posts?order=desc&sort=votes&pagesize=12&site=stackoverflow&key='+key, 'https://api.stackexchange.com/2.3/users?order=desc&sort=reputation&pagesize=12&site=stackoverflow&key='+key)
}
start()
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.js"></script>
<div id="container1">
loading ...
</div>

Google chart does not show me information from the wrapper [ASP.NET Core/Google Chart]

i would like to display the sorted slider data in a line chart. Unfortunately, the data is not displayed in the Line_chart div, but only in the slider. Thank you in advance for your help.
<script type="text/javascript">
function drawDashboard() {
var data = google.visualization.arrayToDataTable([['Time', 'Data'],#foreach (var data in Model.cooper) {<text>[Date('#data.data.Year-#data.data.Month-#data.data.Day'), #data.wartosc],</text>}]);
var myDashboard = new google.visualization.Dashboard(document.getElementById('contener_cooper'));
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div_cooper',
'options': {
'filterColumnLabel': 'Data',
'ui': {
'chartOptions': {
'height': 20,
},
}
}
});
var lineChart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_chart_cooper',
'dataTable': data
});
myDashboard.bind(myDateSlider, lineChart1).draw(data);
}
google.load('visualization', '1', { packages: ['controls'], callback: drawDashboard });
google.charts.load('current', { packages: ['corechart', 'controls'] });
</script>
<div class="contener_cooper">
<div id="line_chart_cooper"></div>
<div id="control_div_cooper"></div>
</div>

Form tag is not being populated

I am trying to get reference to my form based on form id using jquery but it is failing to reference the form when I use in developer tools.Any help in much appreciated.
#model Models.ViewModel
#using (Ajax.BeginForm("TermsAndConditions", "TermsAndConditions", new AjaxOptions() { HttpMethod = "post", OnSuccess = "Save" }, new { id = "saveStatus" }))
{
<div class="row-container">
/* My UI elements */
</div>
#Html.Partial("_SubmitButtonPanel", "coverage-server-message")
}
#Html.HiddenFor(m => m.Id)
#Scripts.Render("~/bundles/datepicker")
<script type="text/javascript">
$(function () {
$('#rdate').datepicker({
defaultDate: '#Model.RDate',
showClose: true,
showClear: true,
toolbarPlacement: 'top'
});
$('#cdate').datepicker({
defaultDate: '#Model.CDate',
showClose: true,
showClear: true,
toolbarPlacement: 'top'
});
});
function CheckSave(data) {
if (data.success) {
$('#coverage-server-message').text("Successful save!");
}
else {
alert("Something went wrong!");
}
}
var formId = '#saveStatus'
</script>
Ideally I am expecting some form to be generated with my first line of code.But its not happening.
<form action="/[controller]/[method]/1?Length=12" data-ajax="true" data-ajax-method="post" data-ajax-success="CheckSaveStatusEndorsements" id="saveStatus" method="post">

Looks correct to me, you could try something like this to get a specific property.
$('#saveStatus').attr('id');
That should return the same ID that you are using as your selector.
$('#saveStatus').serialize();
This should give you all the form data as key value pairs

Adding a new object in a JSON array with Angularjs $http

I am trying to add a new object to a existing JSON array. This is my JSON array stored in the database.
{
"Id":4,
"UserId":2336276,
"Name":"Data",
"Widgets":[
{
"Id":1,
"Description":"Test1",
"DataSource":"Person1",
"ChartType":"bar",
"x":0,
"y":0,
"width":3,
"height":2
},
{
"Id":2,
"Description":"Test2",
"DataSource":"Person2",
"ChartType":"pie",
"x":3,
"y":0,
"width":3,
"height":2
},
{
"Id":3,
"Description":"Test3",
"DataSource":"Person3",
"ChartType":"heatmap",
"x":6,
"y":0,
"width":3,
"height":2
}
]
}
When I want to add a new widget I want it as a object in this JSON array.
This is my Angular HTTP call:
$scope.addWidget = function () {
var Indata = {
"Id": $scope.widgets.Widgets.length + 1,
"name": $scope.name,
"description": $scope.Widgets.description,
"datasource": $scope.Widgets.datasource,
"charttype": $scope.Widgets.charttype,
"x": $scope.Widgets.x = 0,
"y": $scope.Widgets.y = 0,
"width": $scope.Widgets.width = 3,
"height": $scope.Widgets.height = 2
};
$http({
url: "Dashboard/AddWidget",
method: "POST",
params: Indata
})
$scope.widgets.push(Indata);
};
And this is my HTML page:
<md-dialog>
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>New widget</h2>
<span flex></span>
</div>
</md-toolbar>
<md-input-container>
<label>Name</label>
<input type="text" ng-model="name">
</md-input-container>
<md-dialog-content>
<label>Datasource</label>
<md-select ng-model="datasource"></md-select>
</md-dialog-content>
<md-dialog-content>
<label>Type graph</label>
<md-select ng-model="graphtype"></md-select>
</md-dialog-content>
<md-input-container>
<label>Description</label>
<input type="text" ng-model="description">
</md-input-container>
<md-dialog-actions layout="row">
<md-button id="add" ng-click="addWidget()">
Add widget
</md-button>
<md-button ng-click="hide()">
Cancel
</md-button>
</md-dialog-actions>
</form>
When I click on Addwidget it doesn't add to the JSON array but outside of it as a new object. I am not sure but I think I am doing something wrong with the nested json array.
What am I doing wrong?
Kind regards
UPDATE:
[HttpPost]
public string AddWidget(Dashboard model)
{
var data = _dashboarBusiness.StoreDashboard(model);
return Newtonsoft.Json.JsonConvert.SerializeObject(data);
}

You are not adding it into the json object that you obtained from database.
Suppose
$scope.jsonObj= {
"Id":4,
"UserId":2336276,
"Name":"Data",
"Widgets":[
{
"Id":1,
"Description":"Test1",
"DataSource":"Person1",
"ChartType":"bar",
"x":0,
"y":0,
"width":3,
"height":2
},
{
"Id":2,
"Description":"Test2",
"DataSource":"Person2",
"ChartType":"pie",
"x":3,
"y":0,
"width":3,
"height":2
},
{
"Id":3,
"Description":"Test3",
"DataSource":"Person3",
"ChartType":"heatmap",
"x":6,
"y":0,
"width":3,
"height":2
}
]
}
Then you have to push into the widgets array of this object.
$scope.jsonObj.Widgets.push(Indata);
You may also want to check if your $http is working correctly because I can't see anything being done in the success callback of the request.
$http({
url: "Dashboard/AddWidget",
method: "POST",
params: Indata
}).then(function(data) {
$scope.success = "Widgets added Successfully"
});
For more reference on $http, check https://docs.angularjs.org/api/ng/service/$http

Dynamic data binding to Highchart

I'm trying to feed a Highchart chart with data using a viewmodel but can't get it to work.
The list of strings I want to use in my chart is populated in the model like this:
var list = new List<ClinicPatients>();
foreach (var customer in customers)
{
var customerName = GetCustomerName(customer);
var numOfPatients = GetNumOfActivePatients(customer);
list.Add(new ClinicPatients { ClinicName = customerName, PatientNumber = nummOfPatients });
}
public string ClinicList { get; set; }
var tempList = list.Select(x => x.ClinicName);
ClinicList = JsonConvert.SerializeObject(tempList);
When i debug this and choose to text visualizer i see this in ClinicList:
["A","B","C","D","E","F"] which looks right. If I copy this and hard code it to my javascrip it works but when my javascrip is bound to my viewmodel i does not work. Could someone please explain why?
Model.ClinicUsers which is a list of int works as well.
My Html/Javascript looks like this:
<div class="content">
<div>
<div id="usersPerClinicDiagram" style="width: 800px; height: 300px;">
<div id="activUsers" style="width: 800px; height: 300px;"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'activUsers',
type: 'bar'
},
legend: {enabled: false},
title: {text: 'Number of active users per clinic'},
subtitle: {text: 'for how many weeks they kept on using Triabetes'},
tooltip: {enabled: false},
xAxis: {
title: {text: 'number of users',align: 'high'},
allowDecimals: false,
categories: #Model.ClinicList
},
yAxis: {min: 0,
allowDecimals: false,
title: {text: 'Clinic',align: 'high'},
labels: {overflow: 'justify'}
},
plotOptions: {
bar: {dataLabels: {enabled: false}
}
},
credits: {enabled: false},
series: [{ data: #Model.ClinicUsers }]
});
});
});
</script>

Try this:
#Html.Raw(Json.Encode(Model.ClinicUsers.ToArray()))
Worked for me.