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>
Related
I want two stacked column data in one chart using canvasjs like this:
I have currently done something like this with the options:
this achieves removing x axis and secondary y axis and showing two data together
{
animationEnabled: true,
options:{
scales: {
xAxes: [{ stacked:true}]
}
},
axisY: {
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC",
margin:24,
},
axisY2: {
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
margin:24,
labelFormatter: function(){
return " ";
}
},
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
margin:24,
labelFormatter: function(){
return " ";
}
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
},
data: [{
type: "stackedColumn",
name: "Proven Oil Reserves (bn)",
legendText: "Proven Oil Reserves",
showInLegend: false,
dataPoints:[
{ y: 30.25 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
showInLegend: false,
dataPoints:[
{ y: 17.46 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType:"secondary",
margin:10,
showInLegend: false,
dataPoints:[
{ y: 10.46 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType:"secondary",
margin:10,
showInLegend: false,
dataPoints:[
{ y: 10.46 },
]
}
]
}
it produces the result like:
what I need is to
give margin between two datasets
able to label datasets with text over them as seen in the image above
give margin between two datasets
There will be gap between datapoints when the x-values are different.
able to label datasets with text over them as seen in the image above
You can use indexlabels. Please refer CanvasJS Docs for more info / examples. Below is an working example.
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(){
return "";
}
},
axisY: {
includeZero: true,
tickLength: 0,
lineThickness: 0,
gridColor: "#ddd",
labelFormatter: function(e) {
return "";
}
},
toolTip: {
shared: true
},
data: [{
type: "stackedColumn",
indexLabel: "RM xyz",
indexLabelFontColor: "#fff",
dataPoints: [
{ x: 1, y: 47, color: "#c63531" },
{ x: 2, y: 32, color: "#449fc7" }
]
}, {
type: "stackedColumn",
indexLabel: "RM xyz",
indexLabelFontColor: "#fff",
dataPoints:[
{ x: 1, y: 32, color: "#bb8786" },
{ x: 2, y: 27, color: "#74ab3e" }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; 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>
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>
I am working with highCharts drilldown. My graph is plotting proper before drilldown. The column and spline is properly getting plot according to X-axis and Y-axis in graph but after drilldown the graph spline is not draw according to Y-axis. I want to plot spline as like before drilldown.
Here is my html
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Here is my js code.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'xy',
events: {
drilldown: function (e){
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'2015':{
name: '2015',
data: [
['Q4-2015',89]
]
},
'2016':{
name: '2016',
data: [
['Q2-2016',95],
['Q3-2016',99]
]
}
},
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
]
},
'2016':{
type: 'spline',
name: '2016',
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
series = drilldowns[e.point.name],
seriesLine = drilldownsLines[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Rental & Capital Value Trend'
},
xAxis: {
type: 'category',
},
yAxis: [{
min: 0,
title: {
text: 'Rental Value (INR/SF/Month)'
},
labels: {
format: '{value}'
}
}, {
min:0,
tickInterval:5,
title: {
text: 'Capital Value (INR/SF)'
},
labels: {
format: '{value} K'
},
opposite:true
}],
tooltip:{
formatter:function(){
var s='';
$.each(this.points, function () {
if(this.series.type == 'spline'){
s += '<br/>Capital Value : ' + this.y+ 'K';
}else{
s += '<br/> Rental Value : ' + this.y;
}
});
return s;
},
shared:true
},
legend: {
layout: 'horizontal',
align: 'left',
size: '12px',
x: 50,
verticalAlign: 'bottom',
y: 20,
floating: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Renatl Value (INR/SFT/Month)',
color: '#EE8908',
data: [
{
name: '2015',
y: 89,
drilldown: true
}, {
name: '2016',
y: 90,
drilldown: true
}
]
},{
name:'Capital Value (INR/SF)',
color:'#F8BB6C',
type:'spline',
yAxis:1,
data:[
{
name:'2015',
y:11.45
},{
name:'2016',
y:15.22
}
],
tooltip: {
valueSuffix: 'K'
}
}
],
drilldown: {
/*activeAxisLabelStyle: {
textDecoration: 'none'
},*/
series: []
}
});
});
On drilldown events you are creating new spline series and you don't specify y axis for them - by default they will be scaled with the use of the first y axis.
Specify a correct yAxis (should be 1 in your example) for the series and the spline will be drawn as you expect.
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
],
yAxis: 1
},
'2016':{
type: 'spline',
name: '2016',
yAxis: 1,
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
example: https://jsfiddle.net/2pd1natw/
I have many Json values, using them I am going to create a line chart but it shows only one value in the chart. I am a newbie to javascript and have an idea to plot all values in chart. please anybody give jsfiddle example for this issue.
HTML code
<div id="chartContainer" class="chart">
Script
$.getJSON('dashboard_summary.php?', function(data) {
var len = data.length
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
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();
};
Json data
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}
Based on your code, I can see why the chart shows only one point, which is the last data point of those points expected to be shown on the chart. Here is the problem:
var len = data.length;
/* Loop through each item in the data */
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});
So you end up drawing many charts with the last chart which has the last data point to replace all the previous charts.
Instead, you should adjust the foreach block as follow and draw the chart once you've converted the data into an array of points.
$.getJSON('dashboard_summary.php?', function(data) {
var Tips = [];
var Revs = [];
$.each(data, function(i, v) {
Tips.push({ x: new Date(v.Date), y: parseInt(v.Tip) });
Revs.push({ x: new Date(v.Date), y: parseInt(v.Revenue) });
});
chart(Tips, Revs);
});
Also, you can format the x-axis to make the chart look prettier (The format of the x-axis here is designed for the data given above. In your application, you may have to use another format style depending on the actual data):
function chart (Tips, Revs) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM",
interval:14,
intervalType: "day"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: Tips
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: Revs
}
],
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();
}
A jsFiddle is made here for your review.
Updated codes. it Works >> Pastebin
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src = "http://canvasjs.com/wp-content/themes/bootstrap_child/assets/js/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" class="chart">
<script type="text/javascript">
data=[
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}];
var len = data.length;
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
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>
jsFiddle
Update Code:
dataRevenue=
[
{ x: new Date(2014, 00,30), y: 0 },
{ x: new Date(2014, 01,31), y: 7},
{ x: new Date(2014, 02,28), y: 47}
];
dataTip =[
{ x: new Date(2014, 00,30), y: 0 },
{ x: new Date(2014, 01,31), y: 3},
{ x: new Date(2014, 02,28), y: 8}
];
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "line chart"
},
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: dataTip
},
{
type: "line",
//lineThickness: 3,
dataPoints: dataRevenue
}
]
});
chart.render();