I am using jqplot to create a pie chart from an HTML table.
However, when attempting to set a var the chart doesn't plot.
If i simply set a number for the var, such as:
var DataTest = 22;
then the chart works fine.
However, when I get the value from the table it doesn't, as below:
var DataTest = $(dataID + ' td:nth-child(46)').text();
The pie chart wont display.
The pie chart series is being set through a var also:
var PieChartS1 = [ ['Label', DataTest] ];
Then included in the chart code as follows:
var PieChartPlot = $.jqplot('PieChart', [PieChartS1, PieChartS2 ], {
seriesDefaults: {
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 1,
startAngle: -145,
showDataLabels: true,
dataLabels: 'label',
padding: '5',
ringMargin: '5',
dataLabelThreshold: '1',
highlightMouseOver: true,
}
},
grid: {background: 'transparent', borderWidth: '0', cursor: 'pointer',},
});
I'm wondering whether it is a format issue?
Thanks for any help
Richard
Update:
Am wondering whether the graph is being formed by the script before the data has been obtained, so it is just showing blank as it is finding no data. Perhaps I need to delay the graph formation until the 'get data' scripts are fully executed?
Had some help from elsewhere.
It needs to be specified as an integer, so the change needs to be:
var DataTest = parseInt($(dataID + ' td:nth-child(46)').text());
This works fine.
Related
I figured it out:
I was not including the jqplot.CategoryAxisRenderer. Once I included that, I was able to get it working.
Thanks, everyone!
UPDATE:
My code works in JSFiddle, so it's a CSS problem I'm having. Please disregard.
I'm trying to create a fairly simple bar chart in jQPlot. I'm expecting two horizontal bars, one on top of the other. Both are equal to 1 on the X axis. I want the Y axis to have the labels 'In Progress' for the top bar, and 'Apr 2014' for the bottom bar. I have tried numerous combinations. If I do not specify Ticks, then I see the two bars. Specifying Ticks, or using the desired labels as the Y axis data point just shows both labels overlapping with no bars. (ignore the setTimeout) Thanks in advance.
Here's the code:
var data = [[1,1],[1,2]];
var ticks = ['In Progress','Mar 2014'];
$(function () {
setTimeout(function(){
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
},
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
},
100);
});
I have modified the JsFiddle given by Batu Zet previously adding following lines in order to label your bar chart here :
series: [
{
pointLabels:{
show:true,
labels:['Apr 2014', 'Apr 2014']
}
},
{
pointLabels:{
show:true,
labels:['In Progress', 'In Progress']
}
}
]
P.S : The labels are duplicated for each serie in order to display the same label for two points in a serie.
I'm using a ColumnChart to represent the elevation in a map, as suggested by Google.
However, the columns are separated by spaces, and that renders ugly white spaces between the
columns, like in Google's own example:
https://developers.google.com/maps/documentation/javascript/examples/elevation-paths
Is there a way to tell the column chart to make columns that fill up the whole space? I would like something like this:
http://4.bp.blogspot.com/-4I8oi3WqY5o/UIZnzbXql_I/AAAAAAAAAcE/GO4wl6I2-lM/s1600/Charts.png
I suspect that the only way is with lots of points.
My code:
var option = {
legend: 'none',
backgroundColor: 'transparent',
colors: ["#C9CFF5"],
titleColor: '#C9CFF5',
focusBorderColor: '#00AA00',
titleY: 'Elevation (m)',
bar: { groupWidth: '100%' }
}
// Build data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation (m):');
for (var i = 0; i < trackmarks.length; i++) {
data.addRow(['', trackaltis[i]]);
}
// Draw the chart using the data within its DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
chart.draw(data, option);
My code is pretty standard: same as Google's, same result.
Thanks!
You can specify option:
bar: {groupWidth: "100%"}
bar.groupWidth: Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them
Update: That example uses old version of column charts which loads package columnchart
google.load("visualization", "1", {packages:["columnchart"]});
The latest code for column chart is loaded using corechart:
google.load('visualization', '1', {packages: ['corechart']});
Change that and example should work as expected without spaces.
Here is my code: jsfiddle
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawColumnChart(container, data) {
var data = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.ColumnChart(container);
var options = {fontSize: 16};
chart.draw(data, options);
}
$(document).ready(function(){
drawColumnChart($("#satisfactionBarGraph")[0], [
['satisfaction', 'percent'],
['大変満足', 10 ],
['満足', 22 ],
['やや満足', 30 ],
['やや不満', 10 ],
['不満', 5 ]
]);
});
</script>
</head>
<body>
<div id="satisfactionBarGraph" style="width: 524px; height: 370px;" class="chartContainer"></div>
</body>
</html>
And this is what I really want:
I have two problems:
(1) I want the text below the x-axis to align top bottom
I have run through the document but cannot find the option
(2) I want the columns to be in different colors
Because I have only one filed, so all of them are in the same color. I'm wondering whether I used the right chart.
And suggestion will be appreciated
Thanks a lot for all your answers. I combined your solutions and finally figured it out:
final result
Hope this can help anyone who meets the same problem
The Google Visualization API's ColumnCharts color data by series, so if you want multiple colors for your bars, you have to split them into different series.
function drawColumnChart(container, data) {
var data = google.visualization.arrayToDataTable(data);
var columns = [0];
for (var i = 0; i < data.getNumberOfRows(); i++) {
columns.push({
type: 'number',
label: data.getColumnLabel(1),
calc: (function (x) {
return function (dt, row) {
return (row == x) ? dt.getValue(row, 1) : null;
}
})(i)
});
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
var chart = new google.visualization.ColumnChart(container);
var options = {
fontSize: 16,
// set the "isStacked" option to true to make the column spacing work
isStacked: true
};
chart.draw(view, options);
}
// use the callback from the google loader to draw the chart rather than document ready
google.load("visualization", "1", {packages:["corechart"], callback: function () {
drawColumnChart($("#satisfactionBarGraph")[0], [
['satisfaction', 'percent'],
['大変満足', 10],
['満足', 22],
['やや満足', 30],
['やや不満', 10],
['不満', 5]
]);
}});
Here's a jsfiddle of this code: http://jsfiddle.net/asgallant/Rrhak/
I don't think the Visualization API supports vertical writing like that. You can rotate text to be aligned vertically, but that's not what you are trying to achieve here.
You can get vertical labels like you want with a little bit of finagling.
I put a sample here:
I hope this answer makes you 大変満足.
Add Spaces
Your data needs to have each character with a space between it so that they can be broken up in to separate lines:
['satisfaction', 'percent'],
['大 変 満 足', 10 ],
['満 足', 22 ],
['や や 満 足', 30 ],
['や や 不 満', 10 ],
['不 満', 5 ]
Change Axis Display Values
For the hAxis you need to set the following options:
maxTextLines: 5,
slantedText: false,
showTextEvery: 1,
minTextSpacing: 40,
maxAlternation: 1
maxTextLines will allow your labels to be broken up in to multiple vertical lines. 4 would likely work as well as 5 here, since you only have 4 characters.
slantedText ends up being used over splitting up over multiple lines for some reason. So I turned it off manually.
showTextEvery prevents it from showing horizontal labels on one line by only display a subset of your axis labels.
minTextSpacing ensures that even though your lines are one character wide, the chart is fooled in to thinking that it needs to add line breaks.
maxAlternation prevents you from having two 'levels' of labels so that they all line up flush with the axis.
Adjust the Height of the Chart
If you leave the chart height as default, there is only space for 2 lines of labels, so you end up with labels that say
や
や
…
To prevent that, you need to artificially increase the height of the chart. There are a dozen ways to do this, I just set the height property manually.
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.
I have javascript code as:
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true,
dataLabels: 'value'
}
},
legend: { show:true, location:'e'}
});
var handler = function(ev, gridpos, datapos, neighbor, plot) {
if (neighbor) {
alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
}
};
$.jqplot.eventListenerHooks.push(['jqplotClick', handler]);
Now by using dataLabels: 'value' I am able to show values but shown value is 51 instead of 50.667.Value is rounded.But I need to show exact value.How to this??
My second question is that When I have mouse pointer on any region of the chart I want to show something.Is that would be done using jqplotDataMouseOver But how to use it?
Your first question can be solved with the dataLabelFormatString property:
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString:'%.4f'
}
},
The '%.4f' would show 4 decimal places.
Your second question is more difficult. Apparently events on bar charts are not quite ironed out with jqplot. But the last suggestion in that link works for me:
$('#chartdiv').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data)});
Here's a jsfiddle, remember to cache the JS files since jqplot does not allow hotlinking.