How can I edit the text of my Legend in my Heatmap?
http://jsfiddle.net/z3auc57d/4/
I would like to edit the Text "0, 2.5 ...10" to say "Low" and "High" for the left and rightmost text resp.
$('#container').highcharts({
credits: false,
title: false,
legend: {},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: data
}],
legend:{
//...
},
colorAxis: {
minColor: '#A3D9FF',
maxColor: '#FF5460'
}
});
Could find anything appropriate in the API doc yet...
http://api.highcharts.com/highcharts#plotOptions.heatmap.showInLegend
http://jsfiddle.net/ioying/aey0coov/
labels: {
formatter: function() {
if (this.isFirst) {
return 'low ' +this.value;
} else if (this.isLast) {
return ' '+ this.value + 'high ';
} else {
return this.value;
}
}
}
Related
Has anyone ever tried to insert another chart with completely different data to the tooltip which is popping up when hovering over data points?
I have checked the possibilty to pass html to the formatter, but not sure how dynamically this is working.
I have a bubble chart and it would be perfect to add small line charts to the tooltips of the bubbles.
Yes, it is possible.
If you set tooltip's useHTML to true and create a chart in it, then you will get a chart in a tooltip.
Example: http://jsfiddle.net/n9z7r5uj/
$(function() {
$('#container').highcharts({
series: [{
type: 'bubble',
data: [[1,2,3],[4,1,6],[2,3,9]]
}],
tooltip: {
useHTML: true,
pointFormatter: function() {
var data = [this.x, this.y, this.z];
setTimeout(function() {
$('#chart').highcharts({
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
animation: false,
data: data
}],
yAxis: {
title: ''
},
xAxis: {
categories: ['x','y','z']
}
});
}, 0);
return '<div id="chart" style="width: 100px; height: 150px;"></div>';
}
}
});
});
this is showing data json type from query database but can't show chart on page. what the problem?
The first image shows the results of a database query that I've already done1
whereas the second graphic image display json, but do not appear in my web page]2
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'pendapatan',
type: 'line'
},
title: {
text: 'PENDAPATAN DAN PENGELUARAN'
},
subtitle: {
text: 'Source: Data pendapatan dan pengeluaran harian'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Rupiah'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: []
}
$.getJSON("home/dashboard/show_pendapatan_pengeluaran", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
I have a highcharts bargraph whose values are received from json whose format is as follows:
"bargraph":
[
{
"categories": "['S', 'M', 'T', 'W', 'T', 'F']",
"series1": "[800, 1100, 80, 1800, 1600, 2000]",
"series2": "[800, 1100, 80, 1800, 1200, 800]"
}
]
How can i embed those values for my bargraph in angularJS
HTML Code:
<div id="bargraph" bargraph={{bargraph}}><\div>
Directive:
angular.module('example').directive('bargraph', function () {
element.highcharts({
xAxis: [
{
categories: [] //embed categories value here
},
series: [
{
name: 'series1',
data: [] //Embed series1 data here
},
{
name: 'series2',
data: [] //Embed series2 data here
}
]
})
})
Please provide a suitable way to embed the data from json.
Here is a directive i copied and pasted from my webapp it is how i render highcharts using a directive NOTE: not all of this directive is applicable to you and some of it is specific to what i needed but you get the idea.
lrApp.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
transclude: true,
replace: true,
link: function (scope, element, attrs) {
var chart = null;
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null,
},
colors: scope.$eval(attrs.colors) || null,
title: {
style: {
display: 'none'
}
},
xAxis: {
//categories: ['{"-7 days"|date_format}','{"-6 days"|date_format}','{"-5 days"|date_format}','{"-4 days"|date_format}', '{"-3 days"|date_format}', '{"-2 days"|date_format}', '{"-1 day"|date_format}', '{$smarty.now|date_format}'],
categories: scope.$eval(attrs.dates) || null,
gridLineDashStyle: 'ShortDot',
gridLineColor: "#C0C0C0",
gridLineWidth: 1,
labels: {
y: 27
}
},
yAxis: {
title: {
text: null
},
min: 0,
gridLineDashStyle: 'ShortDot',
gridLineColor: "#C0C0C0",
gridLineWidth: 1
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
shadow: false,
lineWidth: 3
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '</b>';
}
}
};
//Update when charts data changes
scope.$watch(attrs.value, function (newVal, oldVal) {
if (!newVal.length) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var deepCopy = true;
var newSettings = {};
chartsDefaults.series = newVal;
chartsDefaults.colors = scope.$eval(attrs.colors);
chartsDefaults.xAxis.categories = scope.$eval(attrs.dates);
console.log(chartsDefaults);
chart = new Highcharts.Chart(chartsDefaults);
});
}
}
});
and this is how it used it obviously you would change "line" to bar:
<chart value="stats.sets" dates="stats.days" colors="stats.colors" type="line"></chart>
I have a problem with my HighStock, I need another series from JSON.
My code in get_json.php
include('config.php');
$cp = $_REQUEST["c_prot"];
$r=("SELECT * FROM data WHERE cp='$cp'");
$result=mysql_query($r);
while($row = mysql_fetch_array($result)){
$date= strtotime($row['cas'])*1000; // timestamp
$values=hexdec($row['data']); // series1
$val=hexdec($row['src']); // series2
$array[]=array($date, $values,$val); //output array
}
echo json_encode($array);
JSON output is in correct format: [1364852734000, 557, 2884],....
But problem is, that I didn't find how to add second series from JSON to Highstock code
I would like to display in chart x-axis: timestamp
y-axis: series1->data
series2->src
chart now displays only on x-axis timestamp and on y-axis data...but series2 doesn't work:/
High Stock code:
<script>
$(function () {
$.getJSON('http://localhost/vojto/get_json.php?c_prot=<?=$_REQUEST['
c_prot '];?>', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart: { //zooming
zoomType: 'x',
height: 400,
},
legend: { //legenda
enabled: true,
align: 'left',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 1,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
rangeSelector: { //range selector
buttonTheme: {
width: 40,
},
buttonSpacing: 3, //mezera mezi buttony
enabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'Hour'
}, {
type: 'day',
count: 1,
text: 'Day'
}, {
type: 'week',
count: 1,
text: 'Week'
}, {
type: 'all',
text: 'Reset'
}]
},
title: { //title grafu
text: 'Chart'
},
series: [{ //serie
name: 'Data',
data: data,
color: '#57c72f',
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}],
xAxis: { // X-osa
type: 'datetime',
title: {
text: 'Date/time axis',
},
minRange: 600000,
},
yAxis: {
min: 0,
},
navigator: {
series: {
color: '#57c72f',
fillOpacity: 0.3,
}
},
credits: {
enabled: false
},
tooltip: { // formátování hodnot po najetí kurzoru... hover
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('DateTime ' + '%d-%m-%y ' + '%H:%M:%S', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>Data value : ' + point.y;
});
/* formát 23-04-13 09:34:27 */
return s;
}
},
});
});
});
</script>
In you script:
$array = [];
while($row = mysql_fetch_array($result)){
$date= strtotime($row['cas'])*1000; // timestamp
$values=hexdec($row['data']); // series1
$val=hexdec($row['src']); // series2
$array[0][]=array($date, $values); //output array
$array[1][]=array($date ,$val);
}
You need paste values to appropriate series index. In other words you can prepare your $array() and add point to one of series. To be honest I have no data so It is only concept.
I've overridden the color of a bar in a bar chart by acting directly on the graphic. It works on initial load, but if I hover over the bar to display the tooltip, when I mouseout, it reverts to the default color, not my custom choice.
How would I edit the settings for that event on just the one bar.
See:
http://jsfiddle.net/WQkeQ/4/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:4000,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
if(this.y > (this.series.chart.yAxis[0].max))
return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
else
return this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
},function(chart){
var max = chart.yAxis[0].max,
content = '<h2>Points</h2><br/>';
$.each(chart.series,function(i,serie){
$.each(serie.data,function(j,data){
if(data.y > max){
content += 'Point: '+data.y+' is bigger than max: '+max;
data.graphic.attr({fill:'silver'});}
});
});
$('#report').html(content);
});
});
});
Hover over silver bar.
Thanks,
Manisha
Manisha, You can use CSS property for elements to set the color for the single bar in the series.
use
data.graphic.css({color: 'silver' });
instead of
data.graphic.attr({fill:'silver'});
Fiddled Version.
Hope this helps.