We Keep Coding

ECharts how to set different symbol for different marklines in one chart

In echarts, I have a bar chart, I want to add two markLine for it, but for the 'average' line I need the arrow style, for the 'test' line I do not want any symbol at the start and end of the line.
When I use below setting,it will set all markLines without arrow while I want to control each markLine's style separately.
markLine: {
symbol:"none",
data:[]
}
function format(data)
{
data = parseFloat(data);
return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
var columns_basic_element = document.getElementById("columns_basic");
// Basic columns chart
if (columns_basic_element) {
// Initialize chart
var columns_basic = echarts.init(columns_basic_element);
var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53];
var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22];
//
// Chart config
//
// Options
columns_basic.setOption({
// Define colors
color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 90,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Parts', 'Labor'],
itemHeight: 8,
itemGap: 20,
textStyle: {
padding: [0, 5]
}
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return '$' + Intl.NumberFormat().format((value/1000));
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Labor',
type: 'bar',
data: data_labor,
label: {
normal: {
formatter: function (params) {
var val = format(params.value);
return val;
},
show: true,
//position: 'inside'
},
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
markLine: {
symbol:"none",
data: [
{
// I want to set symbol:none for this line only
name: 'test',
yAxis:120000 ,
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
},
{
//keep its original style
type: 'average',
name: 'Average',
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
}]
}
}
]
});
}
.chart-container {
position:relative;
width:100%;
}
.chart {
position:relative;
display:block;
width:100%;
}
.has-fixed-height {
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div class="chart-container">
<div class="chart has-fixed-height" id="columns_basic"></div>
</div>

I showed to you almost all of possible tweaks without hacking sources, if you need more — try to read by yourself:
Base Concepts
MarkerModel.js
MarkLineView.js
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
data: ["1", "2", "3", "4", "5", "6"]
},{
data: ["1", "2", "3", "4", "5", "6"],
show: false,
}],
yAxis: {},
series: [
{
name: 'Series1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'none',
name: 'max line',
type: 'max',
lineStyle: {
normal: {
type:'solid',
color: 'blue',
}
},
}],
}
},{
name: 'Series2',
type: 'bar',
data: [0,0],
xAxisIndex: 1,
label: { show: false },
markLine: {
symbol: 'none',
data: [{
yAxis: 24,
label: {
normal: {
show: false,
}
},
lineStyle: {
normal: {
type:'dashed',
color: 'green',
}
},
}],
}
}]
}
myChart.setOption(option);
<div id="main" style="width: 600px;height:600px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

You have mistake with incorrect symbol declaration, do like this:
markLine: {
symbol: 'icon' // <---- it's wrong
data: [{
symbol: 'diamond', // <---- it's right
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
var myChart = echarts.init(document.getElementById('main'));
// Unsert your code below
var option = {
xAxis: {
data: ["1", "2", "3", "4", "5", "6"]
},
yAxis: {},
series: [{
name: 'Series1',
stack: '1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'diamond',
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
}]
}
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Displaying data ArrayList (EJB + Servlet + JSP(JSTL)) to JavaScript ArrayList

In a servlet I send ArrayList on JSP page and try to insert ArrayList into JavaScript(Highcharts), but I don't have any idea how to do it.
This code below is the code that take ArrayList from servlet on JSP page.
<c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit}
</c:forEach>
And the code below is Javascript(highcharts) that I want to display ArrayList that sent from servlet.
<script type="text/javascript">
$(function() {
$('#container').highcharts(
{
chart : {
type : 'line'
},
title : {
text : 'Monthly Average Temperature'
},
subtitle : {
text : 'Source: WorldClimate.com'
},
xAxis : {
categories : [ 'Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov',
'Dec' ]
},
yAxis : {
title : {
text : 'Temperature (°C)'
}
},
plotOptions : {
line : {
dataLabels : {
enabled : true
},
enableMouseTracking : false
}
},
series : [
{
name : 'Water',
data : [ 7.02, 6.91, 9.53,
14.54, 18.41, 21.54,
25.21, 26.54, 23.35,
18.23, 13.91, 9.26 ]
},
{
name : 'Electricity',
data : [ 3.49, 4.25, 5.67,
8.35, 11.59, 15.26,
17.20, 16.63, 14.32,
10.35, 6.56, 4.08 ]
} ]
});
});
</script>
The code here, I want to replace these data with the ArrayList.
data : [ 3.49, 4.25, 5.67,
8.35, 11.59, 15.26,
17.20, 16.63, 14.32,
10.35, 6.56, 4.08 ]

data : [ 3.49, 4.25, 5.67,
8.35, 11.59, 15.26,
17.20, 16.63, 14.32,
10.35, 6.56, 4.08 ]
Just replace the code inside with ArrayList that you take from servlet on JSP, like below. Because this code "${el.electricity_meter_record_unit}" is already ArrayList. After you update the code, you might see some error or red warning but it's able to run anyway. Hope this might help.
data : [ <c:forEach items="${elecMeterRecordList}" var="el" >
${el.electricity_meter_record_unit},
</c:forEach> ]

You need to write your array list as json object
All you need to do is to use a good json library for example Gson that converts your array list into JSON object
Use Ajax request to retrieve your json object from your servlet
The following code (javascript code) is taken from highchart demo
$(function () {
// Get the CSV and create the chart
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
HTH

How to display different tooltip formats in series of data in High Chart

Here I have a series of data while some of the series having time duration like 00:12:00 and other having an int value,
Here is my Javascript code (you can also view it on JSFiddle):
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
inverted: false
},
title: {
text: 'Duration Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
type: "datetime",
title: {
text: 'Time Duration'
},
lineWidth: 2,
labels: {
formatter: function () {
var ts = this.value,
hs = ts / (3600 * 1000),
ms = new Date(ts).getUTCMinutes();
sc = new Date(ts).getUTCSeconds();
sc = sc < 10 ? '0' + sc : sc;
ms = ms < 10 ? '0' + ms : ms;
hs = hs < 10 ? '0' + hs : hs;
if(hs > 1)
return hs + ":" + ms +":" + sc;
else
return ms +":" + sc;
}
}
},
tooltip:{
formatter:function() {
return Highcharts.dateFormat('%H:%M:%S',this.y);
}
},
legend: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Time',
data: [600000, 2520000,75610000]
},
{
name: 'Price',
data: [12,778,123]
}]
});
});
Here is my HTML code:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
How can I differentiate multiple series data in High Chart?

Try this:
tooltip:{
formatter:function() {
var a = Highcharts.dateFormat('%H:%M:%S',this.y);
if(a === "00:00:00"){
return this.y;
}else{
return a;
}
}
}
Here Is the updated fiddle:
http://jsfiddle.net/ishandemon/efgu7eru/2/
Updated fiddle with series name: http://jsfiddle.net/ishandemon/efgu7eru/3/

data with the chart does not fit in highcharts js

I'm making a chart with highcharts.js but I find it difficult when the chart is displayed not in accordance with the existing data.
I have created a chart on JSFiddle.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
credits: {
enabled: false
},
title: {
text: ''
},
colors: ['#ff0000', '#18b55b'],
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']
}],
yAxis: [{
min: 0,
labels: {
enabled: false
},
title: {
text: '',
}
}, {
min: 0,
title: {
text: '',
},
labels: {
formatter: function () {
return this.value + '%';
}
}
}],
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}],
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var s = '<table>';
$.each(this.points, function () {
s += '<b style="text-align: right; color: ' + this.series.color + '">' + this.y + '%' + this.point.value + '</b><br/>';
});
return s;
},
footerFormat: '</table>',
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{"name":"Aktual","type":"column","yAxis":1,"data":[{"y":0,"value":""},{"y":0,"value":""},{"y":12.06
,"value":" - 122,890,156"},{"y":2.66,"value":" - 27,080,668"},{"y":0,"value":""},{"y":0,"value":""},
{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0
,"value":""}]},{"name":"Plan","type":"spline","data":[{"y":0,"value":""},{"y":0,"value":""},{"y":2.17
,"value":""},{"y":2.17,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value"
:""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""}]}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts disable click on column

I have a column chart. When clicking one of the vertical bars, the color of the selected bar changes. I want to disable this behaviour by disabling the detection of the 'click' event on the graph so when the user clicks there nothing happens.
Anyone knows how to do that?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
backgroundColor: 'transparent',
container: {
onclick : null
}
},
colors: ['#27A1DE'],
title: {
text: null
},
credits : {
enabled: false
},
exporting : {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'h',
align: 'high',
offset: -15
},
tickColor : 'transparent',
labels: {
style: {
fontWeight:'bold'
},
y: 12,
formatter: function() {
var index = this.axis.categories.indexOf(this.value);
var yValue = this.chart.series[0].yData[index];
if (yValue === 0){
return '<span>'+this.value+'</span>';
} else {
return '<span style="color:#009DE0;">'+this.value +'</span>';
}
}
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
title: {
align: 'high',
rotation: 0,
text: 'kWh',
offset: 0,
y: -2
}
},
plotOptions: {
column: {
pointPadding: 0.05,
groupPadding: 0,
dataLabels : {
enabled: true,
crop :false,
overflow: 'none',
rotation: 270,
x:2,
y:-14,
style: {
color: '#009DE0',
fontSize: 'xx-small',
},
formatter: function() {
if (this.y != 0){
return '<span>'+this.y +'</span>';
} else {
return '<span style="display:none;">'+this.y +'</span>';
}
}
},
borderWidth: 0,
events: {
click: function(e){
//this.update({ color: '#27a1de' }, true, false);
e.preventDefault();
return false;
}
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
}
}
}
}
},
series: [{
name: '',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
tooltip: {
enabled: false
}
});
Fiddle : here
Thanks

the way I understood your problem, you want to remove the style change on mouse hover (as there is no color change on click in your fiddle unlike you described).
http://jsfiddle.net/6pur4o1w/
states: { hover: 'none' }
in the series should do what you want.