I am using jquery mobile and jqplot to create a simple bar graph.
I have currently got the code for creating my bar graph in
$( '#divForMyPage' ).live( 'pageinit',function(event){ // bar graph code }
However I keep getting the error: undefined is not an object (evaluating $.jqplot.BarRenderer.js)
The code I'm using to render the bar graph is below: Any help would be most appreciated!
var plot1 = $.jqplot('chart1', [line1], {
title: 'Results',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0,
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
Related
I am new to high charts.
Below is my partial code in a function when creating a mapChart, what it does is that it only show the matching region (with cur_state) as red and others as blue.
chart: {
backgroundColor: null,
map: 'countries/au/au-all',
events: {
load: function () {
// place1
this.series[0].data = this.series[0].data.map((el) => {
// place2
if (el['hc-key'] == region_dict[cur_state][1]) {
el.color = "#ff0000";
return el;
}
el.color = "blue"
return el
})
this.update({
series: [{
data: this.series[0].data
}]
})
}
}
},
When the value of cur_state is changed, I recall the function which contains the map graph, hoping that the corresponding region has color update.
This is the first time I call the function:
This is after second time I call the function, the coloring and hovering effect are gone:
After testing, I realised that both place1 and place2 are executed when the chart is firstly created, and only place1 is executed when the chart is re-created.
My other part of code has similar structure as this: https://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/au/au-all
How can I achieve the expected outcome?
Thanks for helping
The best solution in your case seems to be to use render event and change the color on the SVG level. Example:
chart: {
...,
events: {
render: function() {
this.series[0].points.forEach(function(point) {
if (point['hc-key'] == state) {
point.graphic.attr({
fill: 'red'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/x69pLcyo/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I'm configuring my chart in highcharts and everything works fine but the noData position.
This is my options:
optionsChart = {
chart: {
type: 'bar'
},
lang: {
noData: 'No data available'
},
noData: {
position: {
align: 'end'
}
}
}
the text is setted but it's not aligned, how can I solve it?
It work with left, center or right
noData:{
position:{
align:'right'
}
},
Fiddle
I'd like the cursor to be a crosshair when it is over the chart area of a highcharts graph, to indicate to users that they can zoom in. However, I don't want the cursor to be a crosshair when it's over other areas such as the legend or axes.
Is this possible?
You can use built-in method chart.isInsidePlot(plotX, plotY). Example: http://jsfiddle.net/2eje4xxb/1/
Code example:
container.on("mousemove", function (event) {
var chart = container.highcharts();
if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
$("body").css({
cursor: "crosshair"
});
} else {
$("body").css({
cursor: "default"
});
}
});
Another idea is to utilize chart.plotBackgroundColor option, which creates rect, which can obtain CSS styles:
chart: {
zoomType: 'x',
plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
events: {
load: function(){
if(this.plotBackground) {
this.plotBackground.toFront().css({ // move on top to get all events
cursor: "crosshair"
});
}
}
}
},
And demo: http://jsfiddle.net/2eje4xxb/2/
Yes it is possible. You can write code to set the cursor style in the mouse events.
Please find the jsfiddle here - http://jsfiddle.net/3Lu7bzmn/5/
CSS
.cursorCrossHair{
cursor : crosshair
}
.cursorDefault{
cursor : default
}
JS - Shown only specific piece of code which is required to change the cursor. The id of the div used to render the highcharts is called "container". Please refer the jsfiddle to see the full working example.
$('#container').highcharts({
chart: {
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
},
mouseOut: function () {
$("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
}
}
}
}
},
});
});
I want to make some tooltips visible in my d3 map. The tooltips are column charts generated by Highcharts regarding the chosen city. The trick is that everything is displaying correctly (axis, labels ...) except that the columns are not visible!
Here my d3 code (only the relevant parts):
var tooltip = d3.select("body")
.append("div")
.attr("id","tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
cities.on("mouseover", function(d, i) {
d3.select(this).style('fill', '#95a5a6');
tooltip.html(zoomCityComm(d))
return tooltip.style("visibility", "visible")})
.on("mousemove", function(d, i){
return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left",(d3.event.pageX - 120) + "px");
})
}
The function zoomCityComm is HighCharts (example of data: [5,10]):
function zoomCityComm(d) {
chart = new Highcharts.Chart({
chart : {
renderTo: 'tooltip',
type: 'column',
width:200,
height:200,
plotBackgroundColor: '#FCFFC5',
zoomType: 'xy'
},
title: {
text: "TOTO"
},
legend: {
enabled: false
},
xAxis: {
categories: ['In','Out']
},
yAxis: {
title: {
text: 'Sum',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
},
series:[{color: '#4572A7',data: res}]
});
return document.getElementById("tooltip").innerHTML;
}
When the graph is displayed in a "normal" div within the document, it appears correctly.
Sorry if my explanations are not clear but ask me for some details if needed.
Thanks
Cyril
You're setting the HTML content of the div twice, as highcharts renders it itself. In your mouseover handler function, it is enough to do
zoomCityComm(d);
instead of
tooltip.html(zoomCityComm(d));
For the interested, here's what's happening. Setting the HTML of the tooltip div from the return value of the function captures the first animation frame that highchart uses to grow the bars. As it is the first frame, the height of the bars is still 0 -- that is, the bars are there, but not visible because they have essentially no height. Replacing the HTML of the div means that the animation won't work anymore, as the elements that would be animated have been replaced.
i'm trying to port some highchart charts from a php web appplication to a Sencha Touche mobile app.
I want to put an empty chart in my View page and populate it dinamycally with some jsonp calls.
Here's my view code (not all the 130 lines...):
{
xtype : 'panel',
scrollable: true,
html : 'INSERIRE QUI I GRAFICI E LE TABELLE',
items : [
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER GRAFICO',
itemId : 'chartRenderPanel',
margin: '180px'
},
{ //sample code, to be replaced with a consinstent config...
xtype: 'highchart',
chartConfig: {
chart: {
type: 'spline'
},
title: {
text: 'A simple graph'
},
xAxis: {
plotLines: [{
color: '#FF0000',
width: 5,
value: 'mar'
}]
}
}
},
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER TABELLE',
itemId : 'tableRenderPanel',
margin: '180px'
}
]
}
The Highchart part is taken from this fiddle http://jsfiddle.net/marcme/DmsGx/
it works on the fiddle but not in my mobile app: debugging with chrome, i get stuck here in the Highcharts.js:
update : function(delay) {
var cdelay = delay || this.updateDelay;
if(!this.updateTask) {
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
}
this.updateTask.delay(cdelay);
},
With "Uncaught TypeError: undefined is not a function " message in the console.
Please, help! : )
Lorenzo
You have to call DelayedTask differently in sencha touch than you do in Extjs. Change this
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
to this
if (Ext.util.DelayedTask)
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
else
this.updateTask = Ext.create('Ext.util.DelayedTask', this.draw, this);