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
Related
I want to create a graph but I can't send the data from a list, I'm using this library because it allows me to create web links. Can someone help me, I'm using c#. I want to change the months for a list
Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";
qc.Config = #"{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{ label: 'Dogs', data: [50, 60, 70, 180, 190] },
],
},
options: {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
fontColor: '#00ff00',
fontSize: 20,
fontStyle: 'bold',
labelString: 'Month',
},
},
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: '# Users',
fontColor: '#ff0000',
fontSize: 20,
fontStyle: 'bold',
},
},
]
}
}
}";
You can use string interpolation to dynamically add data to a string, then use String.Join Method to format them to match QuickChart formatting, note that you must use double curly braces to escape the necessary braces
List<string> labels = new List<string>() { "'Jan'", "'Feb'", "'Jul'", "'Nov'" };
List<int> data = new List<int>() { 100, 300, 400, 500 };
Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";
qc.Config = $#"{{
type: 'bar',
data: {{
labels: [ {string.Join(",", labels)} ],
datasets: [{{
label: 'Users',
data: [ {string.Join(",", data)} ]
}}]
}}
}}";
Console.WriteLine(qc.GetUrl());
You might need to create your own method to wrap the string data into required quotes.
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
I have a block of JSON as follows:
[
{
"id": 1,
"name": "Section1",
"project_id": 100,
"configs": [
{
"id": 1000,
"name": "myItem1",
"group_id": 1
}
]
},
{
"id": 2,
"name": "Section2",
"project_id": 100,
"configs": [
{
"id": 1001,
"name": "myItem2",
"group_id": 2
},
{
"id": 1002,
"name": "myItem3",
"group_id": 2
},
{
"id": 1003,
"name": "myItem4",
"group_id": 2
}
]
},
{
"id": 3,
"name": "Section3",
"project_id": 100,
"configs": [
{
"id": 1004,
"name": "myItem5",
"group_id": 5
},
]
}
]
I have pulled it into Memory as a JArray.
I need to iterate through this such that I'm grabbing a list of ids and name from only the config sub-arrays. Ideally, I'll end up with something like this:
1000, myItem1
1001, myItem2
1002, myItem3
1003, myItem4
1004, myItem5
I'm having a hard time understanding what Newstonsoft calls a JObject vs a JArray, or how to access the various parts of each of those data structures. What I have right now is as follows:
foreach (JObject config in result["configs"])
{
string id = (string)config["id"];
string name = (string)config["name"];
string gid = (string)config["group_id"];
Console.WriteLine(name + " - " + id + " - " + gid);
}
This does not work, but I hope it illustrates what my end goal is. I've been unable to piece together how to accomplish this goal.
A JObject is an object (analogous to a class):
{
"a": 1,
"b": true
}
A JArray is a JSON array, and contains multiple JObject entities:
[
{
"a": 1,
"b": true
},
{
"a": 2,
"b": true
}
]
The root of a JSON document can be an object, or an array. In your case, it's an array.
The following code and fiddle reveals that your code is fine, provided that you deserialize the document as what it is - an array.
string json = "[{\"id\":1,\"name\":\"Section1\",\"project_id\":100,\"configs\":[{\"id\":1000,\"name\":\"myItem1\",\"group_id\":1}]},{\"id\":2,\"name\":\"Section2\",\"project_id\":100,\"configs\":[{\"id\":1001,\"name\":\"myItem2\",\"group_id\":2},{\"id\":1002,\"name\":\"myItem3\",\"group_id\":2},{\"id\":1003,\"name\":\"myItem4\",\"group_id\":2}]},{\"id\":3,\"name\":\"Section3\",\"project_id\":100,\"configs\":[{\"id\":1004,\"name\":\"myItem5\",\"group_id\":5},]}]";
JArray obj = Newtonsoft.Json.JsonConvert.DeserializeObject<JArray>(json);
foreach (var result in obj)
{
foreach (JObject config in result["configs"])
{
string id = (string)config["id"];
string name = (string)config["name"];
string gid = (string)config["group_id"];
Console.WriteLine(name + " - " + id + " - " + gid);
}
}
I want to be able to perform union and then intersection.
My Document strucuture:
{
"_id" : 1,
"items" : [
52711,
201610,
273342,
279449,
511250
]
},
{
"_id" : 2,
"items" : [
246421,
390200
]
}
This collection contains of thousands of Documents of above form.
I want to perform Union on set of documents and then perform intersection on set returned from Union.
For example:
Set 1 contains Id: [1,2,3,4,5]
Set 2 Contains Id: [3,4,5,6,7,8]
Set 3 Contains Id: [12,14,15,16,17]
It should union all list items in set 1 and set 2 and set 3. Then perform Intersection on result of each set.
So far, I have got query that does union of list as following:
db.getCollection('Test').aggregate([
{ "$match": { "_id": { "$in": [1, 2, 3] } } },
{
"$group": {
"_id": 0,
"data": { "$push": "$items" }
}
},
{
"$project": {
"items": {
"$reduce": {
"input": "$data",
"initialValue": [],
"in": { "$setUnion": ["$$value", "$$this"] }
}
}
}
}
])
Also I am doing all this in c# right now:
var group = new BsonDocument
{
{ "_id", 0 },
{
"data", new BsonDocument {{"$push", "$items" } }
}
};
var project = new BsonDocument
{
{"items", new BsonDocument
{
{ "$reduce", new BsonDocument
{
{ "input", "$data"},
{ "initialValue", new BsonArray()},
{ "in", new BsonDocument { {"$setUnion", new BsonArray { "$$value", "$$this" }}}}
}
}
}
}
};
var result = qaCollection.Aggregate()
.Match(Builders<QAList>.Filter.In(x => x.Id, list))
.Group(group)
.Project(project)
.FirstOrDefault();
This query takes some time since it could return large data. So it would really nice if i can pass multiple sets and it would union separate sets and intersect them so data is not to big to return.
thanks in advance..
Answer based on the answer given to question 24824361:
There is no function to automatically do an intersection in MongoDB across several different documents. However, it is possible to calculate the intersection by taking this approach:
note the number of documents you are intersecting
unwind the items array
count the occurrence of each item
match only those items whose occurrence count matches the number of documents from step 1
So for example if you are taking the intersection of items in 3 documents, then you unwind the items, count the number of times each item comes up, and finish with just the items which come up 3 times.
This will only work if each document's items array has no duplicates, of course.
So for example, if the source data is like this:
db.test_unionintersection_stackoverflow_42686348.insert([
{ "_id" : 1,
"items" : [ 10, 20, 30, 40, 50 ]},
{ "_id" : 2,
"items" : [ 20, 30, 40, 50, 60, 70, 80 ]},
{ "_id" : 3,
"items" : [ 10, 40, 50, 60, 80 ]},
{ "_id" : 4,
"items" : [ 20, 30, 40, 70, 80 ]}
])
Then if you want the intersection of documents 1,2,3 (for example), you want the result [40, 50].
You can calculate it like this:
var document_ids = [1, 2, 3];
var number_documents = document_ids.length;
db.test_unionintersection_stackoverflow_42686348.aggregate([
{ "$match": { "_id": { "$in": document_ids } } },
{ "$unwind": "$items"},
{ "$project" : { "_id" : 0, "item" : "$items"}},
{ "$group" : { _id: "$item", "count" : {$sum: 1}}},
{ "$match" : { "count" : number_documents}},
{ "$group" : { _id: "intersection", "items" : {$push: "$_id"}}},
]);
which gives you the result:
{
"_id" : "intersection",
"items" : [
50.0,
40.0
]
}
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" }