I would like to have my chartist charts on my website with no padding from left or right. I am using chartPadding: 0 as advised on several websites, but that did not really help. There is still too much air from the left or right border.
Here is jsFiddle. Help would be great!
var chart = Chartist.Bar('.ct-chart', {
labels: ['1.58', '2.58', '4.58', '5.2', '3.1'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
showPoint: true,
showLine: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: true,
offset: 50
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
// Listening for draw events that get emitted by the Chartist chart
chart.on('draw', function(data) {
// If the draw event was triggered from drawing a point on the line chart
if(data.type === 'label' && data.axis === 'x') {
// We just offset the label X position to be in the middle between the current and next axis grid
data.element.attr({
dx: data.x + data.space / 2
});
}
});
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart"></div>
You can put negative values to the chartPadding property, but that would not give you the effect you are aiming for.
As you render the chart in a normal div the default width value is set to 100%. What you can do as a work around is to restrict the width, so there is less space for the svg. This will affect the padding on the left/right.
Here the updated fiddle - https://jsfiddle.net/zeq3da7p/3/
Related
I am working with a sample here:
var startDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
var endDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
endDate.setHours(startDate.getHours() + 9);
var dataSet = [{"data":[[1469664000000,0]],"color":"#FF0700"},
{"data":[[1469667600000,0]],"color":"#FF0700"},
{"data":[[1469671200000,0]],"color":"#FF0700"},
{"data":[[1469674800000,0]],"color":"#FF0700"},
{"data":[[1469678400000,0]],"color":"#FF0700"},
{"data":[[1469682000000,0]],"color":"#FF0700"},
{"data":[[1469685600000,0]],"color":"#FF0700"},
{"data":[[1469689200000,0]],"color":"#FF7400"},
{"data":[[1469692800000,0]],"color":"#006900"}];
var options = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
lineWidth: 0,
align: "center",
barWidth: 1,
horizontal: true,
fill: 1,
},
yaxis: {
axisLabel: "MachineName",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
ticks: []
},
xaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
//ticks: [[0, "1:00"], [1, "2:00"], [2, "3:00"], [3, "4:00"], [4, "5:00"], [5, "6:00"], [6, "7:00"], [7, "8:00"], [8, "9:00"]],
//labelWidth: 10,
//tickLength: 10,
//tickFormatter: formatXAxis,
//tickSize: 360000,
//minTickSize: 1,
//min: 0,
//max: 10
//mode: "time",
//timeformat: "%H:%M",
//minTickSize: [1, "hour"],
////color: "black",
//min: startDate.getTime(),
//max: endDate.getTime()
}
};
$.plot($("#machineStatus"), dataset, options);
I end up with a graph where the xaxis labels are not anything like they should be. See below
The design is an hourly status of a machine (red = not running, green = running, etc.) So the intent was to have the last 9 hours of runtime showing and put x axis labels for the top of the hour (1:00, 2:00, etc.).
Since this is a horizontal stack of multiple data sets, this appears to really confuse the xaxis tick calculation. I tried setting the min/max to equal the start and end times of the dataset, but I would get no graph.
I stopped using the "time" mode, hoping I could use the ticks array and force a set of ticks and labels, but that doesn't work. I tried the tickFormatter to force calculating the ticks, but that didn't work either.
You can see all the things I've tried on the xaxis and have commented out. I actually don't want the ticks to have any relationship to the actual data. I am testing this graph at the hour and minute level, so theoretically my data sets are either 9 or 540 bits of granular information. I still want the xaxis ticks to stay at a fixed set of 9 values spread evenly. Any ideas how I can do that?
FYI, I apologize for no jsfiddle. I've never been able to get one to work.
Update. Selected answer works! Here's a screenshot of a 540 datapoint to the minute level. The dataset is too big to post. Thanks again Raidri
I got it to work with time mode and a vertical bar chart:
Relevant options:
series: {
stack: true,
bars: {
lineWidth: 0,
align: "left",
barWidth: 3600000,
//horizontal: true,
fill: 1,
show: true,
}
},
...
xaxis: {
min: startDate.valueOf(),
max: endDate.valueOf(),
mode: "time",
timeformat: "%H:%M",
...
Also the values for your datapoints are changed to 1 so the bars here have a height of one.
If you change it to minute values, you have to change the barWidth option accordingly.
See this fiddle for the full example.
I have a little problem with my meteogram which I created in highchart. I have two x axises (on the top and on the bottom of my chart). I enabled scrollbar (I'm using highstock) and this scrollbar affected only on my bottom axis. When I move my scroll only bottom axis scrolls. I also want to move my top axis. How to do that? There is no 'scroll' option in reference to axis, only global:
scrollbar: {
enabled: true
}
Here you can see how it looks like:
Top categories doesn't change when we move scroll. Only bottom are changing.
Here is code resposible for x axises creation:
xAxis: [ {
categories: prepareCategories(jsonData),
min: 0,
max: 25,
tickInterval: 8,
tickWidth: 2,
plotLines: preparePlotLines(jsonData)
}, {
categories: prepareWindCategories(jsonData),
min: 0,
max: 25,
tickInterval: 2,
tickWidth: 2,
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return prepareWindLabel(this.value.wind, this.value.windDirection);
}
}
} ],
So I can display:none the labels ex. below with css, but my .ct-chart still has something on the left and bottom side of the chart ex. image below.
.ct-labels, .ct-grids {
display: none;
}
Ideally the blue chart is over to the left of the white module and down on the bottom, so that it matches with the div, it is positioned absolute, and the chart responsiveness is on. I am assuming the white space is created from the labels still existing in the DOM?
I would like to have the chart showing no white space on the left and bottom side. My .ct-chart css looks like this.
.ct-chart {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
padding: 0;
z-index: -1;
}
If you don't want to have labels at all, no grid lines and remove all offsets and padding you can do so but it requires quite a bit of configuration:
var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
http://jsbin.com/patela/1/edit?html,css,js,output
Yes, those are svg elements with x and y value offsets. See in the example here http://gionkunz.github.io/chartist-js/examples.html the elements in
< g class="ct-labels">< /g>
all have an x and y offset defined that move them away from the parent element. It would be pretty simple to override these values with d3 after the chart has loaded.
When I load the chart I like to check the chart width and the number of labels and if need be I either display the labels, only display every other label, or hide all the labels based on whether the labels fit. This code hides the labels:
setTimeout(function() {
$('.ct-chart').find('.ct-labels .ct-horizontal').remove();
}, 100);
I am using Flot to draw some bar charts. How do I configure the zoom so that when a user zooms out, the chart will look like the one at the top and not like the one at the bottom? In other words, I don't want the user to continue zooming out when all of the data for the chart is shown. I also want to restrict the chart from displaying anything below 0 on the X axis. See my code and pictures of the charts below:
<#macro barChart2 var formatFunction ticks="" optionLegend="{ show: false }">
var options = {
yaxis: {
tickFormatter: ${formatFunction}
},
series: {
stack: 0,
bars: {
show: true,
barWidth: 0.9,
align: "center"
}
},
grid : {
hoverable: true
},
xaxis: {
<#if "${ticks}" != "">
ticks: ${ticks}
</#if>
mode: "time",
timeformat: "%b %d, %H:%M %P"
},
pan : {
interactive: true
},
legend: ${optionLegend}
};
var plot${var} = $.plot($("#chart${var}"), data, options);
$("#zoomIn${var}").click(function(e) {
e.preventDefault();
plot${var}.zoom();
});
$("#zoomOut${var}").click(function(e) {
e.preventDefault();
plot${var}.zoomOut();
});
</#macro>
I suggest you take a look at the zoomRange and panRange parameters that you can set with the navigation plugin. You specify those for the axes like:
xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }
where zoomRange sets the limit for zooming. In this case, the difference between the min and max will never go below 0.1, and it will never exceed 10. panRange tells the content to stay in a certain range, so in this case, neither axis will pan below -10 or above 10.
I'm not sure how you do this with time series data, but try with javascript timestamps to begin with.
Situation
I'm trying to have some space over the last xaxis options.
For example:
xaxis. min:-max:6
Only half of the last bar is shown, and if I try to use tickOption, it doesn't appear because it is outside of the canvas.
code:
http://jsfiddle.net/chalien/zEQe7/
THANKS
Your array isn't set right for the bar chart. You don't need to tell the plot rendered it is point number 1, 2, 3, etc... It knows it by himself.
Just change the array definition to:
[[4, 6, 2, 5, 6]]
And your graph will be rendered correctly, with or without the min and max definitions.
Here is the full code:
<script type="text/javascript">
$.jqplot('chart2', [[4, 6, 2, 5, 6]],
{ title:'Exponential Line',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes: {
xaxis: {
max:6,
min:0,
renderer: $.jqplot.LinearAxisRenderer
}
}
});
</script>