I am using Highchart api to display Bar chart. And also I have one text area below that chart to enter some text for user.
I want to export this chart in pdf, but same time I want to render textarea's text in pdf.
Now I can see only charts in pdf. This is working fine.
<script>
$(function () {
var listJS = <%=list4%>;
window.chart = new Highcharts.Chart({
chart: {renderTo : 'container', type: 'column'},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['PreviousMonthutilizationforCPU', 'CurrentMonthUtilizationforCPU', 'Week2','Week2','Week3','Week4']
},
yAxis: {
min: 0,
title: {
text: 'POD'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: listJS,
exporting: {
enabled: true
}
});
$("#export2pdf").click(function(){
chart.exportChart({
type: 'application/pdf',
filename: 'wow-pdf'
});
});
});
</script>
Related
I'm new to highcharts and I want to display date according to the data I get from the Database. I want to show date either in the tooltip or below the categories. Right now categories is displaying name of days. If possible I want to display date of that day below the Day in categories.
<script>
Highcharts.chart('column', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: <?= json_encode($day_names) ?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
}
},
colors: [
'#1cc88a', '#4e73df', '#f6c23e', '#e74a3b'
],
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
series: JSON.parse('<?= $processed_stars_data ?>')
});
</script>
You can use moment.js to get the values formatted, but
Highcharts has it's own date formatting functionality
which would be more idiomatic with Highcharts. It can be attached
onto the tooltip option in the highcharts constructor like so:
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.x))
+ ' date, ' + this.y + ' Kg.';
}
}
You may want to also add the dateTimeLabelFormats object with the
options you need for your dates, under the xAxis.
http://jsfiddle.net/Kc23N/3/
I am trying to make a highchart, with both negative and positive values. Now the thing is, that negative values, are not very big, compared to the positive ones.
Here is a picture of the graph as is:
Now if you look closely on both the y-axis, they do not meet up at 0, there is a tiny gap. Is it possible to make them both start at 0, but allowing them to be negative?
This is my code:
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Sales Graph'
},
xAxis: {
categories: xAxisTicks
},
plotOptions: {
column: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
debugger;
if (this.series.type == "column") {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>' +
'Sales without discount: ' + prettyNumber(this.point.stackTotal);
} else {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>';
}
}
},
colors: ['yellow', 'orange', 'red', 'blue', 'green', 'red', 'blue', 'green'],
yAxis: [
{
title: {
text: 'Daily sales'
},
min: minYAxisValue,
startOnTick: false
}, {
title: {
text: 'Accumulated sales'
},
min: minYAxisValue,
startOnTick: false,
opposite: true
}
],
series: data
});
If you want two to align 0 tick together that is not yet possible with highcharts. Follow this discussion https://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control?page=3&per_page=20.
However you can try this simple workaround:
Have fixed min/max on both y Axes:
yAxis: [{ min: minYAxisValue, max: maxYAxisValue }
Or just link second axis to the first:
yAxis: [{ opposite: true, linkedTo: 0 }
Here is a simplified version of the live scatter chart http://jsfiddle.net/ashwinp/z6QXW/8/
Now i am getting 0 1 2 etc like this on x-axis.i want user defined name on x axis.X axis labels should be pickup-ed from XLables array.
Same code from jsfiddle i have added here
var InfluenceCnt=0;
var QResiduals=[];
var XLables=[];
var HottelingT2=[];
var EllipseChartData;
var EllipseShift;
QResiduals.push('0.5356899');
QResiduals.push('0.5356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.3356899');
QResiduals.push('0.1356899');
HottelingT2.push('0.1')
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
XLables.push('a')
XLables.push('b');
XLables.push('c');
XLables.push('d');
XLables.push('e');
XLables.push('f');
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Ellipse Plot
EllipseChartData = new Highcharts.Chart({
chart: {
renderTo: 'EllipseContainer',
type: 'scatter',
marginRight: 10,
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart each second
EllipseSeries = this.series[0];
setInterval(function () {
EllipseShift = EllipseSeries.data.length > 20;
if (!isNaN(QResiduals[InfluenceCnt]) && $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") { //alert(QResiduals[InfluenceCnt]);
var x = HottelingT2[InfluenceCnt], // current time
y = parseFloat(QResiduals[InfluenceCnt]);
InfluenceCnt++;
EllipseSeries.addPoint([x, y], true, EllipseShift);
}
}, 1000);
}
}
},
title: {
text: 'Ellipse Plot'
},
xAxis: {
title: {
text: 'Sample'
},
plotLines: [{
value:2.5,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0.4,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
Highcharts.numberFormat(this.x, 2) + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Ellipse Plot',
data: []
}]
});
});
});
The option you need is 'categories' on the xAxis. Try this:
xAxis: {
title: {
text: 'Sample'
},
categories:XLables,
http://jsfiddle.net/euVvy/
To fix the tooltip, you just need to refer to 'this.x', which will return the category name:
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
this.x + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/4aDQ2/
You can use categories or labels formatter which allows to define "displayed label http://api.highcharts.com/highstock#xAxis.labels.formatter
HI all i am some data in a pie chart...on hover of slice i get the hover like this
[Hr Resources:x=Hr Resources,y=12]
i want my tooltip to show like this
[ProjectName=Hr,Logged Bugs=12]
how do i do this..here is how i am binding my data to the pie chart
<script type="text/javascript">
$(function () {
$.getJSON('<%= Url.Action("GetData","JqueryCharts") %>', {}, function (data) {
var json = data;
alert(json);
var jsondata = [];
for (var i in json) {
// var serie = new Array(json[i].Projects, json[i].Bugs);
jsondata.push([json[i].Projects, json[i].Bugs]);
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Resource Reports of BugTracker'
},
plotOptions: {
pie: {
showInLegend: true,
animation: false,
allowPointSelect: true,
cursor: 'pointer'
}
},
legend: {
enabled: true
},
series: [{
type: 'pie',
name: 'Resource Reports',
data: jsondata
}]
});
});
});
</script>
can any one help where i have to change this
By default, Highchart tooltip picks up, series name in the tooltip.
You can customize tooltip using:
tooltip: {
formatter: function() {
return '<b>ProjectName = '+ this.point.name +', Logged Bugs= '+ this.y + '</b>';
}
}
Here is the example
Highchart has a very good documentation at :http://api.highcharts.com/highcharts#tooltip
I have this code for a query in a file called querytojson.php:
if(!$query = #pg_query("SELECT AVG(\"UploadSpeed\") AS \"UploadSpeed\",
AVG(\"DownloadSpeed\") AS \"DownloadSpeed\",
AVG(\"Latency\") AS \"Latency\",
AVG(\"Jitter\") AS \"Jitter\",
AVG(\"PacketLoss\") AS \"PacketLoss\" FROM \"ZipPerformance\" "))
die("<br>Errore nella query: " . pg_last_error($query));
while($row = pg_fetch_assoc($query)){
// aggiungo all'array
$risultati[] = $row;
}
// stampo a video i risultati formattati secondo la sintassi di JSON
echo json_encode($risultati);
the json data is in this format:
[{"UploadSpeed":"0.342153197182936","DownloadSpeed":"4.35602301750153","Latency":"110.290067528565","Jitter":"0.0333323723888251","PacketLoss":"0.164373075044556"}]
Now I'd want to create a graph with Highcharts library like this, the file is called index1.html:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'HOBBIT'
},
tooltip: {
},
labels: {
html: 'index.html'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Velocità di connessione'
}
},
series: []
};
})
I'd want to pass json data directly to index.html.
I've done somthing similar to this. The way i did it was I created the chart in a sperate js file and just called the chart as a function passing in the JSON object as a variable. This is an example of one of my scripts in use on my site. In your case the labels and values are the same variable so the loop iteration is different, but the idea is still the same.
var chart;
function pieChart(id, values, labels, animate){
if (animate === undefined ){
animate = true;
}
var arrays = new Array();
for (i=0;i<values.length;i++) {
arrays[i] = [labels[i], values[i]];
}
chart = new Highcharts.Chart({
chart: {
renderTo: id,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Event Occurrence',
style: {
color: '#000000'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
},
series: {
animation: animate
}
},
series: [{
type: 'pie',
name: 'Probability',
data: arrays
}]
});
}