So I want to try to make a website that includes charts. I used chart.js for it. Now i try to make two charts so i copied the one i make before and changed its variable but it doesn't shown up on my html page. What i want to ask is, is it possible to make 2 charts using chart.js and I did it the wrong way or i only can make one chart? Thank you.
By the way, here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Chart Page</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
<script>
let myChart2 = document.getElementById('myChart2').getContext('2d');
let massPopChart = new Chart(myChart2, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
</body>
You are using the same variable name for both of the charts that is massPopChart. You just need to change the variable name to massPopChart1 and massPopChart2.
Just check out the proper working here https://jsfiddle.net/4gdtujve/
Related
After several hours of research on google, I have not managed to find a tutorial that shows how to use vue.js to display the result of a sql query (for example SELECT in my case). I come to you because i need to know how i can retrieve and display the data back by the spring findAll () method in an html page with framwork vue.js.
Thank you in advance for your help.
Here is the html file in which I would like to display the data:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List of school</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="test">
<h1>Result</h1>
<tr>
<td/>ID</td>
<td/>Description</td>
</tr>
<tr v-for="item in panier">
<td>{item.id}</td>
<td>{item.description}</td>
</tr>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script>
<script>
new Vue({
el: '#test',
data: {
panier: [
{ id: "1", description: "University"},
{ id: "2", description: "high school"}
],
}
});
</script>
</body>
</html>
The problem I do not know how to fill my basket with the data returned by the findAll () method of spring.I specify that this method returns me the data in JSON format. Like this :
{
id:1,
description:"University"
}
{
id:,
description:"University"
}
Here is my getAllType method :
#RequestMapping(value= "/getAllTypes", method = RequestMethod.GET)
public #ResponseBody Collection<Type> getAllTypes() {
return this.typeService.getAllTypes();
}
Please if possible with an example of how I should proceed.
I want to set up the kendo filter something like filter we have on online sales websites.
Image for reference
In here programs will be associated with Groups and Schools and will have a start and end date. I was setting up the filter using custom code, can we somehow update kendo grid filter menu to get this type of layout for the filtering?
Here None of the information in filter area is visible in the grid (School, dates and groups).
Thanks in advance
Please find below proof of concept.
This is just a concept that it is possible to achieve what you doing , there is certainly more research need to be done and better way to handle checkboxes checking and unchecking the purpose is to provide a concept on how to achieve it
You will need to learn more about filtering in case both checkboxes are checked and other possibilities and for sure you can find help on that either in telerik documentation or stackoverflow.
Here is the JSBIN http://jsbin.com/bakediseci/edit?html,js,output
FOR HIDDEN COLUMN Filter SEE THIS FILTER HIDDEN COLUMN
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<span> Group1 <input type="checkbox" id="group1"/><br/>
<span> Group2 <input type="checkbox" id="group2"/>
<br/>
<br/>
Date: <input id="date" />
<br/>
<br/>
<br/>
<br/>
<div id="grid"></div>
</html>
JavaScript:
var data = [
{ name: "Paul", birthDate: new Date("1948/12/08"),Group:"Group1" },
{ name: "Janet", birthDate: new Date("1952/02/19"),Group:"Group1" },
{ name: "Nancy", birthDate: new Date("1963/08/30"),Group:"Group2" },
{ name: "Steven", birthDate: new Date("1937/09/19"),Group:"Group2" }
];
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: data,
columns: [
{field: "birthDate", format: "{0:d}" },
{field:"name"},
{field:"Group"}
]
}).data("kendoGrid");
$(document).ready(function() {
//set initial state.
$('#group1').val($(this).is(':checked'));
$('#group2').val($(this).is(':checked'));
$('#group1').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group1"});
}else {
grid.dataSource.filter({});
}
});
$('#group2').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group2"});
}else {
grid.dataSource.filter({});
}
});
});
$("#date").kendoDatePicker({
change: function() {
var value = this.value();
if (value) {
grid.dataSource.filter({
field: "birthDate",
operator: "eq",
value: value
});
} else {
grid.dataSource.filter({});
}
}
});
});
OUTPUT
Research and Helpfull links that you will need down the road
There was definitely research and source used you will need to go through
them again to make it solid .
http://www.telerik.com/forums/how-to-implement-a-custom-filter#2296030
http://www.telerik.com/forums/adding-filters-to-grid-s-source
user contributions licensed under cc-wiki with attribution required.
Heyho!
I tried all the day to bind the data of a JSON file to the data model of a SAPUI5 chart but without success. I miss the link between the JSON file and the dataset by path.
Added is the file containing the standalone code but without the json file which just contains calday and counter with some data. There seems no problem by defining the data directly in the script as data and refering in the dataset to it. Which I tried lately as you recognize at the /data path.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flattened DataSet bound to OData Entity with filter</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var oModelJSON = new sap.ui.model.json.JSONModel();
oModelJSON.loadData(file.json);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'Calendar Day',
value: "{calday}"
}],
measures: [{
name: 'Counter',
value: '{counter}'
}],
data: {
path: "/data"
}
});
var oChart = new sap.viz.ui5.Column({
width: "80%",
height: "400px",
plotArea: {
'colorPalette': d3.scale.category20().range()
},
title: {
visible: true,
text: 'Counter per Calendar Day'
},
dataset: oDataset
});
oChart.setModel(oModelJSON );
oChart.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I'm trying to pull some time and temperature data into Amcharts. The data is regularly collected temperature data (every 10 minutes). The data displays but appears to be stacked on top of each other. See example image:
Example
The data format (from a php script) is:
[{"timestamp":"2015-10-26 04:44:33","temp":24.9,"ID":"AA"},{"timestamp":"2015-10-26 04:54:31","temp":25.1,"ID":"AA"},{"timestamp":"2015-10-26 05:04:30","temp":25.2,"ID":"AA"}.....
The script code I am using is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Indoor temperature</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/amstock.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js">
</script>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataLoader": {
"url": "/sensor-data.php?action=csv_data&id='AB'&period=24"
},
"pathToImages": "http://www.amcharts.com/lib/images/",
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:MM:SS",
"startDuration": 1,
"categoryAxis": {
"parseDates": true,
"autoGridCount": true,
"minPeriod" : "ss"
},
"graphs": [ {
"valueField": "temp",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderThickness": 2,
"lineThickness ": 2,
"lineAlpha": 0.5
} ]
} );
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>
Can anybody point out what I am doing wrong to prevent the data from being displayed correctly?
So it turns out I had the dates not coming out of the PHP script as a date format AND I had the date being formatted wrong from a python script to the php to the javascript.
Thanks for looking at this.
I have a NVD3 graph displaying simple data set. I just want to draw a line over that graph with a different color(it's like a cut-off value , that will be x=5)
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="js/angular.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="js/moment.js"></script>
<script src="../dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="stylesheets/nv.d3.css"/>
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [
{
"key": "Github Api Mean Web Response Time",
"values": [[3,2],[4,6],[6,10],[2,6]]
}];
}
</script>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-line-chart
data="exampleData"
id="exampleId"
width="1000"
height="400"
showXAxis="true"
showYAxis="true"
margin="{left:50,top:50,bottom:50,right:50}"
>
<svg></svg>
</nvd3-line-chart>
</div>
</body>
Can anyone show me a way to add this vertical line to the graph I have now. It's better if we can add different color to that vertical line.
Note : this example I have is from here. It's lineChart.ticks.html
I found a way to do this like below.
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [
{
"key": "Github Api Mean Web Response Time",
"values": [[3,2],[4,6],[6,10]]
},
{
"key": "aaa",
"values": [[5,0],[5,10]]
}];
}
</script>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-cumulative-line-chart
data="exampleData"
id="exampleId"
width="1000"
height="400"
showXAxis="true"
showYAxis="true"
margin="{left:50,top:50,bottom:50,right:50}"
>
<svg></svg>
</nvd3-cumulative-line-chart>
</div>
</body>