Related
I decided to add radar chart to the site, however I ran into a problem. The text around the radar is very small, and despite the addition of an option to increase it, the text remains the same
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["HTML 5", "CSS 3", "FLUTTER", "PYTHON", "JS", "DART", "React", "ThreeJS"],
datasets: [{
label: "MY SKILLS",
backgroundColor: "rgba(30,30,32,0.4)",
data: [90, 80, 60, 75, 60, 35, 55, 37]
},
],
options: {
plugins: {
legend: {
labels: {
font: {
size: 400
}
}
}
}
}
};
Option font: size doesn't work despite the fact that it is in the code
Here is an example with Chart JS V3:
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
datasets: [{
label: "Student A",
backgroundColor: "rgba(200,0,0,0.2)",
data: [65, 75, 70, 80, 60, 80]
}, {
label: "Student B",
backgroundColor: "rgba(0,0,200,0.2)",
data: [54, 65, 60, 70, 70, 75]
}]
};
var radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData,
options: {
scales: {
r: {
pointLabels: {
font: {
size: 100
}
}
}
}
}
});
<canvas id="marksChart" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
I am looking to develop the following type of chart.
So far I have achieved the following result:
But I have the following problems and I have no idea how to perform them.
The days have 2 bar graphs in the form of a stack. The legend for these 2 graphs is the same so I am looking for it not to show duplicate at the top. These represent a percentage.
Each bar has a name: "Turn 1" and "Turn 2", so I would like them to be able to show when I hover over the charts along with their corresponding value.
Place on the right side of the "Y Axis" another text but this represents a whole number that is represented by the black line.
My source code is the following:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script src="https://www.chartjs.org/dist/2.9.4/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: [
"Día 1",
"Día 2",
"Día 3",
"Día 4",
"Día 5",
"Día 6",
"Día 7",
"Día 8",
"Día 9",
"Día 10",
],
datasets: [
{
type: "line",
label: "Toneladas Provisionales",
borderColor: "#000000",
backgroundColor: "#000000",
borderWidth: 2,
fill: false,
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% UTILIZACION",
backgroundColor: "#3393df",
stack: "Turno 1",
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% COLAS LARGAS",
backgroundColor: "#e88967",
stack: "Turno 1",
data: [59, 10, 12, 8, 6, 17, 6],
},
{
label: "% COLAS DESCARGA",
backgroundColor: "#9d81bd",
stack: "Turno 1",
data: [10, 23, 13, 12, 8, 7, 11],
},
{
label: "% TALLER",
backgroundColor: "#b3b3b3",
stack: "Turno 1",
data: [19, 16, 10, 19, 18, 16, 11],
},
{
label: "% STAND BY + PARALIZACIONES",
backgroundColor: "#409640",
stack: "Turno 1",
data: [0, 23, 14, 11, 16, 7, 18],
},
{
label: "% TURNOS 0 PRODUCCION",
backgroundColor: "#ffdf00",
stack: "Turno 1",
data: [0, 0, 0, 0, 0, 0, 0],
},
{
label: "% UTILIZACION",
backgroundColor: "#3393df",
stack: "Turno 2",
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% COLAS LARGAS",
backgroundColor: "#e88967",
stack: "Turno 2",
data: [59, 10, 12, 8, 6, 17, 6],
},
{
label: "% COLAS DESCARGA",
backgroundColor: "#9d81bd",
stack: "Turno 2",
data: [10, 23, 13, 12, 8, 7, 11],
},
{
label: "% TALLER",
backgroundColor: "#b3b3b3",
stack: "Turno 2",
data: [19, 16, 10, 19, 18, 16, 11],
},
{
label: "% STAND BY + PARALIZACIONES",
backgroundColor: "#409640",
stack: "Turno 2",
data: [0, 23, 14, 11, 16, 7, 18],
},
{
label: "% TURNOS 0 PRODUCCION",
backgroundColor: "#ffdf00",
stack: "Turno 2",
data: [0, 0, 0, 0, 0, 0, 0],
},
],
};
var ctx = document.getElementById("canvas").getContext("2d");
var canvas = new Chart(ctx, {
type: "bar",
data: barChartData,
options: {
title: {
display: true,
text:
"Detalle de Tiempos de Utilización de Flota y Toneladas Transportadas por Turno del 1 al:",
},
legend: {
display: true,
},
tooltips: {
enabled: true,
},
responsive: true,
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
ticks: {
min: 0,
max: this.max, // Your absolute max value
callback: function (value) {
return ((value / this.max) * 100).toFixed(0) + "%"; // convert it to percentage
},
},
scaleLabel: {
display: true,
labelString: "Porcentaje",
},
},
],
},
},
});
</script>
</body>
</html>
*After checking some related questions, couldn't find any good answers, So that why I am posting my question here. I have created a bar chart and hard coded all the values and the charts works fine, But instead of hard Coding I want to read my data from Json file(data.json) which is external file. Can I get some help with this. Thanks in Advance. *
Bar Chart Image
data.json file
[
{
"date": "2016-12-1",
"high": 7,
"medium": 18,
"low": 0
},
{
"date": "2016-12-13",
"high": 1,
"medium": 27,
"low": 0
},
{
"date": "2016-12-20",
"high": 1,
"medium": 11,
"low": 3
},
{
"date": "2017-01-06",
"high": 1,
"medium": 22,
"low": 2
},
{
"date": "2017-01-11",
"high": 1,
"medium": 16,
"low": 2
}]
My Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h2> My first Bar Chart.... </h2>
</header>
<div class="container">
<canvas id="myChart" width="200" height="200"></canvas>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript" src="data.json"></script>
<script src="js/chart.js"></script>
</body>
</html>
Finally my Javascript code:
var myChart = document.getElementById("myChart").getContext('2d');
//Global options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#777';
//new Chart creates a new chart object
var threadScoreChart = new Chart(myChart, {
type: 'bar', // bar type chart
data: {
labels: ['13 Dec', '20 Dec', '27 Dec', '03 Jan', '10 Jan', '17 Jan', '24 Jan',
'31 Jan','07 Feb','14 Feb', '21 Feb', '28 Feb', '12 April'],
datasets: [
{
label: 'High',
data: [3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5],
backgroundColor:'rgba(251, 153, 148, 0.6)',
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}, {
label: 'Medium',
data: [18, 27, 11, 22, 16, 33, 29, 28, 24, 37, 37, 47, 48],
backgroundColor: 'rgba(251, 217, 158, 0.6)', //yelloworange color
}, {
label: 'Low',
data: [0, 0, 3, 2, 2, 2, 2, 2,1, 1, 1, 1, 5],
backgroundColor: 'rgba(135, 175, 190, 0.6)', //light blue
}]
},
// Configuration options go here
options: {
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
title: {
display:true,
text: 'Scores in 2017 and 2018',
fontSize: 25
},
subtitle: {
text: "check out the z-axis movement"
},
layout:{
padding: {
left:50,
right:0,
bottom:0,
top:0
}
},
legend: {
display: true,
position: "right",
fullWidth: true,
labels: {
boxWidth: 16,
fontSize: 16
},
header: {
text: 'Legend Header',
fontSize: 16
}
},
item: {
cursor: 'pointer'
},
tooltips: {
enabled:false //when hover there will be no tooltips showing.
}
} //options ends
});
to read data from Json file, don't include the json in a script tag,
<script type="text/javascript" src="data.json"></script>
use ajax to get the data instead...
function getData() {
$.ajax({
url: 'data.json',
dataType: 'json'
}).done(function (jsonData) {
// --> jsonData
});
}
or if don't want to include jquery...
function getData() {
var jsonRequest = new XMLHttpRequest();
jsonRequest.open('get', 'so_q0.txt');
jsonRequest.setRequestHeader('Accept', 'application/json');
jsonRequest.setRequestHeader('Content-Type', 'application/json');
jsonRequest.onreadystatechange = function () {
if (jsonRequest.readyState === 4) {
if (jsonRequest.status === 200) {
// --> JSON.parse(jsonRequest.responseText)
}
}
};
jsonRequest.send();
}
also recommend waiting for the page to load, before drawing the chart.
once you have the json,
you can use the map method to extract separate arrays for the chart...
getValues(jsonData, 'date')
getValues(jsonData, 'high')
getValues(jsonData, 'medium')
getValues(jsonData, 'low')
function getValues(jsonData, key) {
return jsonData.map(function (row) {
return row[key];
});
}
see following working snippet,
the data has been hard-coded for example purposes,
the data request will actually fail in this snippet,
just remove the else clause and you should be good to go...
window.onload = getData;
function getData() {
$.ajax({
url: 'data.json',
dataType: 'json'
}).done(function (jsonData) {
drawChart(jsonData);
}).fail(function (jqXHR, textStatus, errorThrown) {
drawChart([{
"date": "2016-12-01",
"high": 7,
"medium": 18,
"low": 0
}, {
"date": "2016-12-13",
"high": 1,
"medium": 27,
"low": 0
}, {
"date": "2016-12-20",
"high": 1,
"medium": 11,
"low": 3
}, {
"date": "2017-01-06",
"high": 1,
"medium": 22,
"low": 2
}, {
"date": "2017-01-11",
"high": 1,
"medium": 16,
"low": 2
}]);
});
}
function drawChart(jsonData) {
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#777';
var myChart = $('#myChart').get(0).getContext('2d');
var threadScoreChart = new Chart(myChart, {
type: 'bar',
data: {
labels: getValues(jsonData, 'date'),
datasets: [{
label: 'High',
data: getValues(jsonData, 'high'),
backgroundColor: 'rgba(251, 153, 148, 0.6)',
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}, {
label: 'Medium',
data: getValues(jsonData, 'medium'),
backgroundColor: 'rgba(251, 217, 158, 0.6)'
}, {
label: 'Low',
data: getValues(jsonData, 'low'),
backgroundColor: 'rgba(135, 175, 190, 0.6)'
}]
},
options: {
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
title: {
display:true,
text: 'Scores in 2017 and 2018',
fontSize: 25
},
subtitle: {
text: 'check out the z-axis movement'
},
layout: {
padding: {
left:50,
right:0,
bottom:0,
top:0
}
},
legend: {
display: true,
position: 'right',
fullWidth: true,
labels: {
boxWidth: 16,
fontSize: 16
},
header: {
text: 'Legend Header',
fontSize: 16
}
},
item: {
cursor: 'pointer'
},
tooltips: {
enabled: false
}
}
});
}
function getValues(jsonData, key) {
return jsonData.map(function (row) {
var months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
var value = row[key];
if (key === 'date') {
value = value.split('-');
value = value[2] + '-' + months[value[1] - 1];
}
return value;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="container">
<canvas id="myChart"></canvas>
<div>
The JSON file data structure needs to be analyzed to see how it can be converted or read using an algorithm so its data can can be placed in the object passed as the second parameter to new Chart:
File (array) entries are objects with a date property and additional properties providing point values for each of three bar graphs on that date.
Chart parameters want an array of date strings used as labels, and and a separate array of values for each of the bar charts to plot.
I worked through converting the data structure to illustrate the first step in taking that approach, by taking the file data and producing an array of chart labels along with three data set arrays:
var fileResponse =
'[{"date":"2016-12-1","high":7,"medium":18,"low":0},{"date":"2016-12-13","high":1,"medium":27,"low":0},{"date":"2016-12-20","high":1,"medium":11,"low":3},{"date":"2017-01-06","high":1,"medium":22,"low":2},{"date":"2017-01-11","high":1,"medium":16,"low":2}]';
var fileData = JSON.parse(fileResponse); // same data as in post
// restructure the data:
const fileSetNames = ["high", "medium", "low"];
const chartSetNames =["High", "Medium", "Low"];
const months_en = [
"Jan","Feb","Mar","Apr","May","Jun",
"Jul","Aug","Sep","Oct","Nov","Dec"
];
function prettyLabel(label) {
return chartSetNames[ fileSetNames.indexOf(label)];
}
function prettyDate( fileDate) {
fileDate = fileDate.split("-");
let month = fileDate[1];
if( month[0]== "0") {
month = month[1]; // remove leading zero
}
return months_en[month-1] + " " + fileDate[2];
}
var chartData = fileData.reduce(
( outData, inData) => {
outData.labels.push( prettyDate(inData.date));
for( var label of fileSetNames) {
var Label = prettyLabel(label);
outData[Label].push( inData[label]);
}
return outData;
},
{ labels: [], High: [], Medium: [], Low: [] }
);
// show chartData structure:
console.log( chartData);
This is subject to rewriting as required in an application: data series names and date reformatting are hard coded, and style requirements may differ.
The restructured data still needs to be inserted into the second parameter passed to Charts, which I leave for you to continue with - it's called work :D. Good luck.
I am very confused about how to load json data into the combo pie / bar Highcharts. Please find the code below. Its an example and by no means finished. I just need a better grasp on the json load and how the data series should be expressed. Thanks in advance.
Please note the js code that is highlighted - is that correct? The project resides on my dev box and the json file is local.
For starters I would like to chart the Status and ID values from my json file. How should the series in the js code look?
i.e
name: 'id',
data: processed_json
-Begin Code example html/js-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>xxxxxxxx Automation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Load jason data
// var processed_json = new Array();
//$.getJSON('json_output.json', function(data) {
// // Populate series
// for (i = 0; i < data.length; i++){
// processed_json.push([data[i].key, data[i].value]);
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'xxxxxxx Passed',
data: [{
name: 'Ad-Hoc',
y: 13,
color: Highcharts.getOptions().colors[0] // Ad-Hoc's color
}, {
name: 'Create Order',
y: 23,
color: Highcharts.getOptions().colors[1] // Create Order's color
}, {
name: 'Create-Express-Ready-Parameter',
y: 19,
color: Highcharts.getOptions().colors[2] // Create-Express-Ready-Parameter's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<p><center>
The following XXXXXn Report illustrates current Pass validation by test category.
<p> * Green represents the number of passed scenarios
<p> * Black represents the number of scenarios that are in progress or dev/test.
<p> * Blue represents the number of failed scenarios.
</p>
</center>
</html>
-snippet of json-
[
{
"uri": "features/TC-0001-Bill-Of-Laiding-Shipping.feature",
"id": "check-pricing-for-bill-of-laiding",
"keyword": "Feature",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 3,
"tags": [
{
"name": "#Bill-Of-Laiding-Shipping",
"line": 1
}
],
"elements": [
{
"id": "check-pricing-for-bill-of-laiding;check-pricing-for-bill-of-laiding",
"keyword": "Scenario",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 5,
"type": "scenario",
"tags": [
{
"name": "#Bill-Of-Laiding-Shipping",
"line": 1
}
],
"steps": [
{
"keyword": "Given ",
"name": "TC-0006-Log into One Lisa",
"line": 7,
"match": {
"location": "features/step_definitions/my_steps.rb:779"
},
"result": {
"status": "passed",
"duration": 9024120000
}
},
{
"keyword": "Then ",
"name": "TC-0001-Bill-Of-Laiding Query onleLisa (Lisa_One) to access existing Bill Of laiding",
"line": 8,
"match": {
"location": "features/step_definitions/my_steps.rb:1194"
},
I will try to help you mading your code a bit easy to understand.
You JSON, should fill the var 'dataPie' that I created.
I hope that it will help you.
$(document).ready(function() {
var dataPie = [
{
name: 'ONE PART OF PIE',
y: 10,
color: Highcharts.getOptions().colors[0]
}, {
name: 'ANOTHER PART OF PIE',
y: 15,
color: Highcharts.getOptions().colors[1]
}];
var pieObject = {
type: 'pie',
name: 'xxxxxxx Passed',
data: dataPie,
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
},
pieObject
]
});
})
1) There is a Highcharts Documentation on custom data preprocessing that covers loading data from JSON. If you are going to load data using jQuery's $.getJSON, then before creating the chart you should include data in chart's configuration object (used to create the chart).
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
2) Series should look like described in Documentation. The most important and most needed part is data array. To plot your chart you will need to parse your JSON data into format acceptable by Highcharts - more info in API.
In short - data must be 1 of 3: an array of numerical values(1), or array of arrays(2), or array of object with named properties(3). Data must cover y values of each point and can have additional info.
I am unable to help you with data parsing since I do not know where are required values nor what data you want to include in chart's data nor where (meaning as what - point names, additional tooltip values, series names, others?). If you will provide more info, then I could update this answer with more precise example / demo.
I have recently started on Kendo-UI.
I have the following bar charts. I would like to add the draw lines that connects bar charts as shown in the second figure.
Here is what I have:
Here is what I wish to achieve:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Hybrid car mileage report"
},
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 100
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Here is my jsfiddle: http://jsfiddle.net/mskjbLwx/
Add two another series with type: line to connect bar.
See example: JSFiddle, may be that help you.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Hybrid car mileage report"
},
legend: {
position: "top"
},
transitions: true,
series: [{
type: "line",
missingValues: "interpolate",
markers: {
visible: false
},
data: [10, 20, 30, 40, 50],
stack: true,
tooltip: {
visible: true
},
name: "on battery",
color: "orange",
visibleInLegend: false
}, {
type: "column",
data: [10, 20, 30, 40, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "line",
missingValues: "interpolate",
markers: {
visible: false
},
data: [5, 15, 25, 35, 45],
stack: true,
tooltip: {
visible: true
},
name: "on gas",
color: "green",
visibleInLegend: false
}, {
type: "column",
data: [5, 15, 25, 35, 45],
stack: true,
name: "on gas",
color: "#0399d4"
}],
valueAxes: [{
title: {
text: "miles"
},
min: 0,
max: 100
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<base href="http://demos.telerik.com/kendo-ui/area-charts/multiple-axes">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"> </script>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>