I want to show the user about which nodes are some sort of type in network graph of Highchart JS.
For example, the red node would be about "car" and the black node would be about "person".
How can I implement such a legend in Highchart Js?
Here is my codepen.
Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;
Highcharts.chart('container', {
chart: {
type: 'networkgraph'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to']
}
},
legend: {
enabled: true
},
series: [{
showInLegend: true,
data: [
['A', 'B'],
['C','D'],
['E','F']
],
nodes:[{
id:'A',
color:'#ff1000'
},{
id:'B',
color:'#222222'
},
{
id:'C',
color:'#ff1000'
},
{
id:'D',
color:'#222222'
},
{
id:'E',
color:'#ff1000'
},
{
id:'F',
color:'#222222'
},]
}]
});
Thank you in advance.
Have you tried adding the dataLabel to series property and add a name to your nodes.
{
id: "A",
color: "#ff1000",
name: "car" <--------- name property
},
Something like this:
series: {
dataLabels: {
linkFormat: '',
enabled: true,
format: "{point.name}",
crop: false,
defer: false,
useHtml: true,
},
}
Full example:
https://codepen.io/tiagotedsky/pen/zYZYOLR
Related
in my code im trying to display all the enrolled students per year and i want to summarize them all in 1 column per year.
is there anyway to add filter or most likely in the code itselft to combine all the data per year?
var strCampus = "ORT";
$(function() {
$.getJSON("http://localhost:37590/Get_OGSData/" + strCampus, function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
rangeSelector: {
selected: 1
},
title: {
text: 'On Going Students per Year'
},
subtitle: {
text: 'Click each column to see details'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.YEAR;
})
},
yAxis: {
title: {
text: 'On Going Students'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
//format: '{point.y:.1f}'
}
}
},
tooltip: {
enabled: false,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.OGS * 1;
})
}]
});
});
});
i want to combine all the data per year in 1 column
You can use dataGrouping with options below:
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['year', [1]]
]
}
Live demo: http://jsfiddle.net/BlackLabel/me3Lzur6/
API reference: https://api.highcharts.com/highstock/series.column.dataGrouping
I am using HighCharts to make a graph with columns, drilldown series and scatter. The problem which I am having, is that the HighChart is created before the $.getJSON function is succesfully exicited. I have found several other articles, but non yet where two $.getJSON functions are called. The code which I am using:
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container_genomefraction',
type: 'column',
events: {
// Declare the events changing when the drilldown is activated
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
},
title: {text : "Gbp"}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
// Declare the events changing when the drillup is activated
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
},
title: {text : "Percentages"}
}, false, false);
}
}
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: [{
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},{
min: 0,
title :{
text : 'input'
},
labels: {
format : '{value}'
},
opposite: true
}],
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null, // inherit from series
size : 50
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
// Declare an empty series
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
// Declare an empty drilldown series
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
// Your $.getJSON() request is now synchronous...
$.ajaxSetup({
async: false
});
// Get the input into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
// Get the drilldown estimated and total size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
$.ajaxSetup({
async: true
});
});
My JSONs are formatted:
fraction.json
[{"name":"1","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3}]},{"name":"input","dataLabels":"{enabled,false}","yAxis":1,"type":"scatter","data":[{"y":38,"name":1,"drilldown":1},{"y":"","name":2,"drilldown":2},{"y":27,"name":3,"drilldown":3}],"tooltip":{"headerFormat":"<span style='font-size:11px'>{series.name}<\/span><br>","pointFormat":"<span style='color:{point.color}'>{point.name}<\/span>: <b>{point.y}<\/b><br\/>"}}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]}]
When the page is loaded, the graph displays the values of the previous search done and when I reload the page, the correct data is shown. Could someone please help me out?
Add the second getJSON method in the first getJSON success callback like this:
//Get the genome fraction into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
//Get the drilldown estimated and total genome size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
I need a solution to add unique URL's to my series.
This former question, unfortunately does not work anymore.
series: [{
name: 'batch',
visible: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
},
symbol: 'square'
},
data:[56.5,50.1,49.4,50.8,51.8,50.4,51.1,50],
color: 'darkred',
}, {
Something like this?
series:[{data: [ [123.12,'http://goole.com'],[332.32,'http://zzs.com'] ] }]
I am using angularjs highchart by integrating the DI of highcharts-ng
I have created different type of charts by following options
var chart = {
options: {
chart: {
type: 'bar'
}
},
title: {
text: chartData.name
},
subtitle: {
text: chartData.subname
},
rangeSelector: {
enabled:true,
selected: 1
},
xAxis: {
title: {
text: chartData.x.title
}
},
yAxis: {
title: {
text: chartData.y.title
}
},
series: [{
name: chartData.data[0].name,
data: chartData.data[0].data,
dashStyle: 'longdash'
}, {
name: chartData.data[1].name,
data: chartData.data[1].data,
dashStyle: 'dot'
}, {
name: chartData.data[2].name,
data: chartData.data[2].data
}]
}
I have added rangeslider options but its not reflecting in chart.
How to integrate highchart range slider in angualrjs
Include a reference to highstock instead of highcharts. Both are compatible with highcharts-ng, but only highstock supports rangeSelector. Then, move rangeSelector into the options object. Note - "range slider" functionality is called navigator in the highstock docs, and must also be added to options.
var chart = {
options: {
chart: {
type: 'bar'
},
rangeSelector: {
enabled: true
},
navigator: {
enabled: true
}
}
...
};
Here is a demo, from highcharts-ng's GitHub page:
http://jsfiddle.net/pablojim/r88yszk0/
I'm using Syncfusion JS 12.1.0.43, trying to implement line chart with custom tooltip;
Here is my HTML;
<div id="div-overview-transaction-tooltip" style="display:none;">
<div id="div-transaction-tooltip-value">
<ul>
<li>#point.totalValue#</li>
<li>#point.dataSource.totalValue#</li>
<li>{{:totalValue}}</li>
<li>#series.dataSource.totalValue#</li>
</ul>
</div>
</div>
Here is my example JSON;
{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}
And here is my JS;
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
legend: { visible: true }
});
Output:
#point.TotalValue#
#point.dataSource.TotalValue#
{{:TotalValue}}
#series.dataSource.TotalValue#
I want to show all of my property from JSON on custom tooltip. Except tooltip everything works fine.
Any help would be appriciated. Thanks already.
By default the Tool-tip template supports only point.x and point.y so there is no direct way to achieve this using Tool-tip template.
However the value "TotalValue" from JSON can be shown in the Tool-tip with the help of the following event "toolTipInitialize" as like in below code snippet.
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
toolTipInitialize:"rendertool"
legend: { visible: true }
});
And in the method "rendertool"
function rendertool(sender) {
sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString();
}
The sender of the event has the "model" properties of the chart where you can get the data source of the series and thus you can access any values in the JSON. Hope this works for you.
here is the sample link which I tried to achieve this.
Sample
Thanks