<script type="text/javascript">
window.onload = function () {
debugger;
$.ajax({
type: "POST",
url: "RMDashboard.aspx/get_dept_pend_fin_wo",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
function OnSuccess(response) {
//alert(response.d)
var chart = new CanvasJS.Chart("ccpevman", {
title: {
text: ""
},
axisX: {
interval: 3,
intervalType: "month",
},
data: [{
type: "spline",
dataPoints: [ jQuery.parseJSON(response.d) ]
}]
});
chart.render();
}
}
</script>
The web method from the cs page returns the string in the format as
{ label: "08/2015", y: 25, markerColor: "Green" },{ label: "09/2015", y: 87, markerColor: "Green" },{ label: "10/2015", y: 158, markerColor: "Green" },{ label: "11/2015", y: 180, markerColor: "Green" },{ label: "12/2015", y: 336, markerColor: "Green" },{ label: "01/2016", y: 57, markerColor: "Green" },{ label: "02/2016", y: 187, markerColor: "Green" },{ label: "03/2016", y: 341, markerColor: "Green" },{ label: "07/2015", y: 1, markerColor: "Red" },{ label: "09/2015", y: 3, markerColor: "Red" },{ label: "10/2015", y: 2, markerColor: "Red" },{ label: "11/2015", y: 1, markerColor: "Red" },{ label: "12/2015", y: 3, markerColor: "Red" },{ label: "02/2016", y: 25, markerColor: "Red" },{ label: "03/2016", y: 33, markerColor: "Red" }
I have converted this to json and applying to datapoints is there any alternative way to achive this.
Convert the string to the following format::
var objectstring =response.d;
var objectStringArray = (new Function("return [" + objectstring+ "];")());
Then assigned the objectStringArray to datapoints
dataPoints: objectStringArray
It is working perfectly form me now...Thanks All
Related
Needed output:
I need to configure a grouped bar chart in which the type of each bar is shown in the axis itself.
I am using chartjs 2.9. How can I add the text "Availability","Co-funded","CPC" in the axis itself. I can't find any configuration which support this implementation in Chart js . Is there any other JS library where this is possible
this.barChart = new .Chart(ctx, {
type: "bar",
data: {
labels: this.barChartData["chart-data"].map((obj) => obj.y),
datasets:
this.barChartData["chart-mapping"].map((obj) => {
return {
label: obj.label,
data: this.barChartData["chart-data"],
backgroundColor: obj.color,
parsing: {
xAxisKey: obj.key,
},
};
}),
},
options: {
datasets: {
barThickness: 20,
},
indexAxis: "y",
plugins: {
legend: { position: "right", align: "start", title: "Type" },
},
},
});
barChartData = {
"chart-mapping": [
{
key: "avi",
label: "Availability..",
color: "rgba(50, 144, 237, 1)",
},
{
key: "cfd",
label: "Co-funded..",
color: "rgba(119, 181, 242, 1)",
},
{
key: "CPC",
label: "CPC",
color: "rgba(157, 83, 242, 1)",
},
{
key: "od",
label: "Order Drop..",
color: "rgba(195, 152, 245, 1)",
},
],
"chart-data": [
{
y: "Name1",
avi: 32,
cfd: 32,
CPC: 57,
od: 12,
},
{
y: "AK",
avi: 15,
cfd: 23,
CPC: 42,
od: 45,
},
{
y: "Name3",
avi: 67,
cfd: 34,
CPC: 21,
od: 43,
},
],
};
Current implementation:
I want to get specific hidden data like custId2345 when a bar is clicked, and then run a function.
How should I assign this data to its bar without showing on chart?
You can define your data in object format and then you can just add a custom property that you read in the onClick method like so:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 12,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Blue",
y: 19,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 5,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Purple",
y: 2,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 3,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [{
x: "Red",
y: 7,
secretVal: "Not rick roll"
},
{
x: "Blue",
y: 11,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 5,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 8,
secretVal: "Not rick roll"
},
{
x: "Purple",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 7,
secretVal: "Not rick roll"
}
],
backgroundColor: 'orange'
}
]
},
options: {
onClick: (e, activeEls, chart) => {
if (activeEls.length === 0) {
return;
}
const cEl = activeEls[0];
console.log(chart.data.datasets[cEl.datasetIndex].data[cEl.index].secretVal)
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
I see this example in Apache ECharts
https://echarts.apache.org/examples/en/editor.html?c=line-stack
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
Now that ECharts v5.x has support to specify encode , is it possible to create the above chart using encode instead of specifying data array for each series?
What i am looking for is something on these lines
option = {
title: {
text: 'Some Title'
},
tooltip: {
trigger: 'axis'
},
dataset:{
source:[
['XAxis_Column_Name','Series_Column_Name','YAxis_Column_Name'],
['x1','s1',10],
['x2','s2',20],
['x3','s1',40],
['x4','s1',70],
['x5','s2',90],
['x5','s1',100],
['x6','s3',120],
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
encode:{
x: "XAxis_Column_Name"
}
},
yAxis: {
type: 'value',
encode:{
y: "YAxis_Column_Name"
}
},
series: [
{type: 'line'},
{type: 'line'},
{type: 'line'}
]
};
The end result should be a line chart with 3 lines (one each for s1, s2 and s3). Any help here is much appreciated. I don't want to deal with data extraction and segregating them into arrays for each series
I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks
Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>
In Canvas JS i used chart from theme 2, i want to show the x axis as date string, not int.
Something like this:
var chart = new CanvasJS.Chart(i.toString(),
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 1000,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 1000,
},
{
lineColor: "#339933",
tickColor: "#339933",
labelFontColor: "#339933",
titleFontColor: "#339933",
lineThickness: 1000,
},
{
lineColor: "#6600cc",
tickColor: "#6600cc",
labelFontColor: "#6600cc",
titleFontColor: "#6600cc",
lineThickness: 1000,
},
{
lineColor: "#663300",
tickColor: "#663300",
labelFontColor: "#663300",
titleFontColor: "#663300",
lineThickness: 1000,
}
],
data: [
{
name: "1",
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: '2016-03-04', y: 51 },
{ x: '2016-03-05', y: 45}
]
},
{
name: "2",
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: '2016-03-04', y: 51 },
{ x: '2016-03-05', y: 45}
]
},
{
name: "3",
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: '2016-03-04', y: 51 },
{ x: '2016-03-05', y: 45}
]
},
{
name: "4",
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: '2016-03-04', y: 51 },
{ x: '2016-03-05', y: 45}
]
},
{
name: "5",
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: '2016-03-04', y: 51 },
{ x: '2016-03-05', y: 45}
]
}
],
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();
When i run this code, there isn't chart, but f i changed to int (1, 2, 3...) i will see the chart.
Any help guys?
Thanks