I'm using highcharts inside of an angular directive and i need to be able to click on the entire div but the chart inside the div isn't doing anything when i click on it.
I've tried putting a clear div with absolute positioning over the highcharts div but still nothing happens when I click inside the chart area.
I'd prefer not to pass the click functionality to highcharts as it would add extra dependencies. I feel like there should be some sort of highcharts property for this but I'm not able to find it.
Anyways here is the code..
Directive Template (note the commented out clear div right above the chart area):
<div class="key-metric" ng-click="makeMetricInFocus($event)">
<!--<div class="overlay" ng-click="makeMetricInFocus()"></div>-->
<div id="{{metricData.metricName}}" class="key-metric-chart">
</div>
The make metricInFocus function is located in the directive, it just updates the model.
Here is the code for the highChart (it's called through the directive):
headGraphService.sparkLine = function (metricInfo, chartContainer) {
var container = $('#' + chartContainer);
if (container.highcharts()) {
container.highcharts().destroy();
}
$timeout(function () {
new Highcharts.Chart({
chart: {
renderTo: chartContainer,
margin: 0,
backgroundColor: 'transparent',
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
labels: {
enabled: false
},
// maxPadding: 0,
// minPadding: 0,
gridLineWidth: 0,
endOnTick: false
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: false,
lineWidth: 1,
shadow: false
},
marker: {
enabled: false,
radius: 0
},
line: {
marker: {
enabled: false
}
}
},
series: [{
color: metricInfo.chartingColors.summaryLine,
type: 'line',
data: metricInfo.data
}],
exporting: {
enabled: false
}
})
}, 500)
Related
As the title says, i want to switch the tooltip header with the tootlip body text.
for me it makes no sense why the standard config is this way around...
i know i can create a custom tootlip but thats not my favorite way to do it.
the code im using currently
var options = {
series: [{
name: 'Series',
data: [v0, v1, v2, v3, v4]
}],
colors: ['#3979bd', '#c1a748', '#69b761', '#69b761', '#d54c4c'],
chart: {
type: 'bar',
height: 200
},
plotOptions: {
bar: {
distributed: true,
borderRadius: 0,
horizontal: true,
}
},
tooltip: {
enabled: true,
},
dataLabels: {
enabled: true,
},
xaxis: {
categories: ['open', 'planned', 'done', 'done cloud', 'stopped'],
}
};
var chart = new ApexCharts(document.querySelector("#overview_apex_sc4stats"), options);
chart.render();
and heres a image what i want
please take a look at this jsfiddle first
jsfiddle example of sparkline
Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
hideDelay: 0,
outside: true,
shared: true
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
i try to use the concept of having those sparkline between table tags and achieve a chart with more than 2 column on left and right , however instead of sparkline i need bar chart like a picture below
please help me on this problem ...
Update :
thanks to ppotaczek and his suggestion on changing to bar type i had another problem on the way
updated jsfiddle with bar type
well now i don't know how to make every row to adopt xrow size of 115 . at this moment all bar chart draw the entire cell but 20 from 115 must have different view via 71 from 115 ...
any suggestion to how to put 0 to 115 on the top of the table and adjust the bar charts with that ?
You need to change chart.type to 'bar' and adapt data in the HTML table.
chart: {
type: 'bar',
...
}
Live demo: https://jsfiddle.net/BlackLabel/cyuvws37/
API Reference: https://api.highcharts.com/highcharts/chart.type
I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});
I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.
Below is the entire document I am using to try to generate a highcharts sparkline:
<script>
var sparkOptions = {
title: {
text: ''
},
credits: false,
chart: {
renderTo: 'container',
width: 120,
height: 20,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
skipClone: true
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
legend: {
enabled: false
},
tooltip: {
enabled: false
}
};
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
t.addSeries({
data: [1, 2, 3, 4, 5]
});
</script>
<div id="container" style="height: 40px; width: 200px;">
<div id="the_chart"></div>
</div>
I've been searching for hours to try to get this to work. Can anyone point out what I am doing incorrectly? I have been using this link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/. Thanks in advance for any help you can give me!
In Highcharts you have 2 ways of defining WHERE to put the chart:
Using the renderTo property of chart
calling the highcharts() function on the JQuery object of the container (ex: $('#container').highcharts({options})
In your code you are using both methods since you defined renderTo: 'container' in the sparkOptions and then called the highcharts method over another JQuery object $('#the_chart').highcharts(sparkOptions);
To make it work you should change your last lines:
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
to:
var t = new Highcharts.Chart(sparkOptions);
and the remove the extra container you have in the html, the one with id the_chart.
Also you should wrap your code into '$(function () { << HERE YOUR SCRIPT >>});' to make sure it gets executed after Highcharts is loaded.
Fiddle
I've been creating charts on my company's website with data that is populated from a csv file. I need to add two additional y axes on the right side of the chart. I tried doing so by following Highchart's instructions, but my data is coming from a CSV file and I can't manage to get the two additional axes to connect to the data. Meaning, the other two splines look flat compared to the one that is actually plotting to it's y axis.
Below is the chart's JS file. The CSV file is 4 columns, which from left to right are Date, Overall, VIX, GSPC
Thank you in advance!
function basi_overall_chart() {
//var to catch any issues while getting data
var jqxhr_basi_overall = $.get('../../datafiles/basi/company_BASI_Overall_VIXSP.csv', function (data) {
var options = {
//chart options
chart: {
//set type of graph, where it renders
type: 'line',
renderTo: 'basi_overall_container'
},
//set title of graph
title: {
text: 'company Bid-Ask Spread Index (BASI)',
style: {
color: '#4D759E'
},
align: 'center'
},
//set xAxis title
xAxis: {
title: {
text: 'Date',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
}
},
//set yAxis info
yAxis: [{
title: {
text: 'Basis Points (BPS)',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
},
labels: {
//give y-axis labels commas for thousands place seperator
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
//set y-axis to the left side
opposite: false,
//set background grid line width
gridLineWidth: 1
}, { // Second yAxis
gridLineWidth: 1,
title: {
text: 'VIX',
style: {
color: '#de5a3c',
fontWeight: 'bold'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
opposite: true
}, { // Third yAxis
gridLineWidth: 1,
title: {
text: 'SP',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
opposite: true
}],
//stylize the tooltip
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 4
},
//enable and stylize the legend
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
borderWidth: 1,
borderRadius: 5,
itemDistance: 20,
reversed: false
},
//set the starting range. 0-5. 5="All", 4="1yr", etc
rangeSelector: {
selected: 5,
allButtonsEnabled: true
},
//set general plot options
plotOptions: {},
//disable credits
credits: {
enabled: false
},
//make download as csv format correctly
navigator: {
series: {
includeInCSVExport: false
}
},
//set name of chart downloads
exporting: {
filename: 'company_basi_overall',
//enable download icon
enabled: true,
//add image to download
chartOptions: {
chart: {
events: {
load: function () {
this.renderer.image('http://www.company.com/images/company_logo2.gif', 90, 75, 300, 48).attr({
opacity: 0.1
}).add();
}
}
},
//remove scrollbar and navigator from downloaded image
scrollbar: {
enabled: false
},
navigator:{
enabled: false
}
},
//make download as csv format correctly
csv: {
dateFormat: '%Y-%m-%d'
}
},
//set graph colors
colors: ['#002244', '#DBBB33', '#43C5F3', '#639741', '#357895'],
//series to be filled by data
series: []
};
//names of labels in order of series. make sure they are the same as series header in data file
var names = ['BASI', 'VIX', 'SP'];
//get csv file, multiply by 100 (divide by .01) and populate chart
readCSV(options, data, 1.0, names);
var chart = new Highcharts.StockChart(options);
})
//catch and display any errors
.fail(function (jqxhr_basi_overall, exception) {
ajaxError(jqxhr_basi_overall, exception, '#basi_overall_container');
});
}
(function () {
//set high level chart options for all charts
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
$('.chart_container').toggle(false);
basi_overall_chart();
$('#basi_overall_container').toggle(true);
all_crossable_volume_chart();
auto_assign_toggle_chart_buttons();
})();