I'm currently using the following chart to display data. The chart currently reads json data embedded into the javascript.
I need to be able to read from file any.json instead of the embedded json object. I've been searching for some type of documentation, but have found nothing.
Any help is appreciated.
any.json looks like this:
[{x: "January", value: 10000},{x: "February", value: 12000},{x: "March", value: 18000}]
And here's the current html:
anychart.onDocumentReady(function() {
chart = anychart.fromJson({
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
},
{
x: "February",
value: 12000
},
{
x: "March",
value: 18000
},
{
x: "April",
value: 11000
},
{
x: "May",
value: 9000
}
]
}],
container: "container"
}
}).draw();
});
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" />
<div id="container"></div>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
You can use https://api.anychart.com/7.13.1/anychart.data#loadJsonFile method. There is a sample: https://playground.anychart.com/api/7.13.1/modules/anychart.data.loadJsonFile-plain
Related
First up - most of my development experience is with the back end and, while I have plenty of programming experience in that context, I'm not that familiar with Javascript.
I have managed to produce a REST service that (via GSON) generates JSON populated with data from a database. This data includes a list of two values: a date and a double indicating a temperature for that date. An example of the generated JSON can be found here.
What I'd like to try and do is to take the data and display it in a line chart. I've been trying this with Chartjs with extremely limited success.
The code I'm currently using to try and get the chart working is:
var data = [{"2019-03-30":11.0},{"2019-03-31":10.2},{"2019-04-01":10.0}];
var ctx = document.getElementById("temperatureChart").getContext('2d');
var chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "2019",
data: data,
borderColor: "rgb(192,49,62)",
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Temperature Averages'
}
}
});
As you can see - I've, for the moment, simply hard coded a few data values in an attempt to try and get it working. All this produces is a chart with nothing on the X Axis and the values -1.0 to 1.0 in .2 increments - screenshot at the bottom of this post.
Honestly, I've no idea how to proceed from here. Is Chartjs even a good choice for this? Starting to wonder if I've bitten off more than I can chew.
Since you also asked "Is Chartjs even a good choice for this?", here is a DevExtreme Charts example:
(modified from devExtreme's sample)
I modified your data from this: (as I mentioned in your question's comments)
[ { "2019-03-30" : 11.0 }, { "2019-03-31" : 10.2 }, { "2019-04-01" : 10.0 }]
to this:
[ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }]
HTML:
<div class="dx-viewport demo-container">
<div id="chart-demo">
<div id="chart"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
<div id="types"></div>
</div>
</div>
</div>
</div>
CSS:
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
Javascript:
$(function(){
var chart = $("#chart").dxChart({
palette: "Violet",
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "x",
type: types[0]
},
margin: {
bottom: 20
},
argumentAxis: {
valueMarginsEnabled: false,
discreteAxisDivisionMode: "crossLabels",
grid: {
visible: true
}
},
series: [
{ valueField: "y", name: "Temperature" }
],
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center",
itemTextPosition: "bottom"
},
title: {
text: "Daily Temperature Variations",
subtitle: {
text: "(Celsius)"
}
},
"export": {
enabled: true
},
tooltip: {
enabled: true,
customizeTooltip: function (arg) {
return {
text: arg.valueText
};
}
}
}).dxChart("instance");
$("#types").dxSelectBox({
dataSource: types,
value: types[0],
onValueChanged: function(e){
chart.option("commonSeriesSettings.type", e.value);
}
});
});
var dataSource = [ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }];
var types = ["line", "stackedline", "fullstackedline"];
Generally speaking, will a chart that reads embedded JSON also read a JSON file?
For example, my current chart looks like this:
anychart.onDocumentReady(function() {
chart = anychart.fromJson({
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Now, instead of the JSON being embedded, it's in a file called myData.json. Will that chart read the JSON file? Or does that depend on the chart?
Original post:
As you can see at the following example, the same data can be stored to an Object named data and then create the chart by using chart = anychart.fromJson(data).draw();
Since you want to get this data from a json file, you will have to use something like this: How to get JSON from URL in Javascript?
$.getJSON('http://your_json_url', function(data) {
anychart.fromJson(data).draw();
});
anychart.onDocumentReady(function() {
data = {
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}
chart = anychart.fromJson(data).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Edit - working example:
file: test_data.json (take it as it is)
{
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": [{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
}],
"container": "container"
}
}
file: index.html (modify the url of the json file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON('http://localhost/json_chart_test/test_data.json', function(data) {
console.log(data);
anychart.fromJson(data).draw();
});
});
</script>
I am trying create a bar chart for the data in mysql using php. I use bootstrap template to create application. I have predefined barchart with static data. I wanna add the data from the database. I tried my best but could not find solution as I am beginner in Javascript. Please guide me to add data dynamically. The Script is below:
// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: '# of Votes',
backgroundColor: "#26B99A",
data: [10, 20, 30, 40, 20, 10, 40]
}, {
label: '# of Votes',
backgroundColor: "#03586A",
data: [41, 56, 25, 48, 72, 34, 12]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
If I understand the environment, you have php-produced webpages.
If so I would:
Create a .php file
Write some php code to connect to the database and to retrieve an array with the data to be charted
Copy your JS code, wrapped in <script> </script> tags and also wrap it in a JS Function which you'll call later in the page
Inside your JS code, after datasets, write a php loop as this:
// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
<?php
if (count($arrayOfData) > 0){
echo "label: '# of Votes',";
echo "backgroundColor: '#26B99A',";
echo "data: [";
$firstValue = true;
foreach ($arrayOfData as $dataValue) {
if ( ! $firstValue ) {
echo ", ".$dataValue;
} else {
$firstValue = false;
}
echo $dataValue;
}
echo "]";
} else {
//Decide what to do if you don't have data
}
?>
}]
}'
Write the rest of the HTML/PHP page.
Note that if you want more than 1 bar in your graph you have to also cycle through different data sets, not only through one as I showed above for simplicity.
i try to display only the example from chart js in a project i work on. Unfortunately i'm forced to use Chart Js 1.x.
I tried to implement the bar example from https://github.com/chartjs/Chart.js/blob/master/samples/bar/bar.html
It's a pretty easy example i guess but it isn't running :(
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="zeitsteuerungChart"></canvas>
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
borderWidth: 1,
data: [
"1","1","1","1","1","1","1"
]
}, {
label: 'Dataset 2',
borderWidth: 1,
data: [
"1","1","1","1","1","1","1"
]
}]
};
window.onload = function() {
var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData
});
};
The Chart JS manipulate the
<canvas id="zeitsteuerungChart"></canvas>
element to
<canvas id="zeitsteuerungChart" width="300" height="150" style="width: 300px; height: 150px;"></canvas>
but thats pretty much it. No diagram shows up. No error in Console. I tried to use jQuery as well to select the canvas with
var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");
but same effect! On other subpages of the project it's working pretty fine!
You are using chart js v2 syntax on v1.
for v1
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
borderWidth: 1,
data: ["1","1","1","1","1","1","1"]
},
{
label: 'Dataset 2',
borderWidth: 1,
data: ["1","1","1","1","1","1","1"]
}]
};
window.onload = function() {
var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
var myBar = new Chart(ctx).Bar(barChartData, options);
};
you can view chart options (chart js v1) here or complete options here
So, I'm trying to implement CanvasJS into my project. I'm having a hard time trying to get the values from my structs to work in the tags. It works fine for the HTML code, but I'm not sure how to get it work for the javascript. Is it a different syntax?
<html>
<head>
<title>results</title>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
/*dataPoints: [
{ label: "Time", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]*/
dataPoints: [
{{range .Pair}}
{label: {{.Time}}, y: {{.Value}}}
{{end}}
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<h1>{{.Id}}</h1>
<ol>
{{range .Pair}}
<ul>
<li>Time: {{.Time}}</li>
<li>Value: {{.Value}}</li>
</ul>
{{end}}
</ol>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>