<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
}
</style>
</head>
<body>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
</script>
</body>
</html>
Hi,
this is my first post on stack so plz correct if wrong. I wish to know how do I access the properties of highstock chart in the above example. eg. if i want to set the 'selected' property of 'rangeselector' externally through code how to do it. Any help will be highly appreciated.
Thanks
You can:
Store a chart in a variable:
const chart = Highcharts.stockChart('container', {...});
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Use load event:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
}
}
},
...
});
Use a callback function:
Highcharts.stockChart('container', {
...
}, function(chart) {
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Live demo: http://jsfiddle.net/BlackLabel/3L7uvm4n/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.chart
https://api.highcharts.com/highcharts/chart.events.load
Related
I am trying to setup a cytoscape.js graph, which includes links in node labels and also expandable/collapsable parent nodes. After some research I decided to use the cytoscape-node-html-label extension in combination with the expand-collapse extension.
I played around with both extensions separately and they do what I want. However, when trying to combine them, HTML links are not clickable any more. It seems like the expand/collapse extension adds a layer, which does not propagate mouse events to the HTML extension.
{
enablePointerEvents: true
}
is already set for the HTML label extension but does not solve the problem. Please find a minimum working example below.
I am happy to get your support on
how to propagate clicks to the HTML label or
how to move the HTML labels "on top" of the expand/collapse layer.
Thank you in advance :-)
code.js
document.addEventListener('DOMContentLoaded', function() {
var cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'fcose'
},
elements: {
nodes: [
{ data: { id: 'node1', type: 2 } },
{ data: { id: 'node1.1', parent: 'node1' } },
{ data: { id: 'node2' } },
],
edges: [
{ data: { source: 'node1', target: 'node2' } },
]
},
});
cy.nodeHtmlLabel([{
query: 'node[type=2]',
valign: "top",
valignBox: "top",
tpl: function() {
return '<p>Test label 1. link</p>'
}
}], {
enablePointerEvents: true
});
// If the following block is commented, the HTML link above works
var api = cy.expandCollapse({
layoutBy: {
name: "fcose",
animate: true,
randomize: false,
fit: true
},
fisheye: true,
animate: true,
undoable: false,
});
});
demo.html
<!DOCTYPE>
<html>
<head>
<title>cytoscape-expand-collapse.js demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse/cytoscape-expand-collapse.js"></script>
<script src="src/cytoscape-node-html-label.js"></script>
</head>
<body>
<h1>cytoscape-expand-collapse demo</h1>
<script src="code.js"></script>
<div style="float: right; height: 95%; width: calc(80% - 4px);" id="cy"></div>
</body>
</html>
I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.
My csv looks like that :
Name,Value,colorValue
The first column is the name.
The second one is the percentage of activity.
The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).
Do someone has an example ?
Because it doesn't work, nothing happen (no error too), i think it come from the csv load.
Here my actual code :
HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>
my Js :
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
}
}],
title: {
text: 'Highcharts Treemap'
}
});
The CSV data properties should not be inside a series object but chart object, like that:
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
keys: ['name', 'value', 'colorValue']
}],
title: {
text: 'Highcharts Treemap'
}
});
Demo:
https://jsfiddle.net/BlackLabel/L4uo8h13/1/
API reference:
https://api.highcharts.com/highcharts/data.csv
I am trying to find out why my chart is not showing up in my WPF WebBrowser.
When I load my html file, I have the following error:
I think that IE might be blocking Highchart(Javascript from external Source) in the WPF WebBrowser because when I try to load it with IE my page got restricted from running script or ActiveX Control :
I know how to allow IE to run script or ActiveX Control but I don't know how to allow it in my WPF WebBrowser.
I have tried with a Mark Of The Web but I'm not sure if i am using it properly ?
<!-- saved from url=(0016)http://localhost -->
I have also tried some desperate method like adding my program in :
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\MyProgram.exe and MyProgram.vshost.exe with Value 0x00002af9
I would really appreciate some help.
I don't have find any answer that fix this problem so far.
My html file :
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
UPDATE
Request : alert(navigator.userAgent);
Result :
Signification
SOLUTION
Without any change in my PC Security Configuration i fixed this problem by adding this in the header of my html file :
<meta http-equiv="x-ua-compatible" content="IE=11">
See Alexander Ryan Baggett Answer for more information or this link.
Okay, this works fine for me.
I added <meta http-equiv="x-ua-compatible" content="IE=11">. I also loaded the HTML file locally in visual studio by adding it to the project and setting it to copy always. I did not end up having to make any registry adjustments on my machine either.
C# file
using System;
using System.IO;
using System.Windows;
namespace Stackoverflow_question
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
string curDir = Directory.GetCurrentDirectory();
webbrowser1.Navigate(new Uri(String.Format("file:///{0}/test.html", curDir))) ;
}
}
}
HTML file
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart("container", {
chart: {
type: "spline",
inverted: true
},
title: {
text: "Atmosphere Temperature by Altitude"
},
subtitle: {
text: "According to the Standard Atmosphere Model"
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: "Altitude"
},
labels: {
formatter: function () {
return this.value + "km";
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
formatter: function () {
return this.value + "°";
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x} km: {point.y}°C"
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: "Temperature",
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
It gives a nice result too.
If this code doesn't resolve your issue. I would suspect something needs to be changed about your Local Intranet Security Zone settings.
I have tried to create a column chart using highcharts in nodejs and data is getting fetched from mongodb.
I am getting stuck in series option Please help me to get out of it.
The below is my code for ejs file -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie Highcharts Example</title>
<!-- Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/highcharts.js"></script>
<!-- Optional: the exporting module -->
<script type="text/javascript" src="/javascripts/exporting.js"></script>
<!-- Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
chartdata= <%-JSON.stringify(data)%>
var category = [];
var dname=[];
var kdata=[];
for(j=0;j<chartdata.length;j++){
category[j]=[chartdata[j].catname]
// name[j]=[chartdata[j].seriesname]
// data[j]=[chartdata[j].wdata,chartdata[j].hdata,chartdata[j].cdata]
}
for(k=0;k<chartdata.length;k++){
dname[k]=[chartdata[k].seriesname];
}
for(i=0;i<chartdata.length;i++){
kdata[i] = [chartdata[i].wordval,chartdata[i].codeval,chartdata[i].highval];
}
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Monthly Average data'
},
xAxis: {
categories: category
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y ;
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
}
},
series: [{
name: dname[0],
data: kdata[0]
},
{
name: dname[1],
data: kdata[1]
},
{
name: dname[2],
data: kdata[2]
}
]
});
});
</script>
</head>
<body>
<!-- Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
#NishithChaturvedi - When I am doing this way its working so only the problem with loop I know I am asking silly question but didn't able to rectify.
Thank you for your time I have fixed the problem I was facing in series value
I just created another array var and store the name and data to it and pass that array in series.
I have one html page where there are two divs. In each div I am loading different jsp files(one.jsp and two.jsp).
home.html:
<script src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/highcharts.js"></script>
<script type="text/javascript" src="resources/js/exporting.js"></script>
<script type="text/javascript" src="resources/js/export-csv.js"></script>
<script>
function loadGraphs()
{
$('#plotContainer1').load('one.jsp');
$('#plotContainer2').load('two.jsp');
}
</script>
where plotContainer1 and plotContainer2 are two divs. So that I want to load two graphs at a time.
one.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div id="container1" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
<script type="text/javascript">
var seriesArray;
var chart;
callAjax();
var graphTitle = "";
var chart;
function drawgraph1() {
Highcharts.setOptions({
colors: ['#54CBE5', '#57B442']
});
chart = $('#container1').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: graphTitle
},
xAxis: {
tickInterval: 30,
type: 'datetime',
categories: xAxisCategories
},
yAxis: {
min : 0,
title: {
text: ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series : seriesArray
});
};
function callAjax() {
$("#container1").empty();
seriesArray = [{
name: 'line1',
data: []
}, {
name: 'line2',
data: []
}];
xAxisCategories = [];
var params = {"param1" : value};
$.getJSON("graph1datafetcher",params, function(data) {
$.each(data, function(key, val) {
var xaxisPoints=data[key];
xAxisCategories.push(Date.parse(key));
for(var i in xaxisPoints) {
seriesArray[i].data.push(xaxisPoints[i]);
}
});
console.log(" JSON: " + JSON.stringify(data));
drawgraph1();
});
}
</script>
</body>
</html>
two.jsp almost contains the same code. Now first two.jsp loads as it contains less data compared to one.jsp. When one.jsp loads in and shows up in div, the one.jsp graph shows two.jsp data and its own data too. I am logging the data in the console, the data that is coming is fine. So, the problem is somewhere the highchart persists the first data. I have been struggling with this for past 7 hours. Can someone please answer how to resolve this?