Hi here I set the data to the bar chart:
setDatosBarra: function(data){ //
var self = this;
var horaEstim = 0;
var horaReal = 0;
var horaTotal = 0;
if(data[0].horas_estim != '-'){
horaEstim = data[0].horas_estim;
}
if(data[0].horas_real != '-'){
horaReal = data[0].horas_real;
}
if(data[0].total_horas != '-'){
horaTotal = data[0].total_horas;
}
var datosBarra =[{data: [[0,horaEstim]], color: "#691717"}, {data: [[1,horaReal]], color: "#173D69"},{data: [[2,horaTotal]], color: "#176469"}];
self.flotLinea(datosBarra);
},
When all is ready I send the data to self.flotBar;
This is the flotBar function:
flotBar: function(datos){
var self = this;
if(datos == 0){
var data = [["SIN REGISTROS",0]];
}else{
var data = datos;
}
function getTooltip(label, x, y) {
return "<strong style='font-size:18px;'> " + y + " </strong> horas";
}
var plot = $.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
ticks: [[0,"Horas estimadas"],[1,"Horas reales"],[2,"Total horas"]],
mode: "categories",
tickLength: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
});
},
Ok , and this is my problem, example:
I select a option in an dropDown:
And the bar chart looks like this:
If I select other option in the dropDown:
The bar chart looks like this:
And if I select again the first option "Correcion de errores", the bar chart looks like this:
So.. always the first time that I show the bar chart looks like in the first image , with the numbers in the line, but If I select other option looks good.
I need see good the bar chart always and no just when I select other option.
I'm using flot javascript library.
How can I fix this? sorry by my english
The main issue with the question as stated is that we do not have all the code. In essence, you should either provide all the code, or shrink down the problem to something that shows the issue and then, well, provide all the code. As far as I can guess, you have some other code somewhere else that is drawing the initial chart. The second and subsequent times? Drawn properly. To support my assertion, notice that in your initial image the captions for the x-axis tick markers (ditto the bars themselves) are right aligned not centered.
For fun, I wrote a quick jsFiddle that showed how to switch datasets using a button (much as you want to do with the drop-down) and redraw the chart:
drawChart = function(index) {
var chartData = getDataForChart(rawData[index]);
if (chart) {
chart.setData(chartData);
chart.draw();
}
else {
chart = $.plot("#barchart", chartData, chartOptions);
}
},
switchDataset = function() {
datasetIndex = (datasetIndex + 1) % datasetCount;
drawChart(datasetIndex);
};
$("#switchButton").on("click", switchDataset);
Because I decided to load new data into the chart rather than redraw it all from scratch (to be honest I saw no real difference either way), it meant that I had to pre-calculate the maximum value for the y-axis:
calcValueMax = function() {
var max = 0;
rawData.forEach(function(values) {
values.forEach(function(value) {
if (value > max) {
max = value;
}
});
});
return max;
},
// other code
chartOptions.yaxis.max = calcValueMax();
Hope that helps.
I'm working in a school project and i'm getting the data from a php file to show in the gauge.
I using this javascript code to update de chart every second:
function requestData() {
$.getJSON('values.php', function(data) {
var new_value = data;
var point = $('#ta').highcharts().series[0].points[0];
point.update(new_value);
setTimeout(requestData, 500)
}
)
}
With this code i'm able to update the chart, the problem is, i need to show the numeric value too, in another part of the chart. Here is what i try:
yAxis: {
title: {
text: '<div id="tav">'+new_value+'V</div>',
useHTML: true,
y: 80
}
When i put "new_value" the chart stop working and i can't see nothing. If a leave the "new_value" from this part of the chart it works perfectly.
Can someone help me?
Thanks
To update y-axis title you have to use the code like:
$('#container').highcharts().yAxis[0].update({
title:{
text:"My text"
}
});
I have created a wroking demo of how to dynamically update y-axis title on button click: DEMO
JS code section to dynamically update chart title on a button click:
var chart = $('#container').highcharts();
$('#my_btn').click(function(){
//alert('hey');
chart.yAxis[0].update({
title:{
text:"My text"
}
});
alert('Y-axis title changed to "My text" !');
});
The problem is that new_value is localy defined. You could define the variable as an object's property:
var obj = {};
function requestData() {
$.getJSON('values.php', function(data) {
obj.new_value = data;
var point = $('#ta').highcharts().series[0].points[0];
point.update(new_value);
setTimeout(requestData, 500)
}
)
}
and
yAxis: {
title: {
text: '<div id="tav">'+obj.new_value+'V</div>',
useHTML: true,
y: 80
}
Use indeed Axis.setTitle() method, see:
function requestData() {
$.getJSON('values.php', function (data) {
var new_value = data;
var chart = $('#ta').highcharts()
var point = chart.series[0].points[0];
var yAxis = chart.yAxis[0];
yAxis.setTitle({text: new_value });
point.update(new_value);
setTimeout(requestData, 500);
})
}
I am using HighCharts JS for making a bubble chart. It's a pretty self-explanatory but what I am trying to do is a changed mechanism.
the graph loads the chart perfectly, but it loads all the columns (or series) at the same time. What I am hoping to do is that it loads each column one-by-one.
You can see the example graph at this link:-
http://www.highcharts.com/demo/bubble
As you can see in the sample graph shown above, they have three series, and they all load simultaneously; I was hoping that it loads one-by-one.
Any idea,
Thanks.
You can remove series from options, and add all of them in load event. Demo: http://jsfiddle.net/qc8bS/
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
events: {
load: function () {
var chart = this;
function addSeries() {
if (s.length > 0) {
chart.addSeries(s[0]);
setTimeout(addSeries, 1000);
s.splice(0, 1);
}
}
addSeries();
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: []
});
I am learning JavaScript and have some programming knowledge and can generally work things out eventually, but I am stuck on a problem with highcharts.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Betting Performance'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Yield (%)'
}
},
series: []
};
/*
Load the data from the CSV file. This is the contents of the file:
Apples,Pears,Oranges,Bananas,Plums
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
*/
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0)
options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 1200px; height: 800px; margin: 0 auto"></div>
</body>
</html>
Now, I have managed to get this working and attached a screenshot below.
But as you can see at the bottom there is a Series called 'Series 3'
Next is my CSV file as plaintext
,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42
Miles,-100,-100,-100,-58.75,-31,-9.17,9.63,18.3,29.08,38.5,41.19,43.56,46.79,39.45,32.81,26.77,28.64,18.71,24.52,28.53,29.04,24.87,20.96,17.28,20.02,18.27,20.52,17.16,19.26,16.2,13.29,10.52,13.25,14.04,11.44,12.97,21.4,18.81,16.33,13.95,11.67,9.48
Miles 2,-100,-100,-100,-58.75,-22,-9.17,9.63,18.3,29.08,38.5,41.19,43.56,46.79,39.45,32.81,26.77,48.64,18.71,24.52,28.53,29.04,24.87,20.96,17.28,20.02,18.27,20.52,17.16,19.26,16.2,13.29,10.52,13.25,14.04,11.44,12.97,21.4,18.81,16.33,13.95,11.67,9.48
This plots out fine to the chart as you can see in the image. I made two sets of data to highlight that multiple series' work and that having one series wasn't the issue. All the data points were plotted from number 1-42 with appropriate y value.
I have no idea where the extra series came from and why. I have followed the highcharts demo as much as I could but I am now lost.
As posted in the comments by jack R Abbit, excel adds whitespace at the end of a CSV. god knows why. deleting that whitespace fixed the problem, hunky dory! thanks again for those who helped and hopefully someone else will come across this and get helped out too.
regards
miles
Recently I posted a question on Highcharts column charts drilldown. I have found that in click event of point object you can find out which column was clicked. I have implemented the same in my code but I am not getting alert in my code. Please find below my code. First is my chart options variable -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
I am filling the series dynamically with below statements in a loop -
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
Finally I display my chart like this -
chart = new Highcharts.Chart(columnoptions);
But I am not getting any alert on column click. I get error javascript error messages in IE. I am using IE8. Kindly help me with this. Highcharts official example with static data works fine and I have seen that. My chart displays correctly without any issues. But I need to know which column was clicked to implement drilldown functionality. Please help.
---Edit
Here is the full function I am using to draw the charts-
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'Column Chart',
data: [],
};
/* category array contains x axis category values
value array contains y axis numeric values */
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
I am reading my data from an XML doc and then creating value and category array. Chart comes fine but not getting alert on point click. Please help. Thanks. :) Sorry for delay in posting the code.
I only added the latest version of the highcharts and point click is working for me. Thanks.