how to take data from data base and show the uipickerview - ios

I am fetching the data from sqlite3, now i need to display that values in UIPicker view , Can any one help me please,
I got the response from data base like
stateName: (
{
"state_name" = Alabama;
},
{
"state_name" = Arizona;
},
{
"state_name" = Arkansas;
},
{
"state_name" = California;
},
{
"state_name" = Colorado;
},
{
"state_name" = Connecticut;
},
{
"state_name" = Delaware;
},
{
"state_name" = "District of Columbia";
},
{
"state_name" = Florida;
},
{
"state_name" = Georgia;
},
{
"state_name" = Idaho;
},
{
"state_name" = Illinois;
},
{
"state_name" = Indiana;
},
{
"state_name" = Iowa;
},
{
"state_name" = Kansas;
},
{
"state_name" = Kentucky;
},
{
"state_name" = Louisiana;
},
{
"state_name" = Maine;
},
{
"state_name" = Maryland;
},
{
"state_name" = Massachusetts;
},
{
"state_name" = Michigan;
},
{
"state_name" = Minnesota;
},
{
"state_name" = Mississippi;
},
{
"state_name" = Missouri;
},
{
"state_name" = Montana;
},
{
"state_name" = Nebraska;
},
{
"state_name" = Nevada;
},
{
"state_name" = "New Hampshire";
},
{
"state_name" = "New Jersey";
},
{
"state_name" = "New Mexico";
},
{
"state_name" = "New York";
},
{
"state_name" = "North Carolina";
},
{
"state_name" = "North Dakota";
},
{
"state_name" = Ohio;
},
{
"state_name" = Oklahoma;
},
{
"state_name" = Oregon;
},
{
"state_name" = Pennsylvania;
},
{
"state_name" = "Rhode Island";
},
{
"state_name" = "South Carolina";
},
{
"state_name" = "South Dakota";
},
{
"state_name" = Tennessee;
},
{
"state_name" = Texas;
},
{
"state_name" = Utah;
},
{
"state_name" = Vermont;
},
{
"state_name" = Virginia;
},
{
"state_name" = Washington;
},
{
"state_name" = "West Virginia";
},
{
"state_name" = Wisconsin;
},
{
"state_name" = Wyoming;
}
)

There is the delegate method of UIPickerView. #pragma mark - PickerView Delegates
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 1;
}
//=====================================================================================
//Customize Number of rows in Component
//=====================================================================================
- (NSInteger)pickerView:(UIPickerView *)thePickerView numberOfRowsInComponent:(NSInteger)component {
if([genreList count] != 0)
{
return [genreList count];
}
else
{
return 0;
}
}
//=====================================================================================
//Set title For Row
//=====================================================================================
- (NSString *)pickerView:(UIPickerView *)thePickerView titleForRow:(NSInteger)row1 forComponent:(NSInteger)component {
if([genreList count] != 0)
{
return [genreList objectAtIndex:row1];
}
else
{
return nil;
}
//return 4;
}

Related

Strange (interpolated maybe) values from openlayers canvas

I create an openlayers map application for creating histogram from COG layer. I using WebGLTile layer and DataTile source. In a map I have only 2 colors but gl.readPixels returns 12 color values.
map screenshot
part of code:
map.on("click", (evt) => {
var buffer = {};
const gl = webgl.getRenderer().helper.getGL();
const pixelData = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
let r, g, b, c = 0;
for (let i = 0; i < pixelData.length; i+=4) {
r = pixelData[i];
g = pixelData[i+1];
b = pixelData[i+2];
let item;
item = [r, g, b].reduce((acc, cur) => {
if (!acc.hasOwnProperty(cur)) {
acc[cur] = {};
}
return acc[cur];
}, buffer);
item.count = (item.count || 0) + 1;
}
});
In final buffer I need only
{
"165": {
"1": {
"38": {
"count": 1181613
}
},
},
"255": {
"255": {
"191": {
"count": 351
}
}
}
}
but I get 12 colors between these two intervals.
{
"165": {
"1": {
"38": {
"count": 1181613
}
},
"2": {
"39": {
"count": 130473
}
}
},
"168": {
"10": {
"43": {
"count": 130413
}
}
},
"169": {
"11": {
"44": {
"count": 15151
}
}
},
"174": {
"27": {
"54": {
"count": 130481
}
},
"28": {
"54": {
"count": 14792
}
}
},
"177": {
"36": {
"59": {
"count": 14460
}
}
},
"178": {
"37": {
"59": {
"count": 1631
}
}
},
"242": {
"219": {
"170": {
"count": 130366
}
}
},
"243": {
"220": {
"170": {
"count": 14487
}
}
},
"246": {
"228": {
"175": {
"count": 14884
}
},
"229": {
"175": {
"count": 1574
}
}
},
"251": {
"245": {
"185": {
"count": 15250
}
}
},
"252": {
"246": {
"186": {
"count": 1586
}
}
},
"255": {
"254": {
"190": {
"count": 1528
}
},
"255": {
"191": {
"count": 351
}
}
}
}
I have no idea why is this happenning and I spent days searching for solution.
I found some example, not with openlayers, and this approach was fine. returns only two values from double-color square.
It's some kind of interpolation on the openlayers side?
Thnaks for any help!

Kong -- How do I write my entity_checks for array #6989

Summary
I am developing my own rate-limiting plugins based on the official one.
The origin schema looks like:
fields = {
{ config = {
type = "record",
fields = {
{ second = { type = "number", gt = 0 }, },
{ minute = { type = "number", gt = 0 }, },
}
...
},
},
My schema looks like:
{ config = {
type = "record",
fields = {
{ plans = {
type = "array",
elements = {
type = "record",
fields = {
{ second = { type = "number", gt = 0 }, },
{ minute = { type = "number", gt = 0 }, },
}
},
},},
},
custom_validator = validate_periods_order,
},
},
You can see that the first field is called "plans" and it's type is an array which means I will have config.plans[0].second, config.plans[0].second, ... and the original one was config.second
Below is the origin entity_checks function of rate-limiting, I have no idea how to re-write it to match my schema since it changed from simple record type to array type
entity_checks = {
{ at_least_one_of = { "config.second", "config.minute", "config.hour", "config.day", "config.month", "config.year" } },
{ conditional = {
if_field = "config.policy", if_match = { eq = "config.redis" },
then_field = "config.redis_host", then_match = { required = true },
} },
{ conditional = {
if_field = "config.policy", if_match = { eq = "config.redis" },
then_field = "config.redis_port", then_match = { required = true },
} },
{ conditional = {
if_field = "config.policy", if_match = { eq = "config.redis" },
then_field = "config.redis_timeout", then_match = { required = true },
} },
},
Create a local schema for plan
local plan_schema = {
type = "record",
fields = {
{ second = { type = "number", gt = 0 }, },
{ minute = { type = "number", gt = 0 }, },
},
custom_validator = validate_periods_order,
entity_checks = {
{ at_least_one_of = { "second", "minute" } },
}
}
Then on your config set plans as an array of plan
return {
name = plugin_name,
fields = {
{ consumer = typedefs.no_consumer },
{ protocols = typedefs.protocols_http },
{ config = {
type = "record",
fields = {
{ plans = {
type = "array",
elements = plan_schema ,
} },
} },
},
}

HighStock: Trend jumping out of Chart Area on zooming with zoomType='xy' or zoomType='y'

I am working with HighCharts (Version:^5.0.14) and React(react:^15.0.1, react-dom:^15.0.1).
I am facing an issue with HighStock Chart Zooming. With the zoomType = 'xy' or zoomType='y', the zoomed HighStock trend jumps of the X-Axis and Y-Axis. Below is the picture. However if Zooming type zoomType = 'X' no issues. The problem is faced when including zoomType = 'y'
Below is the Code:
import React from 'react';
import highcharts from 'highcharts/highstock';
export default class Chart extends React.Component {
constructor (props) {
super(props);
this.state = {
chartName: `chart${this.props.chartNum}`
};
}
componentDidMount () {
let chartOptions = {};
chartOptions = {
rangeSelector: {enabled: false },
credits: { enabled: false },
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}</b> <br/>'
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
plotOptions:{
series:{
turboThreshold:5000//set it to a larger threshold, it is by default to 1000,
}
},
xAxis:{
type: 'dateTime',
minRange:3600000,
events:{
setExtremes:function(event){
this.min=event.min;
this.max=event.max;
}
}
},
yAxis: {
offset: 15,
labels: {
align: 'center',
x: -5,
y: 0
},
opposite:false,
showLastLabel: true,
min: this.dataMin,
max: this.dataMax,
events:{
setExtremes:function(events){
console.log("Card::YAxis::setExtremes::events.min and events.max = " + events.min +", "+ events.max);
this.dataMin = events.min;
this.dataMax = events.Max;
this.min = events.min;
this.max = events.max;
}
},
tickPositioner: function () {
var positions;
var Maxdata = this.max;
var MinData = this.min;
if(ticksData != null){
positions = ticksData;
}else{
positions = [];
var tick = Math.floor(this.min);
if(this.min == this.max){
positions.push(this.min);
}else{
if (this.max !== null && this.min !== null) {
Maxdata = Maxdata.toFixed(2);
MinData = MinData.toFixed(2);
tick = parseFloat(MinData);
var increment = (Maxdata - MinData)/5;
increment=increment.toFixed(2);
for (tick; tick-increment<= Maxdata; tick=(parseFloat(increment)+parseFloat(tick)).toFixed(2)) {
if(positions.includes(tick)){
break;
}
else{
positions.push(tick);
}
}
}else{
positions = [0];
}
}
}
return positions;
}
}
};
chartOptions.chart = {
renderTo: document.getElementById(this.state.chartName),
zoomType: 'xy',
spacingBottom: 35,
resetZoomButton: {
position: {
align: 'right', // by default
verticalAlign: 'bottom', // by default
x: 8,
y: 20
}
},
events:{
redraw: function(){
var serie1 = this.series[0],
yExtremes = this.yAxis[0].getExtremes();
var yMin = yExtremes.min;
var yMax = yExtremes.max;
var dataSet = serie1.data;
var zoomedDataSet= [];
var dataGroup;
if(dataSet != undefined && dataSet != null){
for(var i=0; i<dataSet.length; i++)
{
if(dataSet[i] != undefined){
dataGroup = dataSet[i];
if(dataGroup[1] > yMin && dataGroup[1]< yMax){
zoomedDataSet.push(dataGroup);
}
}
}
serie1.data = zoomedDataSet;
}
}
}
};
// Generate chart.
this.generateChart(this.props.data, chartOptions);
}
componentWillUpdate (nextProps) {
let chartOptions = {};
chartOptions = {
rangeSelector: {enabled: false },
credits: { enabled: false },
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}</b> <br/>'
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
plotOptions:{
series:{
turboThreshold:5000//set it to a larger threshold, it is by default to 1000,
}
},
xAxis:{
type: 'dateTime',
minRange:3600000,
events:{
setExtremes:function(event){
this.min=event.min;
this.max=event.max;
}
}
},
yAxis: {
offset: 15,
labels: {
align: 'center',
x: -5,
y: 0
},
opposite:false,
showLastLabel: true,
min: this.dataMin,
max: this.dataMax,
events:{
setExtremes:function(events){
console.log("Card::YAxis::setExtremes::events.min and events.max = " + events.min +", "+ events.max);
this.dataMin = events.min;
this.dataMax = events.Max;
this.min = events.min;
this.max = events.max;
}
},
tickPositioner: function () {
var positions;
var Maxdata = this.max;
var MinData = this.min;
if(ticksData != null){
positions = ticksData;
}else{
positions = [];
var tick = Math.floor(this.min);
if(this.min == this.max){
positions.push(this.min);
}else{
if (this.max !== null && this.min !== null) {
Maxdata = Maxdata.toFixed(2);
MinData = MinData.toFixed(2);
tick = parseFloat(MinData);
var increment = (Maxdata - MinData)/5;
increment=increment.toFixed(2);
for (tick; tick-increment<= Maxdata; tick=(parseFloat(increment)+parseFloat(tick)).toFixed(2)) {
if(positions.includes(tick)){
break;
}
else{
positions.push(tick);
}
}
}else{
positions = [0];
}
}
}
return positions;
}
}
};
chartOptions.chart = {
renderTo: document.getElementById(this.state.chartName),
zoomType: 'xy',
spacingBottom:35,
resetZoomButton: {
position: {
align: 'right', // by default
verticalAlign: 'bottom', // by default
x: 8,
y: 20
}
},
events:{
redraw: function(){
var serie1 = this.series[0],
yExtremes = this.yAxis[0].getExtremes(),
var yMin = yExtremes.min;
var yMax = yExtremes.max;
var dataSet = serie1.data;
var zoomedDataSet= [];
if(dataSet != undefined && dataSet != null ){
for(var i=0; i<dataSet.length; i++)
{
if(dataSet[i] != undefined){
dataGroup = dataSet[i];
if(dataGroup[1] >= yMin && dataGroup[1]<=yMax && dataGroup[0] >= xMin && dataGroup[0]<= xMax){
zoomedDataSet.push(dataGroup);
}
}
}
serie1.data = zoomedDataSet;
}
}
}
};
this.generateChart(nextProps.data, chartOptions);
}
generateChart (data, chartOptions) {
chartOptions.series = [
{
name: this.props.title,
type: this.props.status ? 'area' : 'line',
data: data,
clip: false
}
];
let chart = new highcharts.StockChart(chartOptions);
}
render () {
const selfStyle = {
height: '200px'
};
return (
<div
className="med-chart col-md-9"
id={this.state.chartName}
style={selfStyle}>
</div>
);
}
}
I have setExtremes set with event Min and Max values for Y-Axis, but it does not help. If any of you have faced a similar issue, request to share your approach to resolve this problem. Greatly appreciate your time in reading the post and your valuable inputs in advance.

Why I get "Uncaught SyntaxError: Unexpected token ILLEGAL"?

Could someone help me please?
I've tried to move js code from view to separate js file, but I got many errors like this: Uncaught SyntaxError: Unexpected token ILLEGAL. Why it happened?
My js code for high charts:
var chart;
var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect};
var monthNames = #{Date::MONTHNAMES.to_json}
var currentView = '#{#current_view}';
var currentMonth = #{#current_month};
var CURRENT_YEAR = #{Date.current.year};
var currentYear = #{#current_year};
var currentIndex = #{#current_index};
var currentInterval = '#{#current_interval}';
var seriesColors = #{{ "Applicants" => status_color(20), "Inquiries" => status_color(10), 'Conversion Rate' => '#7FC315', 'RSVPs'=> '#937CB0'}.to_json}
var registrantsData = #{#registrants_data.to_json};
var applicantsData = #{#applicants_data.to_json};
var pendingData = #{#pending_data.to_json};
var toursData = #{#tours_data.to_json};
var conversionData = #{#conversion_data.to_json};
var toursRequestedCount = #{#tours_requested.count}
$(document).ready(function() {
getDataForView = function() {
if (currentView == 'Applicants') { return applicantsData; }
if (currentView == 'Inquiries') { return registrantsData; }
if (currentView == 'Conversion Rate') { return conversionData; }
if (currentView == 'RSVPs') { return toursData; }
}
getSeriesColor = function() {
return seriesColors[currentView];
}
changeChartMonth = function(increase) {
if (increase && currentIndex < 23) { currentIndex = currentIndex + 1 }
if (!increase && currentIndex > 1) { currentIndex = currentIndex - 1 }
switchChartSeries();
}
selectedYear = function() {
year = currentIndex < 12 ? CURRENT_YEAR - 1 : CURRENT_YEAR;
return year;
}
updateTextIndication = function() {
var text = '';
$('.nav-arrow').hide();
if (currentInterval == 'days') {
text = monthNames[currentIndex % 12 + 1] + ' ';
if (currentIndex > 1) { $('.left-nav-arrow').show(); }
if (currentIndex < 23) { $('.rigth-nav-arrow').show(); }
$('.year').hide();
year = selectedYear();
text = text + year;
$('strong.current_chart_date').text(text);
$('span.current_chart_view').text(currentView + ' for:');
$('strong.current_chart_date').show();
} else {
$('strong.current_chart_date').hide();
$('.left-nav-arrow').hide();
$('.rigth-nav-arrow').hide();
$('.year').show();
}
$('.chart_interval a').removeClass('active');
$('.chart_interval a.' + currentInterval).addClass('active');
}
setYear = function(year) {
if (year == CURRENT_YEAR) {
currentIndex = 12;
} else {
currentIndex = 11;
}
$('a.year').removeClass("active_year");
$("a[year="+year+"]").addClass("active_year");
}
switchChartSeries = function() {
var dataSource = getDataForView();
var seriesType = 'column';
var categories;
data = dataSource[currentIndex];
if (currentInterval == 'months') {
categories = monthCategories;
temp = [];
for (var i=0; i<dataSource.length; i++) {
if (dataSource[i].drilldown.year == selectedYear()) {
temp.push(dataSource[i]);
}
}
dataSource = temp;
}
if (currentInterval == 'days') {
categories = data.drilldown.categories;
dataSource = data.drilldown.data;
}
updateTextIndication();
updateNavTabs();
chart.xAxis[0].setCategories(categories);
while(chart.series.length > 0)
chart.series[0].remove(true);
if (currentView == 'Conversion Rate') {
seriesType = 'area';
chart.yAxis[0].setExtremes(0, 100);
} else {
seriesType = 'column'
var maxVal = 0
if (currentInterval == 'days') {
maxVal = Math.max.apply(Math, dataSource)
} else {
for (var i = 0; i < dataSource.length; i++) {
if (dataSource[i].y > maxVal) {
maxVal = dataSource[i].y
}
}
}
if (maxVal < 3) {
chart.yAxis[0].setExtremes(0, 3)
} else {
chart.yAxis[0].setExtremes(0, null)
}
}
chart.addSeries({
name: currentView,
type: seriesType,
data: dataSource,
color: getSeriesColor(),
borderRadiusTopLeft: 3,
borderRadiusTopRight: 3,
marker: {
symbol: 'circle',
fillColor: 'white',
lineColor: '#7FC315',
lineWidth: 3
},
// fillColor: '#7FC315',
// fillOpacity: 0.9,
lineWidth: 1
});
}
updateNavTabs = function() {
var display = function ($target, count) {
var dataKey = ((count <= 0) ? "zero" : (count <= 1) ? "one" : "many");
var title = $target.closest("li").data(dataKey)
$target.text(count);
$target.closest("a").text(" " + title).prepend($target);
}
display($('strong.applicants'), calculateNumber(applicantsData));
display($('strong.registrants'), calculateNumber(registrantsData));
$('strong.conversion').text(calculateConversation(conversionData) + '%');
}
getDataSource = function(data) {
var dataSource = [];
if (currentInterval == 'days') {
dataSource = data[currentIndex].drilldown.data;
} else {
for (var i=0; i<data.length; i++) {
if (data[i].drilldown.year == selectedYear()) {
dataSource = dataSource.concat(data[i].drilldown.data);
}
}
}
return dataSource;
}
calculateNumber = function(data) {
var dataSource = getDataSource(data);
var number = 0;
for (var i=0; i<dataSource.length; i++) {
number += dataSource[i];
}
return number;
}
calculateConversation = function(data) {
var dataSource = getDataSource(data);
var number = 0;
var length = 0;
for (var i=0; i<dataSource.length; i++) {
if (dataSource[i] != 0) {
number += dataSource[i];
length ++;
}
}
if (length != 0)
number = (number/length).toFixed(0);
return number;
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'pipeline',
type: 'column',
spacingTop: 10
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: #{(1..Time::days_in_month(Date.current.month)).map{ |d| d }.inspect }
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: null
}
},
tooltip: {
shadow: true,
useHTML: true,
formatter: function() {
var title;
if (currentInterval == 'months') {
titleInside = '<b>' + monthNames[monthCategories.indexOf(this.x) + 1] +'</b><br/>'
} else {
titleInside = '<b>' + monthNames[currentIndex % 12 + 1] + ' ' + this.x +'</b><br/>'
}
title = '<div class="highChartsTooltip">'+ titleInside + this.series.name + ': ' + Math.round(this.y) + '</div>'
if (currentView == 'Conversion Rate') {
title = '<div class="highChartsTooltip">'+ titleInside + this.series.name + ': ' + Math.round(this.y) + '%' + '</div>'
}
return title
}
},
plotOptions: {
area: {
fillOpacity: 0.05,
point: {
events: {
click: function() {
chartPointClick(this)
}
}
}
},
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
chartPointClick(this)
}
}
}
}
},
series: []
});
chartPointClick = function(sender) {
var drilldown = sender.drilldown;
if (drilldown) {
currentInterval = 'days';
if (currentIndex < 12) {
currentIndex = drilldown.month - 1;
} else {
currentIndex = 12 + drilldown.month - 1;
}
switchChartSeries();
} else {
var start_date = new Date(selectedYear(), currentIndex % 12, sender.x + 1);
var end_date = new Date(selectedYear(), currentIndex % 12, sender.x + 2);
var url = '#{admin_students_path}'
if( currentView == "Inquiries" ){
var search_type = 'created';
var status_scope = 'inquiries_students';
} else{
var search_type = 'submitted';
var status_scope = 'applied_students';
}
var params = encodeURI('display_all=true&default=') + status_scope + encodeURI('&result_type=and&search[') + search_type + encodeURI('_at_gteq]=') + $.datepicker.formatDate('yy-mm-dd', start_date) + '&' +
encodeURI('search[') + search_type + encodeURI('_at_lteq]=') + $.datepicker.formatDate('yy-mm-dd', end_date);
document.location.href = url + '?' + params
}
}
switchChartInterval = function(sender, interval) {
$('.chart_interval a').removeClass('active')
sender.addClass('active');
currentInterval = interval;
if (interval == 'months') {
year = selectedYear();
setYear(year);
}
switchChartSeries();
}
$('.boxes li').click(function() {
var $this = $(this);
var proposedView = $this.data('view');
if (currentView != proposedView) {
currentView = proposedView;
if (currentView == 'RSVPs') {
$('#pipeline').hide()
$('#rsvps').show()
$('.months-filter').hide()
} else {
$('#rsvps').hide()
$('#pipeline').show()
$('.months-filter').show()
switchChartSeries();
}
$('.boxes li').removeClass('active');
$this.addClass('active');
}
return false;
})
$('.boxes li[data-view="' + currentView + '"]').addClass('active');
$('#programs').change(function() {
var program = $(this);
$.ajax({
url: "#{admin_dashboard_change_program_path}",
data: {
program_id: program.val(),
current_view: currentView,
current_month: currentIndex % 12 + 1,
current_year: selectedYear(),
current_interval: currentInterval
},
beforeSend: function() {
program.hide();
$('#programs_spinner').show();
},
complete: function() {
switchChartSeries();
if($('.boxes li.active').data('view') === 'RSVPs'){
$('#pipeline').hide()
$('#rsvps').show()
$('.months-filter').hide()
}
}
})
})
switchChartSeries();
});
Thank a lot for help guys!
The #{...} in here
var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect};
is ruby code: it will only work in ruby. it's not valid javascript on it's own: when it runs through the erb interpreter it will generate (hopefully) valid js.
You can do it in a js.erb file for example (or an html.erb file for that matter) because the .erb file is evaluated in ruby. But you can't do it in a plain js file.

Highcharts setExtremes overflow issue

I have a Highcharts column graph with 10 series on the x axis.
http://qaa.balcroft.com/images/chart1.png
I want to allow the user to zoom in so I added a button to setExtremes:
$('#zoomInButton').click(function () {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(4, 9);
});
However this causes the graph to overflow into the y axis title area on the left hand side.
http://qaa.balcroft.com/images/chart2.png
I've tried amending xAxis.minRange and yAxis.overflow but neither fixes the problem.
Any suggestions?
The function to create the graph is
function inialiseGraphOnLoad(strOrgCode, strLevelCode, currentLevel, strTeamName){
var jsonMimeType = "application/json;charset=UTF-8";
$.ajax({
type: "POST",
url: "ajax/getStaffOnLoad.php",
cache: false,
data: {org: strOrgCode, levelcode: strLevelCode, level: currentLevel},
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType(jsonMimeType);
}
},
dataType: 'json',
success: function(dataDepts){
//Create array of employee names
chartWidth = 0;
maxZoom = 0;
var listDepts = [];
for (var i = 0; i < dataDepts.employees.length; i++) {
chartWidth = chartWidth + 250;
maxZoom = maxZoom + 1;
var arrayEmployee = dataDepts.employees[i].name;
var splitResult = arrayEmployee.split("||");
var strEmployeeCode=splitResult[0];
var strEmployeeName=splitResult[1];
var employeeURL = serverURL + strEmployeeCode + '">' + strEmployeeName + '</a>';
listDepts.push(employeeURL);
}
var mainPageWidth = $('#staffMainPage').width();
if(chartWidth > mainPageWidth){
chartWidth = mainPageWidth;
}else if(chartWidth < 500){
chartWidth = 500;
}
$('#hid_lastPage').val(maxZoom);
//Create series array
var seriesArray = [];
for (var i = 0; i < dataDepts.groups.length; i++) {
seriesArray.push({
name : dataDepts.groups[i].name,
dataLabels: {
enabled: true,
rotation: -90,
color: '#424242',
align: 'right',
x: 4,
y: 10,
style: {
fontFamily: 'Verdana, sans-serif'
},
formatter:function(){
if(this.y > 0){
return this.y;
}
}
},
color : dataDepts.groups[i].colour,
data : []
});
for (var j = 0; j < dataDepts.employees.length; j++) {
if(i == 0){
seriesArray[i].data.push(dataDepts.employees[j].rating1);
}else if(i == 1){
seriesArray[i].data.push(dataDepts.employees[j].rating2);
}else if(i == 2){
seriesArray[i].data.push(dataDepts.employees[j].rating3);
}else if(i == 3){
seriesArray[i].data.push(dataDepts.employees[j].rating4);
}else if(i == 4){
seriesArray[i].data.push(dataDepts.employees[j].rating5);
}else if(i == 5){
seriesArray[i].data.push(dataDepts.employees[j].rating6);
}else if(i == 6){
seriesArray[i].data.push(dataDepts.employees[j].rating7);
}else if(i == 7){
seriesArray[i].data.push(dataDepts.employees[j].rating8);
}else if(i == 8){
seriesArray[i].data.push(dataDepts.employees[j].rating9);
}else if(i == 9){
seriesArray[i].data.push(dataDepts.employees[j].rating10);
}else if(i == 10){
seriesArray[i].data.push(dataDepts.employees[j].rating11);
}else if(i == 11){
seriesArray[i].data.push(dataDepts.employees[j].rating12);
}else if(i == 12){
seriesArray[i].data.push(dataDepts.employees[j].rating13);
}else if(i == 13){
seriesArray[i].data.push(dataDepts.employees[j].rating14);
}else if(i == 14){
seriesArray[i].data.push(dataDepts.employees[j].rating15);
}
}
}
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
width: chartWidth,
height: 550,
marginBottom: 100,
margin: 80,
options3d: {
enabled: true,
alpha: 5,
beta: 10,
depth: 50,
viewDistance: 25
}
},
title: {
text: strTeamName
},
subtitle: {
text: 'Quality Rating By Employee'
},
xAxis: {
categories: listDepts,
useHTML: true,
minRange: 5,
title: {
text: '<br>(click an employee name for more detail)',
style: {
color: '#6E6E6E',
fontSize: '1em',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Quality Rating (%)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' %'
},
scrollbar: {
enabled: true
},
plotOptions: {
column: {
depth: 25
},
bar: {
dataLabels: {
enabled: true
}
}
},
series:seriesArray
});
}
});
}

Resources