Jq-Plot x-Axis Spacing - jqplot

I am having an issue using a line chart getting the calculated labels in the x-axis to space properly. If I want to have 5 data points with a few missing (e.g. [1,50.1],[2,49.2],[5,20.4],[6,17],[7,23.3]), the x-axis will show 1 then 2 then a space where 3 and 4 should have been then 5, 6, and 7. What I would like is to have the 5th data point beside the 2nd data point (in the position where the 3rd data point would ideally be). Basically I am trying to hide a data point yet keep the x-axis value in the grid.
Any assistance is much appreciated.

Try this:
<script type="text/javascript">
$(document).ready(function () {
var plot2 = $.jqplot('chart2', [[[1,50],[2,49],[5,20],[6,17],[7,23]]], {
title: 'Plot',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "X Axis",
pad: 0,
ticks:[1,2,5,6,7] //you can create this dynamically
},
yaxis: {
label: "Y Axis"
}
}
});
});
UPDATE:
<script type="text/javascript">
$(document).ready(function () {
var producciones = [];
for (var i = 0; i < 2000; i++) { producciones.push(new Number(i),new Number(i)) }
var plot2 = $.jqplot('chart2', [producciones], {
title: 'Plot',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "X Axis",
pad: 0,
numberTicks: 100
},
yaxis: {
label: "Y Axis"
}
}
});
});

Related

Amcharts to display only even numbers in Y-axis

I am trying to have only even numbers from 0 and up on the Y-axis of a amcharts5 Line chart but i cannot figure it out how to.
Example: if the biggest value is 5 my Y-axis should how: 0, 2, 4, 6.
Is it possible to achieve this?
What I'm currently having:
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
maxPrecision: 0,
maxDeviation: 0.1,
renderer: am5xy.AxisRendererY.new(root, {})
})
);
Result:
What I need to achieve:
Have you tried to play with the minGridDistance property referenced here?
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
minGridDistance: 20
})
}));
Full example:
am5.ready(function () {
var root = am5.Root.new("chartdiv");
var chart = root.container.children.push(am5xy.XYChart.new(root, {}));
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
minGridDistance: 20 // Play with it and see what happens...
})
}));
var series = chart.series.push(am5xy.LineSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "valueX",
valueYField: "valueY"
}));
var data = [],
valueX = 0,
valueY = 0;
for (var i = 0; i < 20; i++) {
data.push({ valueX: i, valueY: i });
}
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>

How to add CLICK events on AMCHARTS 5 labels (x and y axis)?

I am trying to add basic interactivity to my AMCHARTS 5 labels. Take this chart as an example:
I need to be able to click on the names at the left of the chart. That is actually yAxis because I use an inverted chart.
In the function that creates the series, I placed this code:
series.columns.template.events.once("click", function(ev) {
console.log("Clicked on a column", ev.target);
});
And it makes my bars to be clickable. I don't know how to refer to the labels on the left.
Labels as interactive elements in amCharts 5 are tricky. Basically, it's super hard to determine hover/click over just text because it's impossible to completely eradicate antialising, and the actual colored area is super tiny.
Therefore, if we need tooltip to be interactive - have a hover tooltip or handle click events - we need to add a background to it.
The background does not necessarily have to be visible: we can just set its fillOpacity: 0 to make it completely transparent.
Source: Labels – amCharts 5 Documentation
After the declaration and initialization of your yAxis, you can put this piece of code:
yAxis.get("renderer").labels.template.setup = target => {
target.setAll({
cursorOverStyle: "pointer",
background: am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0
})
});
};
yAxis.get("renderer").labels.template.events.on("click", e => {
console.log(e.target.dataItem.dataContext.category);
});
Full example:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
let data = [{
category: "Category 1",
value: 10
}, {
category: "Category 2",
value: 20
}, {
category: "Category 3",
value: 15
}];
let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererY.new(root, {
inversed: true,
cellStartLocation: 0.1,
cellEndLocation: 0.9
})
}));
yAxis.data.setAll(data);
yAxis.get("renderer").labels.template.setup = target => {
target.setAll({
cursorOverStyle: "pointer",
background: am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0
})
});
};
yAxis.get("renderer").labels.template.events.on("click", e => {
console.log(e.target.dataItem.dataContext.category);
});
let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
renderer: am5xy.AxisRendererX.new(root, {})
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "value",
categoryYField: "category"
}));
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>

AmCharts5: get active dataItem on click LineSeries

How I can get dataContext from point by click on free area?
When you hover the mouse cursor, a tooltip appears, can I determine who has it currently active?
I am not sure to understand your question properly, but if you want to get the data behind a bullet when you click on it, this is the way to go:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
let data = [
{
category: "Category 1",
value: 10
},
{
category: "Category 2",
value: 20
},
{
category: "Category 3",
value: 15
}
];
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererX.new(root, {})
}));
xAxis.data.setAll(data);
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
let series = chart.series.push(am5xy.LineSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "category",
valueYField: "value"
}));
series.strokes.template.set("strokeWidth", 3);
series.data.setAll(data);
let bulletTemplate = am5.Template.new(root, {});
bulletTemplate.events.on("click", e => {
let context = e.target.dataItem.dataContext;
console.log(`${context.category} | ${context.value}`);
});
series.bullets.push(() => {
return am5.Bullet.new(root, {
sprite: am5.Circle.new(root, {
strokeWidth: 3,
stroke: series.get("stroke"),
radius: 5,
fill: root.interfaceColors.get("background")
}, bulletTemplate)
});
});
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>
You can read the documentation here: Bullets – amCharts 5 Documentation

jqPlot: show full date and value on highlight, just year on axis?

I'm using jqPlot to graph out some weight data... if I dont specify just showing the year on the xAxis, the display is cluttered... but it seems like I can't get the full date to show when any data point is highlighted. Is there any way to get the highlighter to use a date-aware formatter, rather than the simple printf stuff?
<link rel="stylesheet" type="text/css" hrf="jqPlot/jquery.jqplot.min.css" />
<script>
$(document).ready(function(){
var line1=
[['1999.03.17',205],
['2001.06.15',189],
['2001.10.11',179],
['2004.01.09',192.5 ],
['2006.04.12',221.5],
['2007.12.06',216.5],
['2009.01.26',220],
['2010.06.22',215],
['2011.01.03',210],
['2012.04.20',208],
['2012.05.09',207.8],
['2013.05.03',201.2],
['2014.01.23',190.9]
];
var plot2 = $.jqplot('chart2', [line1], {
highlighter: {
show: true,
formatString: "%s %d",
tooltipAxes:'xy'
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%y'},
tickInterval:'1 years'
}
},
series:[{lineWidth:4, markerOptions:{show:false}}]
});
});
Here is the solution: JsFiddle
$(document).ready(function () {
function tooltipeditor(str, seriesIndex, pointIndex, plot) {
var data = plot.data[seriesIndex][pointIndex]
return "<div>" + data[0] + " , " + data[1] + "</div>";
}
var line1 =
[
['1999/03/17', 205],
['2001/06/15', 189],
['2001/10/11', 179],
['2004/01/09', 192.5],
['2006/04/12', 221.5],
['2007/12/06', 216.5],
['2009/01/26', 220],
['2010/06/22', 215],
['2011/01/03', 210],
['2012/04/20', 208],
['2012/05/09', 207.8],
['2013/05/03', 201.2],
['2014/01/23', 190.9]
];
var plot2 = $.jqplot('chart1', [line1], {
highlighter: {
show: true,
tooltipContentEditor: tooltipeditor
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%y'
},
//tickInterval: '1 years'
}
},
series: [{
lineWidth: 4,
markerOptions: {
show: true
},
}]
});
});

jqPlot horizontal bar chart with tick label at top of bar

I have a jqPlot hor. barchart like this one. jq plot - getting linear x axis ticks
I want to be able to put y-axis tick labels (like software and services, israel in the pic)
on top of respective bars using some parameters or renderer instead of fiddling with css.
Is there an easy way to do that? Thanks in advance.
so far, my code looks like below.
`
function drawChart() {
var data = new Array(3);
for (var i = 0; i < data.length; i++) {
data[i] = new Array(2);
data[i][0] = Math.random() * 100;
data[i][1] = 'text-' + (i + 1);
}
var plot2 = $.jqplot('votingresult', [
data,
], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
shadow: false,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 20,
barMargin: 0,
barWidth: 20,
varyBarColor: true,
}
},
gridPadding: { top: 0, right: 0, bottom: 0 },
grid: {
drawGridLines: false,
drawBorder: false,
shadow: false
},
axesDefaults: {
showTicks: false,
shadow: false
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '10pt',
mark: 'inside',
showLabel: false
}
}
}
});
}`
I want jqplot like one shown in the right side in this flickr picture.
http://www.flickr.com/photos/surajshrestha/7455033636/sizes/l/in/photostream/
Jeroen: I have looked into point labels. But, here, I am talking about axis label to be inside the graph.
I had the same challenge and ended up just writing a function to append content to the graph DIV rather than try and fiddle with JQPlot. You just have to adjust the barMargin option to account for the spacing.
function makeSectionLabels(jsonObject, domObject, topPadding, spacing) {
var html = "<div class='bar-chart-sections' style='padding-top:"+topPadding+"'>";
$.each(jsonObject, function(index, value){
html += "<h5 style='margin-bottom:"+spacing+"'>"+value+"</h5>"
});
html += "</div>"
$(domObject).append(html);
};

Resources