I try to build a grouped categories bar plot with DotNet.Highcharts similar to this example: http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
I know how to set my own categories:
String[] myCategories = new String[] { "Category1", "Category2" };
DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
.SetXAxis(new XAxis
{
Categories = myCategories
})
However I couldn't manage to initialize this chart with DotNet.Highcharts and subcategories which would require code similar to this example
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
Any ideas how to get it done?
Thanks!
Related
I am using gantt highcharts in my angular application.
In Gantt highcharts, I need to add sections of categories(general processes and Products) which are highlighted in red color.
tried many solutions but didn't get the solutions.
Kindly help.
At the beginning of your data sets, you can insert points only with a name property.
Highcharts.ganttChart('container', {
series: [{
name: 'Offices',
data: [{
name: 'Section 1'
}, {
name: 'New offices',
id: 'new_offices',
owner: 'Peter'
}, ...]
}, {
name: 'Product',
data: [{
name: 'Section 2'
}, {
name: 'New product launch',
id: 'new_product',
owner: 'Peter'
}, ...]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/3knLtr8g/
I need to group elements on the y-Axis and not sure how to achieve this. It can be with x-range or gantt, with category, grid or treegrid, whichever works best.
Here's an example
You can use Grouped Categories plugin:
yAxis: {
...,
labels: {
groupedOptions: [{
rotation: -90,
}],
},
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/caj3rwdy/
Docs: https://blacklabel.github.io/grouped_categories/
I am using highcharts-ng. In column and bar charts of highcharts, if the data set is large, the x-axis is being plot as random numbers instead of the given category.
If I deselect and select the legend, then the x-axis labels appear correctly.
$scope.chartConfig = {
options: {
chart: {
type: "bar"
}
},
xAxis: {
type: "category",
title: {
text: "country"
}
//tickInterval: 30
},
// series with over 184 data points
series: [
{
name: "values",
data: [
{
name: "Afghanistan",
y: 66.48275862068965
},
{
name: "Aland Islands",
y: 49
},
{
name: "Albania",
y: 49.42424242424242
},
]
}
]
}
here's a fiddle with the issue
[It is a Highcharts bug. Already reported here.
In version 4.2.6 the issue does not show up. https://jsfiddle.net/m0jbh333/
Also you could try using the newest version with set cropTreshold - it seems that it works as well. https://jsfiddle.net/m0jbh333/1/
series: [
{
turboThreshold: 0,
cropThreshold: 500,
//Normal way of setting category
this.xAxis[0].setCategories(["category1", "category2"])
Is there a similar way to set categories while using a grouped category plugin for the below categories?
categories: [{
name: "Actual",
categories: ["Q1", "Q2", "Q3"]
}, {
name: "Forecast",
categories: ["Q1", "Q2", "Q3"]
}, {
name: "Plan",
categories: ["Q1", "Q2", "Q3"]
}]
https://github.com/blacklabel/grouped_categories/
You could simply do :
this.xAxis[0].setCategories(
[{
name: "Actual",
categories: ["Q1", "Q2", "Q3"]
}, {
name: "Forecast",
categories: ["Q1", "Q2", "Q3"]
}, {
name: "Plan",
categories: ["Q1", "Q2", "Q3"]
}]
);
I have data that can either be weekly or monthly that gets returned as json.
Can somebody explain how I can just return the series in the payload to group by each series? That is, display the x-axis as the label?
I want to use one chart to display (weekly, monthly, daily) with a json data payload but use only one chart to display that json payload for either time slice.
For example:
Weekly Payload:
[
{
"date-label":"Week 24",
"series1":789118,
"series2":49475,
},
{
"date-label":"Week 25",
"series1":5759546,
"series2":286657,
}
]
Monthly Payload:
[
{
"date-label":"June",
"series1":789118,
"series2":49475,
},
{
"date-label":"July",
"series1":5759546,
"series2":286657,
}
]
How many points do you have?
If there is only a couple (~10?) you can use categories, and then result should be:
new Highcharts.Chart({
xAxis: {
categories: ['June', 'July' ... ]
},
series: [{
data: [123, 124 ...]
}, {
data: [123, 124 ...]
}]
});
If you have more points, so it wouldn't be possible to display all categories, you need to change format from 'Week 24' or 'June' to timestamp, so something like this:
new Highcharts.Chart({
xAxis: {
type: 'datetime'
},
series: [{
data: [[timestamp, 123], [timestamp, 124] ...]
}, {
data: [[timestamp, 123], [timestamp, 124] ...]
}]
});
Where timestamp is in milliseconds.