Multiseries line chart on highcharts - asp.net

Question

i have to create a multiseries line chart which is to need view each series with the value of site id and each series with different position .Just now i'am stuck that can only view one series with one query.
And here is the aspx.vb page
Public Class WaterTreament
Public position As Integer
Public value As Double
Public timestamp As String
End Class
<WebMethod()>
Public Shared Function GetWaterTreament() As List(Of WaterTreament)
Using con As New SqlConnection("Data Source=DESKTOP-B8TBSJH1;Initial Catalog=SAY;Integrated Security=SSPI")
Using cmd As New SqlCommand("select position,dtimestamp ,value from telemetry_log_table where siteid ='S1-21' AND dtimestamp BETWEEN '2021-02-02' AND '2021-02-03' and position='62'and value>0 order by dtimestamp asc")
cmd.Connection = con
Dim wtp As New List(Of WaterTreament)()
con.Open()
Using dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
wtp.Add(New WaterTreament() With {
.position = Convert.ToInt32(dr("position").ToString()),
.value = Convert.ToDouble(dr("value").ToString()),
.timestamp = dr("dtimestamp").ToString()
})
End While
End Using
con.Close()
Return wtp
End Using
End Using
End Function
Here is the script for highcharts.
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm1.aspx/GetWaterTreament",
data: "{}",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
debugger;
var aData = response.d;
var arr = [];
var arr2 = [];
var timestamp = [];
$.map(aData, function (item, index) {
var i = [item.value];
var obj = {};
var obj1 = {};
var obj2 = {};
obj.name = item.position;
obj.y = item.value;
obj.y1 = item.timestamp;
obj2.data = item.timestamp;
arr.push(obj.y);
arr2.push(obj.y1);
timestamp.push(obj2.data);
console.log(obj2);
});
var myJsonString = JSON.stringify(arr);
var jsonArray = JSON.parse(JSON.stringify(arr));
//Second Value
var myJsonString1 = JSON.stringify(arr2);
var jsonArray1 = JSON.parse(JSON.stringify(arr2));
//third Value
var myJsonString2 = JSON.stringify(timestamp);
var jsonArray2 = JSON.parse(JSON.stringify(timestamp));
//alert(jsonArray);
DreawChart(jsonArray, jsonArray1, jsonArray2);
}
function OnErrorCall_(response) {
alert("Whoops something went wrong!");
}
});
function DreawChart(seriesData1, seriesData2, seriesData3) {
Highcharts.chart('container', {
// $('#container').highcharts({
title: {
text: 'SITE ID'
},
yAxis: {
title: {
text: 'Values',
}
},
xAxis: {
categories: seriesData3
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
}
},
series: [{
type: 'line',
name: 'PH',
data: seriesData1
},
{
type: 'line',
name: 'CHLORINE',
data: seriesData1
},
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}`

Answer 1

What is your issue here exactly?
You may want to try official Highcharts .NET wrapper: dotnet.highcharts.com.
Sample chart and source code in C# with multiple series: https://dotnet.highcharts.com/Highcharts/Demo/Gallery?demo=LineBasic&theme=default