I need to make this coding in a way where I can show JSON data in graph. but I don't know how to convert this coding in a way so that this graph will show JSON data. I am posting coding in here for your convenience.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "dark2",
title:{
text: "MOVEMENT CATEGORY"
},
subtitles:[
{
text: "(STANDSTILL, ON FOOT or ON VEHICLE)",
},],
axisX:{
title: "TIME SLOT"
},
axisY:{
title:"Number of users(%)",
suffix: "%"
},
toolTip:
{
shared: true
},
data: [{
type: "stackedArea100",
name: "STANDSTILL",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 83, label: "6am - 10am" },
{ y: 51, label: "10am - 4pm" },
{ y: 64, label: "4pm - 8pm" },
{ y: 71, label: "8pm - 12am" },
{ y: 45, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON FOOT",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 20 , label: "6am - 10am" },
{ y: 30, label: "10am - 4pm" },
{ y: 24, label: "4pm - 8pm" },
{ y: 38, label: "8pm - 12am" },
{ y: 51, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON VEHICLE",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 11, label: "6am - 10am" },
{ y: 61, label: "10am - 4pm" },
{ y: 50, label: "4pm - 8pm" },
{ y: 23, label: "8pm - 12am" },
{ y: 31, label: "12am - 6am" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Related
i have a code which should give me an overlapping bar chart , one inside other in canvas js , something like below
Output Needed
So it should be combination of stacked horizontal graph , and one overlapping graph inside the first ( as in pic)
but am getting everything inside one main graph
below is the code .
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
title: {
text: "Chart Title"
},
reversed:true,
data: [
{
type: "error",
whiskerThickness: 0,
color: "#004ca0",
dataPoints: [
{ label: "Alpha", y: [0 , 71] },
]
},
{
type: "column",
axisXType: "secondary",
color: "#34dc00",
dataPoints: [
{ label: "Alpha", y: 60 },
]
},
{
type: "column",
axisXType: "secondary",
color: "#3cfa00",
dataPoints: [
{ label: "Alpha", y: 50 },
]
},
]
});
chart.render();
chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10);
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
Thanks
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
title: {
text: "Chart Title"
},
reversed:true,
data: [
{type: "error", axisXType: "secondary", color: "#34dc00", dataPoints: [{ label: "Alpha", y: [ 0, 100 ] }, ]},
{type: "column", axisXType: "secondary", color: "#004ca0", dataPoints: [{ label: "Alpha", y: 71 }, ] },
{type: "column", axisXType: "secondary", color: "#ff0000", dataPoints: [{ label: "Alpha", y: 50 }, ] }
]
});
chart.render();
chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10);
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
In the code that you have shared, you are using column chart whereas in the screenshot shared it needs Stacked Bar Chart. Using Stacked Bar / Stacked Bar 100% & Error chart, you can achieve as shown in the screenshot shared. Below is the working code.
var chart = new CanvasJS.Chart("chartContainer", {
dataPointWidth: 70,
axisX: {
lineThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
axisY: {
includeZero: true,
lineThickness: 0,
gridThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
toolTip: {
shared: true
},
data: [{
type: "stackedBar100",
name: "Unique Opens: 33.3%",
showInLegend: true,
color: "#23a9e8",
dataPoints: [
{ x: 1, y: 33.3 }
]
}, {
type: "error",
name: "Unique Clicks: 33.3%",
showInLegend: true,
legendMarkerType: "square",
linkedDataSeriesIndex: 0,
stemThickness: 25,
whiskerThickness: 0,
color: "#336a84",
dataPoints: [
{ x: 1, y: [0, 33.3] }
]
}, {
type: "stackedBar100",
name: "Unique Opens: 66.7%",
showInLegend: true,
color: "#dfe3e4",
dataPoints: [
{ x: 1, y: 66.7 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 100px; width: 100%;"></div>
I have a chart but when it gets the date it just display the amount of each label without converting to percentage need help
function getPieChart(rawData) {
console.log(rawData);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
dataPoints: rawData
}]
});
chart.render();
}
getPieChart([
{ y: 444, label: "Abuja Hqrs" },
{ y: 176, label: "Kano" },
{ y: 266, label: "Alausa" },
{ y: 221, label: "Portharcourt" },
{ y: 3717, label: "Ikoyi" }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>
<div id="chartContainer"></div>
You can display percentages by removing yValueFormatString: "##0.00\"%\"" and replacing indexLabel: "{label} {y}" with indexLabel: "{label} #percent%".
function getPieChart(rawData) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
data: [{
type: "pie",
startAngle: 240,
indexLabel: "{label} #percent%",
dataPoints: rawData
}]
});
chart.render();
}
getPieChart([
{ y: 444, label: "Abuja Hqrs" },
{ y: 176, label: "Kano" },
{ y: 266, label: "Alausa" },
{ y: 221, label: "Portharcourt" },
{ y: 3717, label: "Ikoyi" }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>
<div id="chartContainer"></div>
See the indexLabel documentation for more details.
you could set format with changing properties yValueFormatString and indexLabel.
it is converted to percentage by yValueFormatString: "##0.00\"%\"". this document might be helpful for you.
For example, if you want to describe format as [$34], set yValueFormatString: "[$##]"
and the details for indexLabel at here
See following snippet:
function getPieChart(rawData) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##", // does not need
indexLabel: "{label} is {y}",
dataPoints: rawData
}]
});
chart.render();
}
getPieChart([
{ y: 444, label: "Abuja Hqrs" },
{ y: 176, label: "Kano" },
{ y: 266, label: "Alausa" },
{ y: 221, label: "Portharcourt" },
{ y: 3717, label: "Ikoyi" }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>
<div id="chartContainer"></div>
Hi I am using HTML Canvas charts. In one of the charts can I change the label of x-axis?
The source code for the chart is :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 2,
}],
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: 10, y: 51 },
{ x: 20, y: 45},
{ x: 30, y: 50 },
{ x: 40, y: 62 },
{ x: 50, y: 95 },
{ x: 60, y: 66 },
{ x: 70, y: 24 },
{ x: 80, y: 32 },
{ x: 90, y: 16}
]
},
{
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: 10, y: 201 },
{ x: 20, y: 404},
{ x: 30, y: 305 },
{ x: 40, y: 405 },
{ x: 50, y: 905 },
{ x: 60, y: 508 },
{ x: 70, y: 108 },
{ x: 80, y: 300 },
{ x: 90, y: 101}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</body>
</html>
Now here we can see that x-values is 10,20,30... My question is can we change them to other format like 10am or 10pm?
You can add a suffix (or a prefix) to the x-axis with chart.options.axisX
chart.options.axisX = { suffix: "AM" };
Or you can add both like this:
chart.options.axisX = { prefix: "/", suffix: "AM" };
I have a graph like in the picture. But I am having trouble with the labels. I can not show all of the labels. When I hover on it it shows the label, but when I print it it doesn't display.
var chart = new CanvasJS.Chart('chartContainer',
{
animationEnabled: true,
theme: 'theme4',
title: { text: '' },
axisY: { maximum: 100 , title: 'Faiz'},
axisX: { labelAngle: -70 },
exportEnabled: true,
data: [{
type: 'column',
indexLabel: '{y}',
indexLabelPlacement: 'outside',
indexLabelOrientation: 'horizontal',
indexLabel: '{y}',
dataPoints: [
{ label: 'Azərbaycan dili', y: 51 },
{ label: 'Ədəbiyyat', y: 71 },
{ label: 'Cəbr', y: 51 },
{ label: 'Həndəsə', y: 61 },
{ label: 'Fizika', y: 60 },
{ label: 'Kimya', y: 56 },
{ label: 'Biologiya', y: 49 },
{ label: 'Tarix', y: 62 },
{ label: 'Azərbaycan tarixi', y: 70 },
{ label: 'Coğrafiya', y: 58 },
{ label: 'Xarici dil', y: 57 },
{ label: 'İnformatika', y: 62 },
{ label: 'Rus dili', y: 43 },
{ label: 'Riyaziyyat', y: 53 }
]
}]
});
chart.render();
Try adding:
culture: "es",
to your object config after title: { text: '' },
Some of the labels hide in order to avoid overlapping due to insufficient width. In your case if you do this:
axisX: {
interval: 1,
labelAngle: -70
}
it should work.
var chart = new CanvasJS.Chart('chartContainer',
{
animationEnabled: true,
theme: 'theme4',
title: { text: '' },
axisY: { maximum: 100 , title: 'Faiz'},
axisX:{
interval: 1,
labelAngle: -70
},
exportEnabled: true,
data: [{
type: 'column',
indexLabel: '{y}',
indexLabelPlacement: 'outside',
indexLabelOrientation: 'horizontal',
indexLabel: '{y}',
dataPoints: [
{ label: 'Azərbaycan dili', y: 51 },
{ label: 'Ədəbiyyat', y: 71 },
{ label: 'Cəbr', y: 51 },
{ label: 'Həndəsə', y: 61 },
{ label: 'Fizika', y: 60 },
{ label: 'Kimya', y: 56 },
{ label: 'Biologiya', y: 49 },
{ label: 'Tarix', y: 62 },
{ label: 'Azərbaycan tarixi', y: 70 },
{ label: 'Coğrafiya', y: 58 },
{ label: 'Xarici dil', y: 57 },
{ label: 'İnformatika', y: 62 },
{ label: 'Rus dili', y: 43 },
{ label: 'Riyaziyyat', y: 53 }
]
}]
});
chart.render();
.description {
margin-top: 50px;
text-align:left;
font-family: calibri;
font-size: 16px;
color: gray;
}
a:link, a:visited, a:active {
color: #4F81BC;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>
This should definitely work. I got the similar issue I could resolve it by adding this :
axisX: {
interval: 1,
labelAngle: -70
}
I'm fairly new to using canvasjs plugin for charts. There was a requirement wherein I had to resize the chartcontainer to a particular width. On changing the width from 100% to 300px I got the following error on IE as well as on chrome: recursionCount is undefined . The following is the code snippet of the same that i'm using:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Common Names"
},
exportFileName: "Pie Chart",
exportEnabled: true,
animationEnabled: true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
type: "pie",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [
{ y: 732, legendText: "James", exploded: true, label: "James" },
{ y: 4, legendText: "West", label: "West" },
{ y: 3, legendText: "John", label: "John" },
{ y: 247, legendText: "Peter", label: "Peter"},
{ y: 2716, legendText: "Mark", label: "MArk" },
{ y: 2, legendText: "Luke", label: "Luke"}
]
}
]
});
chart.render();
var chart1 = new CanvasJS.Chart("chartContainer1",
{
title:{
text: "Top Categoires of New Year's Resolution"
},
exportFileName: "Bar Graph",
exportEnabled: true,
animationEnabled: true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
type: "bar",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [
{ y: 35, legendText: "Health", exploded: true, label: "Health" },
{ y: 20, legendText: "Finance", label: "Finance" },
{ y: 18, legendText: "Career", label: "Career" },
{ y: 15, legendText: "Education", label: "Education"},
{ y: 5, legendText: "Family", label: "Family" },
{ y: 7, legendText: "Real Estate", label: "Real Estate"}
]
}
]
});
chart1.render();
var chart2 = new CanvasJS.Chart("chartContainer2",
{
theme: "theme2",
title:{
text: "Earthquakes - per month"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]}]
});
chart2.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 300px;"></div>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
</body>
</html>
I don't understand how changing the width of element id: chartContainer from 100% to 300px can cause such an error...
Thanks in advance.
I managed to solve that error by creating a variable with the same name in the html page inside the script tag.
I've added the following line just before every initialization of CanvasJS.Chart element:
recursionCount = 0;
eg:
window.onload = function () {
recursionCount = 0;
//code for chartContianer
recursionCount = 0;
//code for chartContianer 1
recursionCount = 0;
//code for chartContianer 2
};
Regards,
Darrel Viegas.