jqplot wrapper and rpc refactoring including HttpClient as the entry point so users will access it via HttpClient.instance. We think it's more descriptive
Steve L. Nyemba
9 years ago
parent
173a2d4739
commit
e71d0615c3
@ -0,0 +1,235 @@
|
||||
/**
|
||||
* This is a charting wrapper, it is designed to simplify the interface to d3
|
||||
* dependencies:
|
||||
* - jqplot.js charting library http://d3js.org for documentation and more
|
||||
* - utils.js has utilities and design patterns used for internal purposes
|
||||
* - dom.js creates legend objects
|
||||
*/
|
||||
|
||||
if(!jx){
|
||||
var jx = {}
|
||||
}
|
||||
jx.chart = {} ;
|
||||
|
||||
|
||||
jx.jqplot = {}
|
||||
/***
|
||||
* adding dependencies and libraries in case they are overwhelming for users
|
||||
* This
|
||||
*/
|
||||
jx.jqplot.init = function(){
|
||||
body = document.getElementsByTagName('head') ;
|
||||
|
||||
if(body != null){
|
||||
body = body [0]
|
||||
link = jx.dom.get.instance('LINK') ;
|
||||
link.href = 'https://the-phi.com/pub/js/jqplot/jqplot.css' ;
|
||||
link.rel = 'stylesheet'
|
||||
link.type = 'type/css'
|
||||
document.head.appendChild(link);
|
||||
var url = [
|
||||
'https://the-phi.com/pub/js/jqplot/excanvas.js',
|
||||
'https://the-phi.com/pub/js/jqplot/jqplot.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.mobile.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.barRenderer.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.donutRenderer.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.categoryAxisRenderer.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.pointLabels.js',
|
||||
'https://the-phi.com/pub/js/jqplot/plugins/jqplot.canvasTextRenderer.js'
|
||||
] ;
|
||||
// for(i in url){
|
||||
// script = jx.dom.get.instance('SCRIPT') ;
|
||||
// script.setAttribute('src',url[i]) ;
|
||||
// script.language = 'javascript'
|
||||
// document.head.appendChild(script)
|
||||
// }
|
||||
jx.utils.patterns.visitor(url,function(_url_){
|
||||
script = jx.dom.get.instance('SCRIPT') ;
|
||||
script.setAttribute('src',_url_) ;
|
||||
script.language = 'javascript'
|
||||
document.write(script.innerHTML)
|
||||
|
||||
// document.head.appendChild(script)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
jx.jqplot.line = {}
|
||||
jx.jqplot.line.options= function(){
|
||||
var options = {
|
||||
series:[{showMarker:true}],
|
||||
grid:{
|
||||
drawGridLines:false,
|
||||
background:'white',
|
||||
borderColor:'white'
|
||||
},
|
||||
seriesDefaults:{
|
||||
rendererOptions: {
|
||||
smooth: true,
|
||||
animation: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
pointLabels: {show: false}
|
||||
},
|
||||
axes:{
|
||||
xaxis:{
|
||||
tickOptions:{
|
||||
showGridline: true
|
||||
},
|
||||
// label:'Angle (radians)'
|
||||
|
||||
renderer: $.jqplot.CategoryAxisRenderer,
|
||||
min:0,
|
||||
pad:2
|
||||
},
|
||||
yaxis:{
|
||||
// label:'Cosine'
|
||||
min:0,
|
||||
tickOptions:{
|
||||
showGridline: false
|
||||
},
|
||||
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
|
||||
}
|
||||
},
|
||||
legend:{}
|
||||
} ;
|
||||
return options;
|
||||
}
|
||||
/**
|
||||
* @id DOM identifier
|
||||
* @series matrix of values to be ploted
|
||||
* @labels xaxis labels
|
||||
* @lnames names of series (vectors in the matrix)
|
||||
*/
|
||||
jx.jqplot.line.render = function(id,series,labels,lnames){
|
||||
jx.dom.set.value(id,'')
|
||||
var options = jx.jqplot.line.options() ;
|
||||
options.axes.xaxis.ticks = labels ;
|
||||
if(series.length > 1){
|
||||
options.legend.show = true
|
||||
options.legend.location = 'ne'
|
||||
options.legend.placement = 'outsideGrid'
|
||||
options.series = lnames;
|
||||
}
|
||||
$.jqplot(id,series,options)
|
||||
}
|
||||
|
||||
|
||||
jx.jqplot.bar = {}
|
||||
jx.jqplot.bar.options = function(){
|
||||
var options = {
|
||||
grid:{
|
||||
background:'white',
|
||||
drawGridLines:false,
|
||||
borderColor:'white'
|
||||
|
||||
|
||||
},
|
||||
seriesDefaults:{
|
||||
renderer:$.jqplot.BarRenderer,
|
||||
|
||||
rendererOptions: {
|
||||
highlightMouseDown: true,
|
||||
// smooth: true,
|
||||
animation: {
|
||||
speed:900,
|
||||
show: true
|
||||
}
|
||||
|
||||
},
|
||||
pointLabels: {show: true}
|
||||
},
|
||||
axes: {
|
||||
xaxis: {
|
||||
tickOptions:{
|
||||
showGridline: false
|
||||
},
|
||||
renderer: $.jqplot.CategoryAxisRenderer,
|
||||
// ticks:labels,
|
||||
showTickMarks:false,
|
||||
pad:0
|
||||
},
|
||||
yaxis:{
|
||||
tickOptions:{
|
||||
showGridline: true
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
legend: {
|
||||
// show: keys.length > 1,
|
||||
location: 'ne',
|
||||
xoffset:2,
|
||||
placement: 'outsideGrid'
|
||||
}
|
||||
}
|
||||
return options;
|
||||
}
|
||||
/**
|
||||
* Creating a bar chart (columns actually)
|
||||
* @id DOM identifier
|
||||
* @series array of matrices of values (in the y-axis)
|
||||
* @labels x-axis labels
|
||||
* @lnames names of vectors in the series
|
||||
*/
|
||||
jx.jqplot.bar.render = function(id,series,labels,lnames){
|
||||
jx.dom.set.value(id,'')
|
||||
var options = jx.jqplot.bar.options()
|
||||
options.axes.xaxis.ticks = labels ;
|
||||
options.legend.show = true
|
||||
options.series = lnames;
|
||||
$.jqplot(id, series,options)
|
||||
|
||||
}
|
||||
jx.jqplot.stackedBar = {}
|
||||
jx.jqplot.stackedBar.options = jx.jqplot.bar.options ;
|
||||
jx.jqplot.stackedBar.render = function(id,series,label,lnames){
|
||||
jx.dom.set.value(id,'')
|
||||
var options = jx.jqplot.stackedBar.options()
|
||||
options.axes.xaxis.ticks = labels ;
|
||||
options.legend.show = true
|
||||
|
||||
options.series = lnames;
|
||||
options.stackSeries= true,
|
||||
// options.seriesDefaults.label = lnames[0];
|
||||
options.seriesDefaults.pointLabels.show= false;
|
||||
$.jqplot(id, series,options)
|
||||
|
||||
}
|
||||
|
||||
jx.jqplot.donut = {}
|
||||
jx.jqplot.donut.options= function(){
|
||||
var options = {
|
||||
grid:{
|
||||
drawGridLines:false,
|
||||
background:'transparent',
|
||||
borderColor:'white'
|
||||
},
|
||||
|
||||
seriesDefaults: {
|
||||
|
||||
renderer:$.jqplot.DonutRenderer,
|
||||
rendererOptions:{
|
||||
// fill:false,
|
||||
sliceMargin: 3,
|
||||
startAngle: -90,
|
||||
showDataLabels: true,
|
||||
// dataLabels: 'value'
|
||||
}
|
||||
},
|
||||
legend: { show:true, location: 'e' }
|
||||
}
|
||||
return options;
|
||||
}
|
||||
/**
|
||||
* @id DOM identifier
|
||||
* @series vector of values
|
||||
* @labels labels of the values in the series
|
||||
*/
|
||||
jx.jqplot.donut.render = function(id,series){
|
||||
jx.dom.set.value(id,'')
|
||||
var options = jx.jqplot.donut.options() ;
|
||||
$.jqplot(id,series,options)
|
||||
}
|
||||
Loading…
Reference in new issue