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.
Related
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 want to use echarts to zoom time axis(X axis) and Y axis.But I don not know how to do it,what attribute to add can zoom X axis and Y axis?
I mean, when my left mouse's button selects a part of the X axis, I should zoom the selected part.
You can use my code to test.Now my code:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: 'Importance',
left: 'center',
top: '100'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '20%',
right: '20%',
top: '20%',
bottom: '20%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018week1','2018week2','2018week3','2018week4','2018week5','2018week6','2018week7','2018week8','2018week9','2018week10']
},
yAxis: {
type: 'value'
},
series: [
{
name:'peter',
type:'line',
data:[1889,2930,2059,1948,1814,2071,2183,3234,3426,2188]
},
{
name:'kate',
type:'line',
data:[875,694,919,1092,815,1137,1421,1547,1737,1748]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
The running effect of my codeļ¼
You are not setting any datazoom option.
See https://echarts.apache.org/en/api.html#action.dataZoom
// 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
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);
}
Is there a way for codemirror to highlight the code matching a pattern (like if I use the search addon) when the page load? So I could load the page with ?search=my_pattern and pass the pattern to codemirror.
Here's a sample code and a jsfiddle. You can use CTRL+F to use the search addon.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'python',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/ErxMb/
I figured out how to do it using overlay.js by looking at the CodeMirror: Overlay Parser Demo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/overlay.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<style type="text/css">
.cm-highlightSearch {background: yellow;}
</style>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var keyword = 'hello';
CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
var searchOverlay = {
token: function(stream, state) {
if (stream.match(keyword)) {
return "highlightSearch";
}
while (stream.next() != null && !stream.match(keyword, false)) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "python"), searchOverlay);
});
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'highlightSearch',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/HkjY7/