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
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.
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)
I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.
This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.