We Keep Coding

Highchart multiple-color line series dynamically

I am making a line chart using highchart and i want to try to make different color on it.
Let me show you my current code :
I have 6 arrays:
var xAxes = ['2021-05-05','2021-05-06','2021-05-07','2021-05-08','2021-05-09']
var Min = [2,2,2,2,2]
var Max = [200,200,200,200,200]
var value = [100,134,156,133,26]
var judge = ['OK','NG','OK','OK','NG']
var boxNo = ['Box1','Box1','Box1','Box2','Box2']
And here is my code for creating the chart :
$('#container5').highcharts({
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: 'Daily IC Log Data'
},
subtitle: {
text: 'Running Date'
},
xAxis: {
tickInterval: 150,
categories: xAxes,
type: 'datetime',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Value'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
plotOptions: {
series: {
turboThreshold: 1000000
}
},
tooltip: {
shared: true,
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y} us<br/>'
},
series: [
{
name: 'Value',
data: value,
type: 'spline',
tooltip: {
valueDecimals: 2
}
},
{
name: 'Minimun Std',
data: Min,
color: 'red',
type: 'spline',
line: {
dashStyle: 'longdash'
},
tooltip: {
valueDecimals: 2
}
},
{
name: 'Maximum Std',
data: Max,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}
]
});
From my code above, I want to make differential on my line chart based on boxNo.
The line color on chart should be different based on boxNo. Is it possible?
Any help would be appreciated.

You can create a function to generate zones for a series based on the boxNo array. Example:
var colorsMap = {
Box1: ['blue', 'red', 'black'],
Box2: ['green', 'yellow', 'orange']
};
function getZonesForSeries(seriesIndex) {
var currentZone;
var zones = [];
boxNo.forEach(function(bN, index) {
if (bN !== currentZone) {
currentZone = bN;
if (zones.length) {
zones[zones.length - 1].value = index;
}
zones.push({
color: colorsMap[bN][seriesIndex]
});
}
});
return zones;
}
Live demo: http://jsfiddle.net/BlackLabel/t8hcab7d/
API Reference: https://api.highcharts.com/highcharts/series.line.zones

How to server side filtering,pagination and sorting in jqx widget grid angular 7

I am developing an angular 7 project with dotnet core web api. I am using some feature of JQX widget.In jqx widget grid i need help to filter,paginate and sort data from server side.I have tried following code.
---grid.component.html--
<jqxGrid #myGrid
[source]="dataAdapter"
[columns]="columns"
[auto-create]="false"
>
</jqxGrid>
---grid.component.ts----
import {Component, OnInit, ViewChild} from '#angular/core';
import {jqxGridComponent} from "jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid";
#Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {
#ViewChild('myGrid') myGrid: jqxGridComponent;
data = new Array();
firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
// generate sample data.
generatedata = (startindex, endindex) => {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
var productindex = Math.floor(Math.random() * this.productNames.length);
var price = parseFloat(this.priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["id"] = i;
row["firstname"] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
row["lastname"] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
row["productname"] = this.productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
return data;
}
source = {
datatype: 'array',
localdata: {},
totalrecords: 1000
}
rendergridrows = (params) => {
console.log('rendergridrows -> event: ');
var data = this.generatedata(params.startindex, params.endindex);
return data;
}
dataAdapter: any = undefined;
columns: any[] = [
{ text: 'Id', datafield: 'id', width: 50 },
{ text: 'First Name', datafield: 'firstname', width: 120 },
{ text: 'Last Name', datafield: 'lastname', width: 120 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', width: 'auto', cellsalign: 'right' }
]
ngOnInit() {
console.log('initDataAdapter');
this.dataAdapter = new jqx.dataAdapter(this.source);
this.myGrid.createComponent({
"altrows": true,
"autoheight": true,
"enabletooltips": true,
"editable": true,
"editmode": "selectedrow",
"pageable": true,
"sortable": true,
"autoshowfiltericon": true,
"filterable": true,
"virtualmode": true,
"showeverpresentrow": true,
"everpresentrowposition": "top",
"selectionmode": "multiplecellsadvanced",
"columnsresize" : true,
"width": "100%",
rendergridrows : this.rendergridrows
});
}
}
Its working only for pagination but i need filtering and sorting also. How can i implement jqx widget grid that filter and sort data from server. Although here i didn't use any url for server side, i want only a call to a function of rendergridrows that can filter data..

Preprocessing data in HighCharts JS in C# ASP.NET

I'm creating a bar chart in ASP.NET 2.0 using HighCharts JS.
here's how the chart can be do in javascript:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});​
i have this in c# code-behind:
public string[] Names = new string[] { "Name1", "Name2", "Name3"};
public string[] Data = new string[] { "[1,0,4]", "[5,7,3]", "[2,3,4]"};
How can I used this string[] Names and Data in javascript to change the value of the chart?
Please help I'm stuck in it. :( Thanks!
--EDIT for ARISTOS--
I tried your answer but that doesn't work. Base on your answer this javascript will be the same with what you do. check this:
$(function () {
var seriesTest = "{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }";
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [seriesTest]
});
});​
I tried this already but this not work because I think series.data only accepts integer inside its bracket ([]).
I already check DotNet.HighCharts as suggested by KingCronus but this can't be use in asp.net 2.0 framework. :(

On the most simple form, you just need to render them on the correct format.
Here is a simple example that maybe need a few tweeks...
Run this on code behind, maybe on PageLoad
StringBuilder sb = new StringBuilder();
for(int i = 0 ; i < 3 ; i++)
sb.AppendFormat("{3}{{name: '{0}',data: {1} }}",
Names[i], Data[i],
i>0 ? "," : "" // this is render the comma "," after the first line
);
ScriptData.Text = sb.ToString();
And place them on the script on the page using a Literal control
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [
<asp:Literan id="ScriptData" Runat="server" EnableViewState="off" />
]
});
});?

Here's what my solution for my problem, in case there would someone need this also.
Here's the JS function:
function LoadChart() {
var Names = <%= this.javaSerial.Serialize(this.Names %>;
var Data = <%= this.javaSerial.Serialize(this.Data %>;
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apple', 'Banana', 'Orange']
},
yAxis: {
title: {
text: 'fruit eaten'
}
},
series: [{
name: Names[0],
data: [Data[0]]
}]
};
for (var i=1; i<Names.Length; i++)
{
options.series.push({
name: Names[i],
data: [Data[i]]
});
}
var chart = new Highcharts.Chart(options);
}
Here's some part of the code behind:
public JavaScriptSerializer javaSerial = new JavaScriptSerializer();
public string[] Names = new string[] { "Jane", "John", "Mike" };
public string[] Data = new string[] { "1,2,3", "2,4,6", "3,6,9" }

Create Json X,Y structure

I am trying to create the below structure:
"chartData": [
{
label: "Your group",
data: [
[-2, 10],
[2, 20],
[-1, 11],
[-1, -12],
[-1, 5]
],
info: [
{
id: "a1"
},
{
id: "b1"
},
{
id: "c1"
},
{
id: "d1"
},
{
id: "e1"
}
]
},
everything is fine other than the data section. If I create a class to represent each data point, with for example a property for X and a property for Y then the JSON created will look something like this:
"chartData": [
{
label: "Your group",
data: [
{X=-2, Y=10},
{X=-5, Y=17},
{X=-1, Y=13},
{X=-8, Y=8},
{X=-5, Y=13}
],
info: [
{
id: "a1"
},
{
id: "b1"
},
{
id: "c1"
},
{
id: "d1"
},
{
id: "e1"
}
Defining the data type to be a double[,] also doesn't create the same format.
I need to stick to this format as it at the request of an external vendor that the data looks like this. Any ideas?

Your coordinate pairs need to be an array of int or double.
class ChartData {
string label;
int[][] data;
Info[] info;
}
data should be initialized like this:
var cd = new ChartData();
cd.data = new int[100][];
And, each point should be something like:
cd.data[0] = new[] { 1, 1 };
cd.data[1] = new[] { -10, 50};
//etc

Remove the categories text under the bars on Highcharts chart

I have a chart that looks like this:
I want to remove the text that is under the bars, "ödmjukhet", "engagemang" etc.. but I still want to display the categorie names on the labels when a user hover over the bars. How can I do this?
This is my code in C#
Highcharts chart1 = new Highcharts("Chart")
.SetXAxis(new XAxis { Categories = averageGrades.Select(averageGrade => averageGrade.CoreValue.Name).ToArray(), })
.SetYAxis(new YAxis { Min = 0, Max = 10, TickInterval = 1, Title = new YAxisTitle { Text = "Betygskalan" } })
.SetSeries(new Series { Data = data, Name = "Snittbetyg" })
.SetLegend(new Legend { Enabled = false, Layout = Layouts.Horizontal})
.SetTitle(new Title { Text = "" })
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 300, Width = 200});
And this is the code by javascript output code:
var Chart;
$(document).ready(function() {
Chart = new Highcharts.Chart({
chart: { renderTo:'Chart_container', defaultSeriesType: 'column', height: 300, width: 200 },
legend: { enabled: false, layout: 'horizontal' },
title: { text: '' },
xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] },
yAxis: { max: 10, min: 0, tickInterval: 1, title: { text: 'Betygskalan' } },
series: [{ data: [{ color: '#FF9980', y: 4 }, { color: '#A6FF80', y: 8 }, { color: '#FF9980', y: 3 }, { color: '#A6FF80', y: 9 }], name: 'Snittbetyg' }]
});
});
Thanks in advance!

remove
xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] },
from your code
OR
add class into your style, if you want to keep on hover see DEMO
.highcharts-axis{
display: none;
}​

The best way of doing this is probably witht he built in label objecton the xaxis.
http://www.highcharts.com/ref/#xAxis-labels--enabled
The following should do the trick without relying on overriding their styles as in Rab's answer. This is obviously preferred since the API is a lot more fixed than their HTML format.
xAxis: {
categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'],
labels: {enabled: false}
},