I am trying to make a very simple chart with negative values and centered labels,
I have tried everything and this stupid thing won't work, I found some examples, dint work either, if anyone here build a chart like this and could share the code, or help me with , i will relay REALLY appreciate it. please,
I am using canvasJS.
I need something like this:
*sorry for bad English please help thank you.
this is my basic chart, (if needed):
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
axisY:{
gridThickness: 0,
},
axisX:{
title: "",
tickLength: 0,
margin:0,
lineThickness:0,
valueFormatString:" ",
},
data: [
{
type: "bar",
dataPoints: [
{ y: -3.5 },
{ y: -3.89 },
{ y: 4.5 },
{ y: 5 },
{ y: 4 },
]
}
]
});
chart.render();
}
Related
I'm trying to render a scatter plot in chart.js of (x,y) data where x is a date string. I've seen many examples and tutorials online where the instructor uses a function to generate the time stamp for an example chart, but I haven't found any examples that use real data like one might collect.
I have data that looks like this (collected from cron):
2017-07-08T06:15:02-0600,23.375
2017-07-08T06:20:02-0600,23.312
2017-07-08T06:25:02-0600,23.312
2017-07-08T06:30:02-0600,23.25
I tried a data like this in chart.js (both with and without "quotes" around the data string):
data: [{
x: 2017-07-08T06:15:02-0600,
y: 23.375
},{
x: 2017-07-08T06:20:02-0600,
y: 23.312
},{
x: 2017-07-08T06:25:02-0600,
y: 23.312
},{
x: 2017-07-08T06:30:02-0600,
y: 23.25
}],
Nothing renders. What am I doing wrong?
According to the documentation of scatter charts:
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
So you can't use values like 2017-07-08T06:15:02-0600. You can convert dates into numbers and use them in your data.
In your case:
data: [{
x: 1499516102000,
y: 23.375
}, {
x: 1499516402000,
y: 23.312
}, {
x: 1499516702000,
y: 23.312
}, {
x: 1499517002000,
y: 23.25
}
]
Now your xAxes will be with numbers, so you can use a callback to modify xAxes labels.
That advice isn't quite right. The javascript moment.js makes it possible to plat scatter data using dates as the x axis value. For some reason the bundled version in Chart.bundle.js wasn't working for me, so I downloaded moment.js directly. I'm using this to setup:
<script src="js/moment.js"></script>
<script src="js/Chart.min.js"></script>
and this for my chart.js data details:
data: [
{x: moment("2017-07-08T06:15:02-0600"), y: 23.375},
{x: moment("2017-07-08T06:20:02-0600"),y: 23.312},
{x: moment("2017-07-08T06:25:02-0600"),y: 23.312},
{x: moment("2017-07-08T06:30:02-0600"),y: 23.25}
],
It's working great!
Another solution that worked great for me, was to just use the line type for the chart, configure it for using dates for the x axis, and addtionally disable the lines, so that it just looks like a scatterplot.
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
x: 2017-07-08T06:15:02-0600,
y: 23.375
},{
x: 2017-07-08T06:20:02-0600,
y: 23.312
},{
x: 2017-07-08T06:25:02-0600,
y: 23.312
},{
x: 2017-07-08T06:30:02-0600,
y: 23.25
}]
},
options: {
showLine: false,
scales: {
x:{
type: 'time',
display: true,
title: {
display: true,
text: 'Date'
},
},
}
}
}
);
I see this as a quite elegant solution. The documentation even specifies:
The scatter chart supports all of the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.
I couldn't find a working example from these answers, so here's mine.
new Chart(document.getElementById("chart"), {
type: "line",
data: {
datasets: [
{
showLine: false,
fill: false,
data: [
{
x: new Date(Date.now()),
y: 100,
},
{
x: new Date(Date.now() + 1000 * 60 * 60),
y: 200,
},
{
x: new Date(Date.now() + 2000 * 60 * 60),
y: 300,
},
{
x: new Date(Date.now() + 3000 * 60 * 60),
y: 400,
},
],
},
],
},
options: {
plugins: {
legend: {
display: false,
},
title: {
text: "Chart.js Time Scale",
display: true,
},
},
scales: {
x: {
type: "time",
time: {
unit: "hour",
// Luxon format string
// tooltipFormat: "DD T",
},
title: {
display: true,
text: "Hour",
},
},
y: {
title: {
display: true,
text: "value",
},
},
},
},
});
I pulled it from here: https://www.chartjs.org/docs/latest/samples/scales/time-line.html
You'll need to install momentjs and its adapter:
npm install moment chartjs-adapter-moment --save
..and then import all libraries like
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
Is this possible to do?
I have a lite graph that is tracking check in times for patients. This time might be coming back as 01:10:45 or 00:45:00 or something similar. And I'm trying to plot this on a graph so the receptionist can see how much time it takes for something to check into the clinic.
Initially I was just plotting this in minutes, but was just told that was not going to cut it. I couldn't find any documentation on this and I've tried everything I can think of.
This is kind of what my code looks like
waitAverage = []
for(looping through all my data here){
waitAverage.push(moment(data[i].AverageWaitTime, "hh:mm:ss").format('HH.mm.ss')); //I have also tried formatting it like HH:mm:ss. I thought maybe decimals would help
waitAverage.unshift(label)
}
arrayHolder.push(waitAverage);
c3.generate({
bindto: '.timeline',
data: {
columns: arrayHolder,
axes: {
data1: 'x'
}
},
axis: {
y: {
label: { // ADD
text: text,
position: 'outer-middle'
}
},
x: {
type: 'category',
categories: hour //This does exist I just didn't include the variable here
}
}
});
Any help would appreciated!
For anyone who needs an answer for this I was able to figure it out!
In the axis you have to call the tick format function and do some weird rounding.
axis: {
y: {
label: { // ADD
text: text,
position: 'outer-middle'
},
tick: {
format: function (d) {
return app.moment(Math.round(d*100)/100, "hh.mm").format('H:mm');
}
}
},
x: {
type: 'category',
categories: hour
}
}
I have a simple c3js line chart w/3 different lines. When I "unselect" all 3 data sources, the x-axis tick values disappear. I was wondering if there was anyway to reverse this behavior? I'd like to show the x-axis tick values even when there is no data present.
The xaxis tick values are of a 'timeseries' type. Thanks!
Here is my c3 config for the line chart:
bindto: '#test',
data: {
x: 'date',
xFormat: '%m%d',
columns: [],
},
legend: {
position: 'bottom',
},
axis: {
y: {
tick: {
format: function (d) { return d + '%'; },
count: 5,
},
max: 100,
padding: {
top: 0,
bottom: 0,
},
},
x: {
type: 'timeseries',
tick: {
culling: false,
},
},
},
color: {
pattern: [testRateColor, firstRateColor, secRateColor],
},
Unfortunately this functionality is baked into c3.js and the only way to change this (aside from working purely from d3) is monkey patching. You will find the offender on line 6814 of c3.js:
tickExit = tick.exit().remove(),
If you change this to:
tickExit = function() {},
The ticks are no longer removed.
Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:
How do you add the labels at the top of the bars?
I've tried to set the labels property from the Kendo Documentation:
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
Here is my script that isn't working:
$barChart = $("#bar-chart").empty();
$barChart.kendoChart({
theme: global.app.chartsTheme,
renderAs: "svg",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
target: {
color: "#444",
dashType: "dot",
line: {
width: 1,
}
},
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
data: [
{
score: 93.7,
average: 65.2,
}, {
score: 80.2,
average: 22.2,
}, {
score: 60.8,
average: 35.2,
}, {
score: 82.1,
average: 45.2,
}, {
score: 74.2,
average: 55.2,
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
Any help would be greatly appreciated.
Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.
What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/#jbristowe/aDIf/7
To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).
You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If you make a very narrow band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual
I have a simple graph made from an array that looks like this:
var plot2 = [[1,1.3,"1.3"],[2,0.3,"0.3"],[3,3.3,"3.3"],[4,1.7,"1.7"]];
and then it's added to a div like this.
var plot1 = $.jqplot ('graph', [plot2],{
grid:{
background:"transparent",
borderColor:"#6c9922",
gridLineColor:"#6c9922",
shadow:false
},
axes: {
xaxis: {
tickOptions:{formatString:'%.0f'},
pad: 0,
min:0,
max:5
},
yaxis: {
tickOptions:{formatString:'%.1f'},
pad: 0,
min:0,
max:5
},
},
series:[{
lineWidth:2,
markerOptions: {size:2,style:"circle"}
}],
seriesDefaults:{
showMarker:true,
pointLabels:{ show:true }
},
seriesColors:["#ffffff"]
});
My problem is that some users of my website is reporting that they can't see the graph, both using latest Chrome and Firefox, and that they get and error saying
Uncaught Canvas dimension not set jquery.jqplot.min.js:57
Some of them say that the graph only works if they have zoom-level set to 100%.
None of this makes much sense to since and everything works perfect on every system I've tried.
So does anybody have any idea what can be wrong?
I've searched for the error but the only place I can find it is in the source code of the jqplot plugin.
I made the following changes to the attributes array, which seemed to work. It must have had something to do with the min and/or max values on the axes, though I don't know for sure, since I never got any error.
var plot1 = $.jqplot ('graph', [plot2],{
grid:{
background:"transparent",
borderColor:"#6c9922",
gridLineColor:"#6c9922",
shadow:false
},
axes: {
xaxis: {
tickOptions:{formatString:'%.0f'},
pad: 0
},
yaxis: {
tickOptions:{formatString:'%.1f'},
pad: 0
},
},
series:[{
lineWidth:2,
markerOptions: {size:2,style:"circle"}
}],
seriesDefaults:{
showMarker:true,
pointLabels:{ show:true }
},
seriesColors:["#ffffff"]
});