I need to create a bargraph on my webpage using Highcharts. I am using the following code but nothing is displayed. I am new to scripting webpages so I am not sure what is wrong.
<div id="container1" style="width:100%; height:400px;"></div>
function create_graph(graph) {
chart = new Highcharts.Chart ({
chart: {
height: 600,
width: 1200,
renderTo: container1,
type: 'column'
//reflow: false
},
title: {
text: graph["graphTitle"]
},
xAxis: {
categories: graph["xAxisLabels"]
},
yAxis: {
min: 0,
title: {
text: graph["yaxisTitle"]
}
},
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}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: generateLineData(graph)
});
}
graph = {"graphTitle": "Title" ,"xAxisLabels" : xAxisLabels, "xAxisTitle" : "Properties", "yAxisTitle" : "Average percentile", "yAxisValues" : array1}
You must have the javascript vars xAxisLabels , array1 initialized before creating object graph. Then, of course, following the logic of your code, you should have a call to create_graph(graph);. Finally, your generateLineData() function should look like the following:
function generateLineData(g) {
return [{ data: g["yAxisValues"] }];
}
if all these premises are fulfilled, then your graph should be displayed. You can verify it at this jsfiddle demo: http://jsfiddle.net/tgnu5941/2/
Related
Please consider this code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: [
'عطه',
'أديب',
'فرحان',
'حسن',
'كريم',
'محمود'
],
reversed: true
},
title: {
text: 'بعض الأسماء الشعبية الأولى',
useHTML: Highcharts.hasBidiBug
},
tooltip: {
useHTML: true
},
series: [{
name: 'ذكر أسماء',
data: [10000,20000,30000,20000,60000,5000]
}]
});
Fiddle: Right To Left Tooltip
The chart tooltip is not displayed correctly. for example: ذکر الاسما: 00060 for 60000 value. How I can fix this problem?
Thanks
You can use a tooltip formatter like this
tooltip: {
useHTML: true,
formatter:function(){
return '<span style="color:'+this.color+'"></span> '+this.key+' : <b class="ltr">'+ this.y + '</b><br/>'
}
},
Fiddle
I have a site where I have used highcharts for some years with no problem. Original version was 4.2.0.
I tried to update to version 5.0.7 by downloading directly from highcharts site. Then, I replaced the corresponding script tags to reflect the change. However, with that change, I only get a black box where the graph should be.
This is how the highchart is initialized:
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor: null
},
title: {
text: 'Resumen Comparativo Inter-Zonas País (' + meses[periodo % 100 - 1] + '-' + Math.floor(periodo / 100) + ')',
style: {
"fontSize": "14px"
}
},
credits: {
enabled: false
},
xAxis: {
categories: zonas
},
yAxis: [{
min: 0,
title: {
text: 'Totales por Zonas y País'
}
}, {
min: -1000000000,
title: {
text: 'No Encontrados',
style: {
color: '#B2455E'
}
},
labels: {
style: {
color: '#B2455E'
}
},
opposite: true,
reversed: false
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Repetidos',
type: 'column',
data: getMontosPorCondicion(inventarios, 'REPETIDO', null)
}, {
name: 'Resellados',
type: 'column',
data: getMontosPorCondicion(inventarios, 'RESELLADO', null)
}, {
name: 'Abiertos',
type: 'column',
data: getMontosPorCondicion(inventarios, 'ABIERTO', '#8BBC22')
}, {
color: '#B2455E',
name: 'No Encontrados',
type: 'spline',
yAxis: 1,
marker: {
fillColor: '#FFFFFF',
lineColor: null,
lineWidth: 2
},
data: getMontosPorCondicion(inventarios, 'NO ENCONTRADO', '#B2455E')
}]
});
Any help?
Your copy of highcharts.js might be different from the cdn https://code.highcharts.com/highcharts.js. Replace the codes in your copy with that of the cdn. This should work fine.
You additionally need to add highcharts.css to your page.
As per the highcharts site:
"If you are styling your charts using CSS, load the javascript files from the /js/ directory. For these files, presentational code is removed, and CSS is required to style the chart."
We import a CSV File into Highcharts. The first Row holds the names of the series.
Now we need to display our charts also for another language.
How can we get the serie names and translate them? Or is there another way naming the series when importing from CSV?
We import the csv like following code:
$.get('data.csv', function(csv) {
Highcharts.setOptions({
colors: ['#ffd800']
});
$('.loadDiv1').hide();
$('#chart_1').highcharts({
chart: {
type: 'area'
},
data: {
csv: csv,
itemDelimiter: ';',
lineDelimiter: '\n',
decimalPoint: ','
},
title: {
text: '<?php echo $lang['79']; ?>',
style: {
color: '#68666b',
fontWeight: 'bold',
fontSize: '14px'
}
},
yAxis: {
min: 1,
max: 10,
tickInterval: 1,
title: {
text: ''
},
labels: {
format: '{value} kW'
}
},
legend:{
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
credits: {
enabled: false
}
});
});
The CSV FIle looks like this:
row;Serienname 1;Serienname 2;Serienname 3;Serienname 4;Serienname 5
00:00;0,00;0,00;0,00;0,00;0,00
00:02;0,00;0,00;0,00;0,00;0,00
We need the "Serienname 1 -5" (the names are only examples, we use other german words) translated in different languages.
Thank you for help
Neil
There is an example here you can do custom preprocessing csv custom preprocessing
And you can probably use this jquery plugin to translate translate.js
Adding classes to series
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 50,
marginBottom: 175,
events: {
load: function () {
var chart = this;
$(chart.series).each(function (i, serie) {
$('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function () {
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend');
});
}
}
}
I would like to be able to toggle between my groupings, (time/priority). I have a stacked column chart. there is a option to do this example. But it appears that it may only work with data already in a table, and I am bringing in my data as JSON.
my javascript is:
var chart_ops_support_times = new Highcharts.Chart({
chart: {
renderTo: 'chart_ops_support_times',
type: 'column'
},
title: {
text: '',
align: 'left'
},
subtitle: {
text: ' '
},
xAxis: {
categories: [
'one hour','2 hours','4 hours',
'8 hours','one day','2 days',
'one week','> one week'
]
},
yAxis: {
min: 0,
title: {
text: 'counts'
}
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
symbolHeight: 10,
symbolWidth: 10
},
tooltip: {
formatter: function () {
return "<b>" + this.x + "</b><br/>" +
this.series.name + ': ' + this.y + "<br/>" +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: data
});
Data module won't work with JSON.
The Data module provides options for loading data from external sources, like CSV files, HTML tables or Google Spreadsheets, in a convenient way, using a declarative options set.
(http://www.highcharts.com/docs/working-with-data/data-module)
Instead of using data module for this, you could parse your data from JSON to be used one way or another.
Other option is to create hidden HTML table with data from JSON and later use Highcharts with data module and use table.
when i open a page with highcharts more than twice.i got an error like this:
Uncaught Highcharts error #16: www.highcharts.com/errors/16
and detail is:
Highcharts Error #16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in
the same page, so the Highcharts namespace is already defined. Keep in
mind that the Highcharts.Chart constructor and all features of Highcharts
are included in Highstock, so if you are running Chart and StockChart
in combination, you only need to load the highstock.js file.
it is telling me highcharts object is already exist.so, how can i destroy object when i reopen a page with highcharts.
here is my code:
$(function(){
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: 'count'
},
credits: {
enabled: false
},
xAxis: {
categories: [ ],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '商家个数'
}
},
tooltip: {
headerFormat: '{point.key}',
pointFormat: '{series.name}: ' +
'{point.y} 个',
footerFormat: '',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'count',
data:
}
]
});
});
any help will be appreciate.....