Is it possible to have double axis chart using jqplot
Can anyone please share the example for the same
It is possible.
Code example :
$(document).ready(function(){
$.jqplot('chart1', [
[54551.94,15192.79,37937.26,11417.67,11799.59,18377.53,49207.82,168235.42,16654.29,62145.78],
[132.19,2.99,6.09,50.38,1.44,4.41,25.25,3.37,68.60,2.14]
], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
highlightMouseOver : true,
barWidth : 10
}
},
legend : {
show : true,
placement : 'outsideGrid'
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
tickOptions : {
angle : 45
},
ticks : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
},
yaxis : {
label : 'axis1',
renderer : $.jqplot.LogAxisRenderer
},
y2axis : {
label : 'axis2'
}
},
series : [{
yaxis : 'yaxis',
label : 'dataForAxis1'
}, {
yaxis : 'y2axis',
label : 'dataForAxis2'
}]
});
});
JSFiddle example :
EXAMPLE
Documentation :
See here for the reference.
Look the third example from the top.
Yes it is possible. A starting example can be :
var yaxis_data = [1,2,3,4];
var y2axis_data = [2,4,6];
var myjqplot = $.jqplot('chart1', [yaxis_data, y2axis_data], {
series: [
{ yaxis: "yaxis" },
{ yaxis: "y2axis" }
]
});
Edit : See here for further explanations about Series
Related
I have a very simple sunburst chart with two levels of data :
var data = [{
type : "sunburst",
labels : ["A","B","B1","B2","C","C1","C2"],
ids : ["0","10000","100001","100003","20000","200001","200002"],
parents : ["","0","10000","10000","0","20000","20000"],
values : [16,11,10,1,5,3,2],
leaf : {
opacity: 0.4
},
marker : {
line: {
width: 5
}
},
branchvalues : 'total'
}];
var layout = {
margin : {
l: 0, r: 0, b: 0, t: 0
},
width : 200,
height : 200
};
Plotly.newPlot(
'sunburst-canvas',
data,
layout,
{
displaylogo: false
});
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<div id="sunburst-canvas"></div>
Is there a way to change the speed of the animation that the library performs when clicking on the inner slices (back and forth) ?
I want to make a dotted datagrid for the worldmap. http://prntscr.com/8oo2tw . I have used the legends(image) for every region in whole map. All seems good but when that legend lies between the boundary of the countries the legend seems to be distorted. How can i remove the stroke (boudaries between the countries) so that dotted image lying between the boundary of the countries doesnot seem distorted.
I have tried making stoke:none and stroke-width:0 and stroke-opacity:0. But doesnot seems working. My code is like:
new jvm.Map({
container: jQuery('#world-map'),
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
markersSelectable: true,
hoverOpacity: 0.7,
hoverColor: false,
series: {
regions: [{
scale: {
dotted:"<?php echo $base_url .'/'. path_to_theme()?>"+"/images/dot.png",
yellowBlue: '../images/icon.png'
},
attribute: 'fill',
values: {
"AF": 'dotted',
"AX": 'dotted',
//all regions with in world_mill_en
"ZI": 'dotted',
"ZW": 'dotted',
"ZM": 'dotted',
"_1": 'dotted'
},
attribute: 'fill',
}]
},
});
You could set this parameter in a map object, like this:
regionStyle : {
initial : {
fill : "white",
"fill-opacity" : 1,
stroke : "black",
"stroke-width" : 0.0,
"stroke-opacity" : 1
},
hover : {
"fill-opacity": 1,
"stroke-width" : 0.0,
},
selectedHover : {}
},
I have json data in the following format :
[{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
}]
I want to create a bar chart in NVD3 where x coordinates will be label and the y coordinates will be the value. So how can I achieve it. I have gone through many examples where the JSON data was used is a different format but my data is as shown above.
EDITED CODE:
Here is the js code through which I am trying to create a chart in NVD3 .
d3.json("http://localhost:8080/api/study", function(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart().x(function(d) {
return d.label;
}).y(function(d) {
return d.value;
}).margin({
top : 30,
right : 20,
bottom : 50,
left : 175
}).showValues(true)//Show bar value next to each bar.
.tooltips(true)//Show tooltips on hover.
//.transitionDuration(350)
.showControls(true);
//Allow user to switch between "Grouped" and "Stacked" mode.
chart.yAxis.tickFormat(d3.format(',.2f'));
d3.select('#chart11 svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
Most charts in nvd3.js have the following data sceleton:
[
{
key: "<Series name>",
color: "<CSS color>",
values: [
{x: 0, y: 10},
{x: 1, y: 20},
{x: 2, y: 30}
....
]
},
{
key: "<Series name>"
...
}
]
In your case the following format will be valid:
[
{
key: "Series 1",
values: [
{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
}
]
}
]
You will need to specify axis properties accessors:
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
I am trying to create a chart in c3.js and my data is coming from an external API. I want to get the data and the keys from the json data so that I can plot the values on the chart. I have added the external api format and the js code below.
JSON DATA:
[{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
}]
JS Code:
d3.json("http://localhost:8080/api/study", function(data) {
var chart = c3.generate({
bindto : '#chartContainer',
data : {
columns : ['label']
},
keys: {
x: 'label',
value: ['value']
}
});
});
Thank You
Pre-process the API data into the format that C3 requires. It should be straightforward:
var convertedData = [];
apiData.forEach(function(item){
convertedData.push([item.label, item.value]);
});
Here's an example: http://jsfiddle.net/jrdsxvys/2/
EDIT:
If you're wanting to use the JSON data option with the value array, then it would be something like this, where you set the json property, and the keys object:
var chart = c3.generate({
data: {
json: data,
keys: {
x: 'label',
value: ["value"]
},
type: 'bar'
},
axis: {
x: {
type: 'category'
}
},
legend: {
show:false
}
});
Fiddle: http://jsfiddle.net/jrdsxvys/4/
$.jqplot(
this.loadAvgChartId,
loadAvgChartData,
{
height : 130,
width : 410,
fontSize : '9px',
seriesColors : [ '#3aa5dc',
'#032ecf' ],
series : [ {
label : 'Load-5',
showMarker : false,
lineWidth : 1,
shadowDepth : 0,
shadowOffset : 1.25,
}, {
label : 'Load-15',
showMarker : false,
lineWidth : 1,
shadowDepth : 0
} ],
legend : {
show : false
},
grid : {
gridLineColor : '#EBEBEB',
gridLineWidth : 1.0,
show : false,
shadow : false,
shadowDepth : 0,
background : '#FFF',
drawBorder : false,
borderColor : '#999',
borderWidth : '1.0'
},
cursor : {
zoom : false,
showToolTip : false,
showVerticalLine : false,
showCursorLegend : false,
intersectionThreshold : 20,
style: 'default'
},
highlighter : {
bringSeriesToFront: this.isIE7?false:true,
shadow : false,
lineWidthAdjust: 1,
sizeAdjust: -3,
tooltipLocation: 'n',
tooltipAxes: 'both',
formatString: '<i>%s</i><br/><b>%s</b>',
useAxesFormatters : true
},
axes : {
xaxis : {
renderer : $.jqplot.DateAxisRenderer,
syncTicks : true,
tickOptions : {
showGridline : true,
formatString : this.nmdLoadAvgs[this.selectedLoadAvg].curTickFormatString
},
labelPosition : 'start',
tickInterval : this.nmdLoadAvgs[this.selectedLoadAvg].curTickInterval,
min : minXaxisTick,
max : maxXaxisTick
},
yaxis : {
tickOptions : {
showGridline : false,
showMark : false
},
//tickInterval : .5,
pad: 1.4,
min : 0.0,
max: maxYaxisTick,
numberTicks: 3
}
}
}
);
this worked for me:
jqplot changes the color of graph on mouse hover
seriesDefaults:
{
rendererOptions:
{
highlightMouseOver: false
}
}