i have a values in date time format. I want to show the time on x-axis instead of date.
{"dateTime":"2016-03-16
07:09:41","value":"41.0"},{"dateTime":"2016-03-16
07:09:43","value":"43.0"},{"dateTime":"2016-03-16
07:09:45","value":"45.0"},{"dateTime":"2016-03-16
07:09:47","value":"47.0"},{"dateTime":"2016-03-16
07:09:49","value":"49.0"},{"dateTime":"2016-03-16
07:09:51","value":"51.0"},{"dateTime":"2016-03-16
07:09:53","value":"53.0"},{"dateTime":"2016-03-16
07:09:55","value":"55.0"},{"dateTime":"2016-03-16
07:09:57","value":"57.0"},{"dateTime":"2016-03-16
07:09:59","value":"59.0"},{"dateTime":"2016-03-16
07:10:01","value":"1.0"},{"dateTime":"2016-03-16
07:10:03","value":"3.0"},{"dateTime":"2016-03-16
07:10:05","value":"5.0"},{"dateTime":"2016-03-16
07:10:07","value":"7.0"},{"dateTime":"2016-03-16
07:10:09","value":"9.0"},{"dateTime":"2016-03-16
07:10:11","value":"11.0"},{"dateTime":"2016-03-16
07:10:13","value":"13.0"},{"dateTime":"2016-03-16
07:10:15","value":"15.0"},{"dateTime":"2016-03-16
07:10:17","value":"17.0"},{"dateTime":"2016-03-16
07:10:19","value":"19.0"},{"dateTime":"2016-03-16
07:10:21","value":"21.0"},{"dateTime":"2016-03-16
07:10:23","value":"23.0"},{"dateTime":"2016-03-16
07:10:25","value":"25.0"},{"dateTime":"2016-03-16
07:10:27","value":"27.0"},{"dateTime":"2016-03-16
07:10:29","value":"29.0"},{"dateTime":"2016-03-16
07:10:31","value":"31.0"},{"dateTime":"2016-03-16
07:10:33","value":"33.0"},{"dateTime":"2016-03-16
07:10:35","value":"35.0"},{"dateTime":"2016-03-16
07:10:37","value":"37.0"},{"dateTime":"2016-03-16
07:10:39","value":"39.0"},{"dateTime":"2016-03-16
07:10:41","value":"41.0"},{"dateTime":"2016-03-16
07:10:43","value":"43.0"},{"dateTime":"2016-03-16
07:10:45","value":"45.0"},{"dateTime":"2016-03-16
07:10:47","value":"47.0"},{"dateTime":"2016-03-16
07:10:49","value":"49.0"},{"dateTime":"2016-03-16
07:10:51","value":"51.0"},{"dateTime":"2016-03-16
07:10:53","value":"53.0"},{"dateTime":"2016-03-16
07:10:55","value":"55.0"},{"dateTime":"2016-03-16
07:10:57","value":"57.0"},{"dateTime":"2016-03-16
07:10:59","value":"59.0"},{"dateTime":"2016-03-16
07:11:01","value":"1.0"},{"dateTime":"2016-03-16
07:11:03","value":"3.0"},{"dateTime":"2016-03-16
07:11:05","value":"5.0"},{"dateTime":"2016-03-16
07:11:07","value":"7.0"},{"dateTime":"2016-03-16
07:11:09","value":"9.0"},{"dateTime":"2016-03-16
07:11:11","value":"11.0"},{"dateTime":"2016-03-16
07:11:13","value":"13.0"},{"dateTime":"2016-03-16
07:11:15","value":"15.0"},{"dateTime":"2016-03-16
07:11:17","value":"17.0"},{"dateTime":"2016-03-16
07:11:19","value":"19.0"},{"dateTime":"2016-03-16
07:11:21","value":"21.0"},{"dateTime":"2016-03-16
07:11:23","value":"23.0"},{"dateTime":"2016-03-16
07:11:25","value":"25.0"},{"dateTime":"2016-03-16
07:11:27","value":"27.0"},{"dateTime":"2016-03-16
07:11:29","value":"29.0"},{"dateTime":"2016-03-16
07:11:31","value":"31.0"},{"dateTime":"2016-03-16
07:11:33","value":"33.0"},{"dateTime":"2016-03-16
07:11:35","value":"35.0"},{"dateTime":"2016-03-16
07:11:37","value":"37.0"},{"dateTime":"2016-03-16
07:11:39","value":"39.0"}
Currently i am using canvas js chart.
<script src="/public/javascript/canvasjs.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Date Time Formatting"
},
axisX:{
valueFormatString: "hh:mm:ss" ,
labelAngle: -50
},
axisY: {
valueFormatString: "#,###"
},
data: [
{
type: "area",
color: "rgba(0,75,141,0.7)",
dataPoints: [
{ x: new Date(07,11,35), y: 0},
{ x: new Date(07,11,29), y: 20 },
{ x: new Date(07,10,53), y: 30 },
{ x: new Date(07,10,31), y: 10}
]
}
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
its shows only 12.00:00. Please help how can i show the time on x-axis
Related
create updateBarChart(selectedDimension) function then
how to Create a bar chart that displays one of the numerical dimensions associated with each World Cup:
Average Attendance
Number of Goals
Number of Games
Number of Participants
Implement the bar chart such that it displays the dimension specified in the selectedDimension parameter.
then the bar-chart updates the data it shows depending on the selection of the drop-down box.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<header>
<h1>Exploring FIFA World Cup Statistics</h1>
</header>
<div id="bar-chart" class="view">
<h2 class="">Bar Chart</h2>
<div id="plot-selector">
<label>Plot:</label>
<select id="dataset" onchange="chooseData()">
<option selected value="attendance">Attendance</option>
<option value="teams">Teams</option>
<option value="matches">Matches</option>
<option value="goals">Goals</option>
</select>
</div>
</div>
<div id="container" style="width:100%;max-width:900px;"></div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("container", {
animationEnabled: true,
theme: "light1",
title: {
text: ""
},
axisY: {
title: "Attendance"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "Years",
dataPoints: [
{ y: 32808, label: "1930" },
{ y: 21352, label: "1934" },
{ y: 20872, label: "1938" },
{ y: 47511, label: "1950" },
{ y: 29561, label: "1954" },
{ y: 23423, label: "1958" },
{ y: 27911, label: "1962" },
{ y: 48847, label: "1966" },
{ y: 50124, label: "1970" },
{ y: 49098, label: "1974" },
{ y: 40678, label: "1978" },
{ y: 40571, label: "1982" },
{ y: 46039, label: "1986" },
{ y: 48388, label: "1990" },
{ y: 68991, label: "1994" },
{ y: 43517, label: "1998" },
{ y: 42268, label: "2002" },
{ y: 52491, label: "2006" },
{ y: 49669, label: "2010" },
{ y: 52918, label: "2014" }
]
}]
});
chart.render();
}
</script>
</body>
Make your chooseData() function do something like this:
if select value is attendance
var chart = new CanvasJS.Chart("container", {options_and_data_for_attendance});
else if select value is teams
var chart = new CanvasJS.Chart("container", {options_and_data_for_teams});
else if select value is matches
var chart = new CanvasJS.Chart("container", {options_and_data_for_matches});
else // select value is goals
var chart = new CanvasJS.Chart("container", {options_and_data_for_goals});
chart.render();
One of the ways, as described above is to change your ChooseData() function to switch between the charts, with the respective dropdowns.
Another way could be to add all the datasets into different Js arrays, and with different dropdowns, push the appropriate array into the datapoints object, hence effectively switching between the arrays, keeping one single chart.
I'm using CanvasJS to create a stacked bar chart by week. Our weeks start on Saturday, but CanvasJS seems to default to weeks starting on Sunday. Thus, the labels for this chart start on 11/3 rather than 11/2 as I need.
I found this post on the CanvasJS forum which suggests that setting minimum and maximum might help, but when I tried that, it merely shifted the plot area (as you'd expect), but the labels still reflect Sundays, not Saturdays
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Evening Sales of a Restaurant"
},
axisX: {
intervalType: "week",
interval: 1
},
data: [
{
type: "stackedBar",
dataPoints: [
{ x: new Date("11/2/2019"), y: 71 },
{ x: new Date("11/9/2019"), y: 55},
{ x: new Date("11/16/2019"), y: 50 },
{ x: new Date("11/23/2019"), y: 65 },
{ x: new Date("11/30/2019"), y: 95 }
]
},
{
type: "stackedBar",
dataPoints: [
{ x: new Date("11/2/2019"), y: 20 },
{ x: new Date("11/9/2019"), y: 35},
{ x: new Date("11/16/2019"), y: 30 },
{ x: new Date("11/23/2019"), y: 45 },
{ x: new Date("11/30/2019"), y: 25 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
From CanvasJS:
It’s not possible to control the starting point of label, as of now.
We will reconsider this behaviour in future releases.
https://canvasjs.com/forums/topic/how-to-label-axisx-by-week-starting-on-saturday/
I am using a CanvasJs chart. The chart is working fine. The Chart is taking time to load. I wanted to show a loading image until the chart loads. CanvasJs charts have no defined attributes for this. Any help is appreciated.
Html:
JS:
chart = CanvasJS.Chart("chartContainer1", {});
You can add loader-image(gif) or some text within the chart-container div so that image/text is shown in the div till the chart is initialized.
setTimeout(function(){
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Basic Column Chart"
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});
chart.render();
},2000);
img{
display: block;
margin: auto;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;">
<img src="https://i.imgur.com/fXUIBfi.gif" alt="Chart will Render Here..."/>
</div>
I am trying to generate a range bar chart using CanvasJS library.
I have seen several demos of a range bar chart but none using a date range - not sure if this is an issue or if this is even possible.
Just to make it even harder I am creating this dynamically - I need to retrieve the date values from html span elements.
Here is my code below:
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Task Timeline"
},
axisY: {
includeZero: false,
interval: 2,
valueFormatString: "DD-MMM-YYYY",
minimum: $(".StartDateCase").text(),
maximum: $(".EndDateCase").text()
},
axisX: {
interval: 1,
minimum: 0
},
data: [{
type: "rangeBar",
yValueFormatString: "DD-MM-YYYY",
dataPoints: [{
x: "1",
y: [new Date($(".StartDate1").text()), new Date($(".DueDate1").text())]
}, {
x: "2",
y: [new Date($(".StartDate2").text()), new Date($(".DueDate2").text())]
}, {
x: "3",
y: [new Date($(".StartDate3").text()), new Date($(".DueDate3").text())]
}, ]
}]
});
chart.render();
}
span {
display: none;
}
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<span class="StartDate1">2015,01,19</span>
<span class="DueDate1">2015,01,20</span>
<span class="StartDate2">2015,01,21</span>
<span class="DueDate2">2015,01,23</span>
<span class="StartDate3">2015,01,26</span>
<span class="DueDate3">2015,01,26</span>
<span class="StartDateCase">2015,01,07</span>
<span class="EndDateCase">2015,02,28</span>
Can anyone help me out?
I would like to print canvas.js chart using javascript.
The printing code.
when I click print button, the printing popup from browser will show up with printing preview nothing.
How can i resolve this problem??
var html = "<html>";
html += document.getElementById("chartContainerInPT").innerHTML;
html += "</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
html code
<div id="chart_divInPT" class="chart">
<div id="chartContainerInPT" style="height: 300px; width: 100%;"></div>
</div>
<button class="btn save" type="button" style="float: right;" id="printInPT">Print</button>
js
var chart = new CanvasJS.Chart(
"chartContainerInPT",
{
theme : "theme1",
title : {
text : ""
},
data : [ {
type : "column",
dataPoints : [
{
label : "Attempted",
y : chapterWiseResult['noOfAttempt']
},
{
label : "Correct",
y : chapterWiseResult['noOfCorrect']
},
{
label : "Wrong",
y : wrong
},
{
label : "Unattempted",
y : unattempted
},
]
} ]
});
How can I print chart in browser?
As solution you can save your canvas as image
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
Updated 2021
Canvas.js chart now added the print(in pdf,png,jpg)formats feature.
enable the export option as below
title: {
text: "Alarm Statistics",
},
**exportEnabled: true**,// enable print option for the chart
data: [{...},{...}]
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Chart with export feature enabled",
},
exportEnabled: true,
axisX:{
minimum: -900,
interval: 100,
},
data: [
{
type: "area",
fillOpacity: .4,
lineThickness: 3,
dataPoints: [
{ x: -100, y: 71 },
{ x: -200, y: 55 },
{ x: -300, y: 50 },
{ x: -400, y: 65 },
{ x: -500, y: 105, markerType: "circle", markerSize: 9, markerColor: "brown", indexLabel: "Highest" },
{ x: -600, y: 68 },
{ x: -700, y: 28 },
{ x: -800, y: 34 },
{ x: -900, y: 14}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>