I am creating a project using JavaScript with Kendo. I am the beginner in Kendo.
I have problem while integrating the pie chart.I want to this type of chart:
But when I integrate the code according to reference site then my chart shapes become:
Here is the code:
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
Add this to your definition to remove shadow and border and keep the same skin
seriesDefaults: {
overlay: { gradient: "none" },
border: {
width: 0,
color: ""
}
}
If your problem is only with the styling, you can set your chart theme. Just add theme: "material" and you should get a plain color.
A list of themes can be found on kendo UI docs https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling
I am making a simple bar graph in Highcharts and want all the columns of the graph blue except for one. I have found how to change the color on one column when the data in the data set is in an array by using {y:value, color:"color"} on the particular data point you want to change. However, my values are in CSV form and this technique doesn't work.
I have tried to use the technique used for an array, that is {y:value, color:"color"} in the data set in various ways to no avail. I am looking for the proper way to do this when the data is in CSV format.
Here is a link to the specific graph: https://cloud.highcharts.com/show/B4SzUwwfY
Here is a copy of it's code:
"title": {
"text": "Ranking"
},
"subtitle": {
"text": ""
},
"exporting": {},
"chart": {
"polar": false
},
"plotOptions": {
"series": {
"animation": false,
"states": {
"inactive": {}
}
}
},
"xAxis": {
"index": 0,
"isX": true
},
"yAxis": {
"index": 0
},
"series": [
{
"turboThreshold": 0,
"_colorIndex": 0,
"_symbolIndex": 0,
"type": "column"
}
],
"annotations": [],
"data": {
"csv": "\"Entidad Federativa\";\"IDD-Mex 2018 ajustado a 10\"\n\"Aguascalientes\";10\n\"Baja California\";5.59398491\n\"Baja California Sur\";4.05317227\n\"Campeche\";8.01039005\n\"Chiapas\";1.15462263\n\"Chihuahua\";2.18559243\n\"Ciudad de México\";8.11808497\n\"Coahuila \";9.459552\n\"Colima\";6.90986012\n\"Durango\";4.47116843\n\"Guanajuato\";8.3311538\n\"Guerrero\";0\n\"Hidalgo\";4.75098071\n\"Jalisco\";3.3524999\n\"México\";5.01473714\n\"Michoacán \";3.90996208\n\"Morelos\";0.08613278\n\"Nayarit\";8.88474972\n\"Nuevo León\";6.88061019\n\"Oaxaca\";0.80450639\n\"Puebla\";1.53056493\n\"Querétaro\";7.32162985\n\"Quintana Roo\";4.84243048\n\"San Luis Potosí\";4.35040285\n\"Sinaloa\";6.63553281\n\"Sonora\";4.77125446\n\"Tabasco\";3.16869854\n\"Tamaulipas\";5.4656673\n\"Tlaxcala\";2.95165746\n\"Veracruz\";0.65919776\n\"Yucatán\";8.62090825\n\"Zacatecas\";8.03275369",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"chartarea": {},
"plotarea": {},
"tooltip": {},
"credits": {},
"stockTools": {
"gui": {
"buttons": [
"simpleShapes",
"lines",
"crookedLines"
],
"enabled": false
}
},
"navigation": {
"events": {
"showPopup": "function(e){this.chart.indicatorsPopupContainer||(this.chart.indicatorsPopupContainer=document.getElementsByClassName(\"highcharts-popup-indicators\")[0]),this.chart.annotationsPopupContainer||(this.chart.annotationsPopupContainer=document.getElementsByClassName(\"highcharts-popup-annotations\")[0]),\"indicators\"===e.formType?this.chart.indicatorsPopupContainer.style.display=\"block\":\"annotation-toolbar\"===e.formType&&(this.chart.activeButton||(this.chart.currentAnnotation=e.annotation,this.chart.annotationsPopupContainer.style.display=\"block\")),this.popup&&(c=this.popup)}",
"closePopup": "function(){this.chart.annotationsPopupContainer.style.display=\"none\",this.chart.currentAnnotation=null}",
"selectButton": "function(e){var t=e.button.className+\" highcharts-active\";e.button.classList.contains(\"highcharts-active\")||(e.button.className=t,this.chart.activeButton=e.button)}",
"deselectButton": "function(e){e.button.classList.remove(\"highcharts-active\"),this.chart.activeButton=null}"
},
"bindingsClassName": "tools-container"
}
}
In load event function you can use update method on a specific point and change the color:
chart: {
...,
events: {
load: function() {
var point = this.series[0].points[3];
point.update({
color: 'red'
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/4yz6Ln1m/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
I'm using ChartJS for a project at work, where I try to generate a chart from one or more series of data and some option (chart type, title, type of values of x and y, and so on). Everything is going smooth except of a scatter type when I have multiple dataset on data.
var ctx = $('#myChart');
var chart = new Chart (ctx,{
type: "scatter",
data: {
"datasets":[
{
label:"Series #1",
fill:false,
borderColor:"rgba(0,137,176,0.4)",
backgroundColor:"rgba(0,137,176,0.1)",
pointBorderColor:"rgba(0,137,176,0.7)",
pointBackgroundColor:"rgba(0,137,176,0.5)",
data:[
{"x":"alpha","y":36.2},
{"x":"beta","y":36.9},
{"x":"gamma","y":37},
{"x":"delta","y":38.3},
{"x":"epsilon","y":37.9},
{"x":"zeta","y":37.2}
]
}, {
label:"Series #2",
fill:false,
borderColor:"rgba(19,237,150,0.4)",
backgroundColor:"rgba(19,237,150,0.1)",
pointBorderColor:"rgba(19,237,150,0.7)",
pointBackgroundColor:"rgba(19,237,150,0.5)",
data:[
{"x":"alpha","y":37.4},
{"x":"beta","y":37.1},
{"x":"gamma","y":36.5},
{"x":"delta","y":36.4},
{"x":"epsilon","y":36.4},
{"x":"zeta","y":36.5}
]
}, {
label:"Series #3",
fill:false,
borderColor:"rgba(248,231,28,0.4)",
backgroundColor:"rgba(248,231,28,0.1)",
pointBorderColor:"rgba(248,231,28,0.7)",
pointBackgroundColor:"rgba(248,231,28,0.5)",
data:[
{"x":"alpha","y":38.1},
{"x":"beta","y":38.4},
{"x":"gamma","y":39},
{"x":"delta","y":39.2},
{"x":"epsilon","y":38.1},
{"x":"zeta","y":37.4}
]
}],
"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
options: {
elements: { line: { tension: 0 } },
scales: {
xAxes: [
{
scaleLabel:{
display:true,
labelString:"Date"
},
bounds:"data",
type:"category"
},{
display:false
},{
display:false
}
],
yAxes:[
{
scaleLabel: {
display:true,
labelString:"Temperature (°C)"
},
bounds:"data",
ticks:{
min:35.9,
max:39.5,
autoSkip:false,
stepSize:0.6
}
}, {
display:false
}, {
display:false
}
]
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
As you can easily notice, in my graph there's no grid, no xAxes definition, no yAxes definition. And I don't know why.
So, this is my question: why my scatter chart do not show grid and axes?
I give two more hints:
1 - if you play with the snippet changing the chart type from scatter to line, everything works fine.
2 - The weird xAxes structure is automatically generated since the three passed datasets uses all the same categories. My code create the first xAxes from the first dataset, and create a simple object { display: false } for the other datasets (chart.options.scales.xAxes requires to be an Array of the same size of the Dataset).
I always consider myself a newbie so any suggestion (about this problem, but also about my approach to it) is more than welcome.
If you remove the { display: false } you can see the gridlines. Not sure if you need this or not?
If you do really need this, then you can always check if (type === 'line') and if so you add the { display: false } to the options.
var ctx = $('#myChart');
var chart = new Chart (ctx,{
type: "scatter",
data: {
"datasets":[
{
label:"Series #1",
fill:false,
borderColor:"rgba(0,137,176,0.4)",
backgroundColor:"rgba(0,137,176,0.1)",
pointBorderColor:"rgba(0,137,176,0.7)",
pointBackgroundColor:"rgba(0,137,176,0.5)",
data:[
{"x":"alpha","y":36.2},
{"x":"beta","y":36.9},
{"x":"gamma","y":37},
{"x":"delta","y":38.3},
{"x":"epsilon","y":37.9},
{"x":"zeta","y":37.2}
]
}, {
label:"Series #2",
fill:false,
borderColor:"rgba(19,237,150,0.4)",
backgroundColor:"rgba(19,237,150,0.1)",
pointBorderColor:"rgba(19,237,150,0.7)",
pointBackgroundColor:"rgba(19,237,150,0.5)",
data:[
{"x":"alpha","y":37.4},
{"x":"beta","y":37.1},
{"x":"gamma","y":36.5},
{"x":"delta","y":36.4},
{"x":"epsilon","y":36.4},
{"x":"zeta","y":36.5}
]
}, {
label:"Series #3",
fill:false,
borderColor:"rgba(248,231,28,0.4)",
backgroundColor:"rgba(248,231,28,0.1)",
pointBorderColor:"rgba(248,231,28,0.7)",
pointBackgroundColor:"rgba(248,231,28,0.5)",
data:[
{"x":"alpha","y":38.1},
{"x":"beta","y":38.4},
{"x":"gamma","y":39},
{"x":"delta","y":39.2},
{"x":"epsilon","y":38.1},
{"x":"zeta","y":37.4}
]
}],
"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
options: {
elements: { line: { tension: 0 } },
scales: {
xAxes: [
{
scaleLabel:{
display:true,
labelString:"Date"
},
bounds:"data",
type:"category",
}
],
yAxes:[
{
scaleLabel: {
display:true,
labelString:"Temperature (°C)"
},
bounds:"data",
ticks:{
min:35.9,
max:39.5,
autoSkip:false,
stepSize:0.6
}
}
]
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
We are trying to display three sets of data, two stacked, one unstacked using chart.js. We defined two sets of axis where only the stacked data shows and the unstacked data does not. We can only get the axis to display or not display, but we cannot get the data to appear at all.
We know the data is valid because we can get all of the data to stack together, but not separately.
recycleChartData = {
"type":"bar",
"data":{
"labels":["Mar-2016"],
"datasets":[
{
"label":"benchmark",
"backgroundColor":"#ff3300",
"yAxisID":"stacked_testY2",
"xAxisID":"stacked_testX2",
"data":["2632.29"]
},
{
"label":"Crossville",
"backgroundColor":"#009900",
"yAxisID":"stacked_testY",
"xAxisID":"stacked_testX",
"data":["2268.44"]
},
{
"label":"test",
"backgroundColor":"#ffff00",
"yAxisID":"stacked_testY",
"xAxisID":"stacked_testX",
"data":["181.92"]
}
]
},
"options":{
"scales":{
"yAxes":[
{
"id":"stacked_testY",
"position":"left",
"stacked":true,
"display":true
},
{
"id":"stacked_testY2",
"position":"left",
"stacked":false,
"display":false
}
],
"xAxes":[
{
"id":"stacked_testX",
"position":"bottom",
"stacked":true,
"display":true
},
{
"id":"stacked_testX2",
"position":"bottom",
"stacked":false,
"display":false
}
]
}
}
};
It's odd that your code doesn't work, if you change the non-stacked dataSet to a line graph you see the data! Maybe worth posting an issue on the chartjs github.
But...
There was a feature released in 2.5.0 which will allow for this sort of scenario. More on what it is can be read here, https://github.com/chartjs/Chart.js/issues/2643.
Basically, you can add a new property stack on each of your dataSets to denote which stack you would like it to go on to, so for example with your data you could remove the extra scales and have 2 stacks
var config = {
"type": "bar",
"data": {
"labels": ["Mar-2016","Apr-2016"],
"datasets": [ {
"label": "Crossville",
"backgroundColor": "#009900",
"data": ["2268.44","2268"],
stack: 2,
}, {
"label": "test",
"backgroundColor": "#ffff00",
"data": ["181.92","181.92"],
stack: 2
},{
"label": "benchmark",
"type": "bar",
"backgroundColor": "#ff3300",
"data": ["2632.29","2632.29"],
stack: 1
}]
},
"options": {
"scales": {
"yAxes": [{
"id": "stacked_testY",
"type": 'linear',
"position": "left",
"stacked": true,
"display": true
}],
"xAxes": [{
"position": "bottom",
"stacked": true,
"display": true
}]
}
}
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:75%;">
<canvas id="chart"></canvas>
</div>
I came across this issue when trying to find out how to stack specific datasets of a line diagram in Chart.js v2.x.
Chart.js v3.x supports the stack attribute for line diagrams but in Chart.js v2.x:
you have to use multiple y-axis
to align the values you need to calculate the maximal value yourself and set ticks.max or ticks.suggestedMax in the axis configuration.
false console:
let yMax = 3000; // Calculate value beforehand.
var config = {
"type": "line",
"data": {
"labels": ["Mar-2016","Apr-2016","May-2016"],
"datasets": [ {
"label": "Crossville",
"backgroundColor": "#009900",
"data": ["2268.44","2268","31"]
}, {
"label": "test",
"borderColor": "#ffff00",
"data": ["181.92","181.92", "1000"],
"yAxis": 'A'
},{
"label": "benchmark",
"backgroundColor": "#ff3300",
"data": ["2632.29","2632.29","500"]
}]
},
"options": {
"scales": {
"yAxes": [
{
"id": "A",
ticks: {
beginAtZero: true,
display: true,
suggestedMax: yMax
},
},
{
"stacked": true,
"ticks": {
beginAtZero: true,
display: true, // Set this to false so that only one axis is shown!!!
suggestedMax: yMax
},
},
],
"xAxes": [{
"position": "bottom",
"stacked": true,
"display": true
}]
}
}
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div style="width:75%;">
<canvas id="chart"></canvas>
</div>
In my graph I want to add both column graph and line graph(trendline) for count . My code is like this
var crime_data=[];
for(var i=0;i<result.themes.length;i++){
var crime={};
var test2 = result.themes[i];
var test = test2[Object.keys(test2)];
console.log("test",test);
crime.name = Object.keys(result.themes[i]);
crime.data = [];
var test1 = test.individualValueVariable;
for(var j=0;j<test1.length;j++){
crime.data.push(test1[j].count);
};
crime_data.push(crime);
};
var crimeChart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'colomn'
},
xAxis: {
categories:year,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
credits: {
enabled: false
},
tooltip: {
shared: true,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
depth: 25,
allowPointSelect: true,
cursor: 'pointer',
point: {
},
}
},
series:crime_data
});
If I add type 'spline ' in series. I am not getting even data and not trend line. Please suggest me how should i add trend line in this case.
And this is my JSON :
{
"boundaries": {
"boundary": [{
"boundaryId": "45083021025",
"boundaryType": "USA_POSTCODE",
"boundaryRef": "B1"
}]
},
"themes": [{
"TheftCrimeTheme": {
"boundaryRef": "B1",
"individualValueVariable": [{
"name": "2012 Theft Crime",
"description": "Theft Crime for 2012",
"count": 310
}, {
"name": "2013 Theft Crime",
"description": "Theft Crime for 2013",
"count": 230
}]
}
}, {
"AssaultCrimeTheme": {
"boundaryRef": "B1",
"individualValueVariable": [{
"name": "2012 Assault Crime",
"description": "Assault Crime for 2012",
"count": 50
}, {
"name": "2013 Assault Crime",
"description": "Assault Crime for 2013",
"count": 41
}]
}
}]
}
Please suggest me how should I do this.
Highcharts does not have trendline functionality built in. You can use something like: https://github.com/virtualstaticvoid/highcharts_trendline
to calculate your trendline values and pass it as to new line series.