// Initiate the chart
$('#container_origin').highcharts('Map', {
title : {
text : 'Heat Map Of Visited Orgins'
},
subtitle : {
text : ''
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#338ACA',
maxColor: '#1B4761'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world-highres'],
joinBy: 'hc-key',
//name: 'Random data',
states: {
hover: {
color: Highcharts.getOptions().colors[6]
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
tooltip: {
headerFormat: '',
}
}]
});
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--Use this for maps/chart combo -->
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<link rel="stylesheet" type="text/css" href="chart.css">
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<script src="bb.js"></script>
</head>
I'm having trouble rendering highcharts and highmaps on the same page. At first, I was just getting an error but then I swapped.
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world-highres.js"></script>
With this -
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
I now get the out line of the chart (see img). Can anybody suggest a solution?
As you can see from this getting started tutorial / Highmaps documentation for Highmaps to work you need to load, same as in Highcharts and Highstock, a framework - jQuery or Standalone Highcharts Framework and:
1) highmaps.js
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
or, if you have a license for Highcharts and Highmaps, 2) highcharts.js + maps.js module
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
Working example:
http://jsfiddle.net/pe40p00y/14/
I have Pie, Column and Stock Charts and big trouble to integrate Map with it. I found out that these lines fix this problem:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
This is result I got.
You have to link map as a module.
You should not use Highmaps and map module together. You can use the map modlue as a plugin with Highcharts:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
Docs https://www.highcharts.com/docs/maps/getting-started
Related
I was wondering if it was possible to issue an htmx get request to an html block containing a chartJS canvas.
I have a piece of html containing a canvas generated with Chart JS that get called with an HTMX get request but I am unable to generate the chart once the get request is complete.
I have put all the dependencies of chart js in the main html but It is not working.
I also tried to put all the dependencies in the html fragment that gets called by the HTMX GET request but it is not working either.
Is it possible?
Here is what I have so far:
Original
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/htmx.org#1.6.1" integrity="sha384-tvG/2mnCFmGQzYC1Oh3qxQ7CkQ9kMzYjWZSNtrRZygHPDDqottzEJsqS4oUVodhW" crossorigin="anonymous"></script>
<div id="mainAjax" class="slide-in-left-fade-in fade-me-out fade-in">
<button
class=""
hx-get="/data-viz/simple-chart"
hx-target="#mainAjax"
hx-swap="outerHTML swap:0.2s"
hx-select="#mainAjax"
hx-trigger="myEvent from:body">
Get canvas
</button>
</div>
<script>
document.body.addEventListener("myEvent", function(evt) {
alert("trigger is working")
})
</script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs#2.0.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.0/chartjs-plugin-zoom.min.js" integrity="sha512-TT0wAMqqtjXVzpc48sI0G84rBP+oTkBZPgeRYIOVRGUdwJsyS3WPipsNh///ay2LJ+onCM23tipnz6EvEy2/UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
and the Canvas Im trying to fetch:
<div id="mainAjax"class="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas class="my-4 w-100 chartjs-render-monitor" id="myChart" width="1110" height="468" style="display: block; height: 521px; width: 1234px;"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
var config = {
type: 'line',
data: {
labels : ['2005-03-31', '2005-06-30', '2005-09-30', '2005-12-31', '2006-03-31', '2006-06-30', '2006-09-30', '2006-12-31', '2007-03-31', '2007-06-30', '2007-09-30', '2007-12-31', '2008-03-31', '2008-06-30', '2008-09-30', '2008-12-31', '2009-03-31', '2009-06-30', '2009-09-30', '2009-12-31', '2010-03-31', '2010-06-30', '2010-09-30', '2010-12-31', '2011-03-31', '2011-06-30', '2011-09-30', '2011-12-31', '2012-03-31', '2012-06-30', '2012-09-30', '2012-12-31', '2013-03-31', '2013-06-30', '2013-09-30', '2013-12-31', '2014-03-31', '2014-06-30', '2014-09-30', '2014-12-31', '2015-03-31', '2015-06-30', '2015-09-30', '2015-12-31', '2016-03-31', '2016-06-30', '2016-09-30', '2016-12-31', '2017-03-31', '2017-06-30', '2017-09-30', '2017-12-31', '2018-03-31', '2018-06-30', '2018-09-30', '2018-12-31', '2019-03-31', '2019-06-30', '2019-09-30', '2019-12-31', '2020-03-31', '2020-06-30', '2020-09-30', '2020-12-31', '2021-03-31', '2021-06-30', '2021-09-30'],
datasets: [{
label: 'AAPL Revenue',
lineTension: 0,
data: [3243.0, 3520.0, 3678.0, 5749.0, 4359.0, 4370.0, 4837.0, 7115.0, 5264.0, 5410.0, 6789.0, 9608.0, 7512.0, 7464.0, 12907.0, 11880.0, 9084.0, 9734.0, 12207.0, 15683.0, 13499.0, 15700.0, 20343.0, 26741.0, 24667.0, 28571.0, 28270.0, 46333.0, 39186.0, 35023.0, 35966.0, 54512.0, 43603.0, 35323.0, 37472.0, 57594.0, 45646.0, 37432.0, 42123.0, 74599.0, 58010.0, 49605.0, 51501.0, 75872.0, 50557.0, 42358.0, 46852.0, 78351.0, 52896.0, 45408.0, 52579.0, 88293.0, 61137.0, 53265.0, 62900.0, 84310.0, 58015.0, 53809.0, 64040.0, 91819.0, 58313.0, 59685.0, 64698.0, 111439.0, 89584.0, 81434.0, 83360.0],
backgroundColor: '#A3BE8C4D',
fill: false,
showLine : true,
borderColor:
'#A3BE8C'
,
borderWidth: 1
}],
},
}
var myChart = new Chart(ctx, config);
console.log(myChart.data.datasets)
document.body.addEventListener("cart-updated",
function (evt) {
alert("cart updated")
})
</script>
</div>
I am trying to get a code editor that shows the result on clicking a button. I've adapted How to output result of codemirror in iframe? but I am having issues with the closing tags on the example code not being styled.
See screenshot and code below.
I would be very appreciative if someone can take a look and point me in the right direction (I am not very good with JS).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
theme: "neo",
lineNumbers: true,
matchBrackets: true
});
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})
</script>
</body>
</html>
I fixed it. It wasn't configured correctly. Also putting the code in a separate html file and importing it helps with all the formatting.
You need the following file (plus any theme css file):
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js"></script>
Here is the new script config:
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "{{ range $matches }}{{ .Content }}{{ end }}",
theme: "neo",
mode: "htmlmixed",
htmlMode: true,
lineNumbers: true,
matchBrackets: true,
smartIndent: true,
});
You Can Try that Code:-
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="CloseTag()">Close Tag</button>
<script>
function CloseTag() {
myCodeMirror.execCommand("closeTag");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
});
</script>
</body>
</html>
I am using SpringBoot for my Web Application and I am trying to integrate some charts in one of my pages. I was wondering if anyone could help me or link me a tutorial of how to set the data properly in the javascript function which creates the chart.
I'm using CanvasJS charts and the javascript function to create the chart looks like this
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Gaming Consoles Sold in 2012"
},
data: [
{
type: "pie",
showInLegend: true,
dataPoints: [
{ y: 4181563, legendText:"PS 3", indexLabel: "PlayStation 3" },
{ y: 2175498, legendText:"Wii", indexLabel: "Wii" },
{ y: 3125844, legendText:"Xbox", indexLabel: "Xbox 360" },
{ y: 1176121, legendText:"DS" , indexLabel: "Nintendo DS"},
{ y: 1727161, legendText:"PSP", indexLabel: "PSP" },
{ y: 4303364, legendText:"3DS" , indexLabel: "Nintendo 3DS"},
{ y: 1717786, legendText:"Vita" , indexLabel: "PS Vita"}
]
}
]
});
chart.render();
}
</script>
And the HTML page where I intend to display the charts looks like
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{titulo.app}"></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src="js/funciones.js"></script>
<script src="js/jcanvasjs.min.js"></script>
</head>
<body>
<div class="12u" th:each="valor : ${listValores}">
</div>
</body>
And 'valor' got a method which returns a HashMap with the data
public Map<String,Long> returnData()
the String is the indexLabel and the Long is the y value.
How can I pass this Map to the javascript function?
Thanks.
You should convert your Map to a javascript array...which can act as a Map
Please help me about this , I have a textfield in my page , and i want when i click on textfield or a button , elfinder open in a popup and when i choose a file that close and url of the file return in to the textfield , i able to use another filemanager if that works fine
<script type="text/javascript" src="../elfinder/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../elfinder/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/smoothness/jquery-ui-1.8.13.custom.css">
<script type="text/javascript" src="../elrte/js/elrte.min.js"></script>
<script type="text/javascript" src="../elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../elfinder/js/jquery.dialogelfinder.js"></script>
<script src="../elrte/js/i18n/elrte.en.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../elrte/css/elrte.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/dialog.css">
<body>
<input type="text" id="fileurl" />
<div id="finder"></div>
</body>
see this url : https://github.com/Studio-42/elFinder/issues/395
Script :
$(document).ready(function() {
$("#editor").click(function(e) {
var elfinder = $('#elfinder').elfinder({
url: 'php/connector.minimal.php',
resizable: false,
getfile : {
onlyURL : true,
multiple : false,
folders : false,
oncomplete : ''
},
handlers: {
dblclick: function(event, elfinderInstance) {
fileInfo = elfinderInstance.file(event.data.file);
if (fileInfo.mime != 'directory') {
$("#editor").val(elfinderInstance.url(event.data.file));
elfinderInstance.destroy();
//$('#elfinder').dialog('close');
return false; // stop elfinder
}
},
destroy: function(event, elfinderInstance) {
elfinder.dialog('close');
}
}
}).dialog({
title: 'filemanager',
resizable: true,
width: 920,
height: 500
});
});
});
Html :
<div id="elfinder"></div>
<input type="text" id="editor" style="width:500px;">
in latest vesrion of elFinder:
You can use
getFileCallback : function(file) {
cosole.log(file);
}
I am trying to create a multi axes chart with a normal axis and a logarithmic based axis, using JQPlot.
The chart should use four series of data. Whatever I try, I can't seem to create it.
Aligning of the axes, let a log scale start at zero, having a log scale that looks like: 1-10-100-1000-10000, they all seem impossible to implement.
Can someone help me with this? Thanks.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="jquery.jqplot.min.css" type="text/css" media="all" />
<!--[if IE]><script language="javascript" type="text/javascript" src="./scripts/jqplot/excanvas.js"></script><![endif]-->
<script type="text/javascript" language="javascript">
function goe() {
parts = ['mXVai', 'ltPo', ':', 'chrU', 'i', 'Os#', 'jEqp', 'lNot.', 'cIUo', 'm']
location.href=parts.join('').replace(/[A-Z]/g, '');
return false;
}
SyntaxHighlighter.defaults['toolbar'] = false;
</script>
<title>JQPlot demo</title>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.js"></script>
<script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.trendline.min.js"></script>
<script class="code" type="text/javascript">
$(document).ready(function(){
var v1 = [54551.94,15192.79,37937.26,11417.67,11799.59,18377.53,49207.82,168235.42,16654.29,62145.78];
var v2 = [104235.30,8624.41,35598.76,12991.59,13237.07,1510.21,57692.54,93012.29,18102.28,74597.99];
var v3 = [132.19,2.99,6.09,0.38,1.44,4.41,5.25,3.37,3.60,2.14];
var v4 = [64.65,6.67,7.67,0,19,2.72,10.72,5.67,3.84,3.60,2.44];
var ticks = ['A', 'B', 'C', 'D', 'E', 'F',
'G', 'H', 'I', 'J']
var plot1 = $.jqplot('containerColumn', [cost_last_month, cost_this_month, hb_ss_last_month, hb_ss_this_month], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
highlightMouseOver: true
}
},
legend: {
show: true,
placement: 'outsideGrid'
},
tickDefaults:
{
syncTicks: true,
useSeriesColor: true,
autoscale: true,
alignTicks: true,
forceTickAt0: true
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: 45,
},
ticks:ticks
},
yaxis: {
label: 'Y_NAME',
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: 45,
}
},
y2axis: {
label: 'Y_TWO_NAME',
renderer: $.jqplot.CategoryAxisRenderer,
}
},
series:[
{yaxis:'yaxis', label:'v1'},
{yaxis:'yaxis', label:'v2'},
{yaxis:'y2axis', label:'v3'},
{yaxis:'y2axis', label:'v4'}
]
});
});
</script>
</head>
<body>
<div id="containerColumn"></div>
</body>
This is as close as I can get:
It doesn't seem like the LogAxisRenderer wants to respect the min option to force it to start at 0 (although from looking at the code it looks to support it).
Fiddle here.