I'm trying to graph a histogram of 1 series with 100 inputs. However, jqPlot keeps rendering my data as a line graph when I specify it to render a bar graph instead. My code is a modified version of the bar graph examples.
<script type="text/javascript" src="dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.pointLabels.min.js"></script>
$(document).ready(function(){
var hits = [123, 54, 897, ...]
var plot1 = $.jqplot('chart1', [hits], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
series:[ {label:'Hits'} ],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
autoscale: true,
renderer: $.jqplot.CategoryAxisRenderer,
numberTicks: 4,
tickInterval: 25
},
yaxis: {
autoscale: true
}
}
});
});
Does anybody know what I'm doing wrong?
Add seriesDefaults options to your jqplot options :
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
}
Related
How can I change the kendo ui graph configuration so that it draws line for each integer with considering "interpolate" for missing values. In the example, I wanted a line chart for all integers from 1 to 12 even though required data is not available in the data source.
Please note that, my datasource is dynamic and it can have around 1000 records.
dataSource = [{"measurementPoint":1,"data_1":10},{"measurementPoint":2,"data_1":22},{"measurementPoint":5.5,"data_1":5},
{"measurementPoint":7,"data_1":10},{"measurementPoint":10.06,"data_1":22},{"measurementPoint":12.2,"data_1":5}];
$("#chart").kendoChart({
dataSource: { data: dataSource },
seriesDefaults: {
type: "line",
markers: { visible: false }},
categoryAxis: [{
justified: true,
field: "measurementPoint",
labels: {
step:2,
format: "###",
visible:true },
majorGridLines: { visible: false },
majorTicks: { visible: false },
crosshair: { visible: false }
}],
series: [
{ field: "data_1", name: "Pressure" }
],
tooltip: {
visible: true,
shared: true
}
});
<html>
<head>
<title>Kendo Chart</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"> </div>
</body>
</html>
Use Scatter line chart instead of 'line' chart. 'Scatter line' chart properly scale chart with numeric x axis.
I don't want line in background of plotly area graph. My graph is coming like this.
I want to remove this lines from graph. But I didn't get any solution for it.
I referred this code.
And following is my code:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,9, 4, 5],
fill: 'tozeroy',
fillcolor: 'red',
text: server1,
hoverinfo: "x+y+text",
name:"Server 1",
type: 'scatter',
mode:"markers",
marker:
{
size:5,
color:"gray"
},
uid:"c2e171"
};
var layout = {
margin: {
l: 35,
r: 40,
b: 50,
t: 10
},
legend: {
"orientation": "h"
},
yaxis : {
fixedrange: true
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout);
var plotDiv = document.getElementById('myDiv');
</script>
</body>
</html>
And when I'm expanding graph means dragging graph x axis date is hiding,
Please give me solution for it. I'm new with plotly.js
You can use showgrid:
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
More plot.ly layout reference: https://plot.ly/javascript/reference/#layout-xaxis
I have tried to create a column chart using highcharts in nodejs and data is getting fetched from mongodb.
I am getting stuck in series option Please help me to get out of it.
The below is my code for ejs file -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie Highcharts Example</title>
<!-- Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/highcharts.js"></script>
<!-- Optional: the exporting module -->
<script type="text/javascript" src="/javascripts/exporting.js"></script>
<!-- Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
chartdata= <%-JSON.stringify(data)%>
var category = [];
var dname=[];
var kdata=[];
for(j=0;j<chartdata.length;j++){
category[j]=[chartdata[j].catname]
// name[j]=[chartdata[j].seriesname]
// data[j]=[chartdata[j].wdata,chartdata[j].hdata,chartdata[j].cdata]
}
for(k=0;k<chartdata.length;k++){
dname[k]=[chartdata[k].seriesname];
}
for(i=0;i<chartdata.length;i++){
kdata[i] = [chartdata[i].wordval,chartdata[i].codeval,chartdata[i].highval];
}
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Monthly Average data'
},
xAxis: {
categories: category
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y ;
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
}
},
series: [{
name: dname[0],
data: kdata[0]
},
{
name: dname[1],
data: kdata[1]
},
{
name: dname[2],
data: kdata[2]
}
]
});
});
</script>
</head>
<body>
<!-- Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
#NishithChaturvedi - When I am doing this way its working so only the problem with loop I know I am asking silly question but didn't able to rectify.
Thank you for your time I have fixed the problem I was facing in series value
I just created another array var and store the name and data to it and pass that array in series.
Hi im using jqplot graph. I need to hide the Circular points that are currently displayed on the plot chart for each value in the array except the last point.
I use the following code to display the chart. I used "show marker : false" option, but it hides all circular in the graph. Please help me how to show only one circular point in the graph.
<div id="chart2"></div>
var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var plot1 = $.jqplot('chart2', [line2], {
seriesDefaults: {
showMarker: false
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
formatString: '%m/%d/%Y'
},
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
show: true
},
cursor: {
show: false
}
});
I want to achieve the below screen as my output. please help me how this could be done. Any help will be appreciated.
There is no direct way of doing this using jqplot. but you can achieve this by making the following changes: jsFiddle link
$(document).ready(function(){
var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var line3 = [['2012-10-07', 25]];
var plot1 = $.jqplot('chart1', [line2, line3], {
series: [
{
showMarker: false
},
{
showMarker: true
}
],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
formatString: '%m/%d/%Y'
},
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
show: true
},
cursor: {
show: false
}
});
});
I'm working with jqplot, and am seeing some odd series label behavior.
If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?
[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/
$(document).ready(function(){
optionsObj = {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
seriesColors: ["#6699FF"],
seriesDefaults:{
shadow:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 5
}
},
series:[
{pointLabels:{
show: true
}}],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:false,
markSize:0
}
},
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
}
}
}
};
// labels not shown
plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
// labels shown
plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});
Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:
...
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
},
min: 0,
pad:1.8
}
...
Updated fiddle here.