score:0
no plan why it's empty for me..
my database output is correct it think!
data.php
[{"day":"15","quantity":"72"},{"day":"16","quantity":"157"},{"day":"17","quantity":"130"},{"day":"18","quantity":"91"},{"day":"19","quantity":"96"},{"day":"20","quantity":"129"},{"day":"21","quantity":"140"},{"day":"22","quantity":"141"}]
index.html
<!doctype html>
<html>
<head>
<title>a simple chart</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
$.ajax({
type: 'post',
url: 'data.php',
success: function (data) {
linechartdata = json.parse(data); //parse the data into json
var ctx = document.getelementbyid("mycanvas").getcontext("2d");
var mylinechart = new chart(ctx, {
type: 'line',
data: linechartdata
});
}
});
score:1
here is the main idea
data.foreach(function(packet) {
labelsdata.push(packet.day);
datasetdata.push(parsefloat(packet.quantity));
});
for example
var datajson = [{
"day": "2017-11-15",
"quantity": "72"
}, {
"day": "2017-11-16",
"quantity": "157"
}, {
"day": "2017-11-17",
"quantity": "130"
}, {
"day": "2017-11-18",
"quantity": "91"
}, {
"day": "2017-11-19",
"quantity": "96"
}];
var labelsdata = [];
var datasetdata = [];
datajson.foreach(function(packet) {
labelsdata.push(packet.day);
datasetdata.push(parsefloat(packet.quantity));
});
var chartdata = {
type: 'bar',
data: {
labels: labelsdata,
datasets: [{
label: 'days',
data: datasetdata
}]
}
}
working jsfiddle
Source: stackoverflow.com
Related Query
- charts.js - json output to graph
- Charts js and laravel: Render chart after passing in json data
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Chart JS - How to output JSON objects into PIE variant
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- Receiving json data from a server to display a chart.js graph not working
- Charts in Angular js with JSON Object
- how can plot graph using json data
- import Json formatted values to create bar charts with Chart.js
- ChartJS - Time graph from JSON
- Stacked bar charts in Chart.js with JSON data
- Charts Js Stacked Bar Graph displays no values?
- django + chart.js : Cannot get two bar charts on the same graph with appropriate data
- Plot a multi-line graph from grouped JSON object using Charts.js
- How can I process json file and display some data in form of charts in django
- Chart.js / Google Charts and JSON
- The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular
- The dataset in ng2 charts for bar graph is not setting properly
- ChartJS incorrect plot when plotting multiple line charts in one graph
- How to run Chart.js samples using source code
- Live update the charts.js graph on a web page using json data received from a remote server
- ChartJS separate charts per JSON object, and not when hovered over
- Weather graph using Angular 2, chart.js and json data
- How do you output the correct value for Chart.js Radar graph on label?
- Chart.js - In Graph Data for Pie & Doughnut Charts
- how to not repeat code while creating multiple charts in chart js
- json file to charts
- Destroy chart.js bar graph to redraw other graph in same <canvas>
- ChartJS Line Charts - remove color underneath lines
- Click events on Pie Charts in Chart.js
More Query from same tag
- Show date on xAxes without labels
- Making the labels responsive in chart js
- Chart js footer
- Chart.js passing value data dynamic
- Chart.js vertically symmetrical chart
- How to order tooltip values from the biggest to the smallest
- Scatterplot with 4 labels (Opposite Diagram) in any js library?
- Chart Js Change Label orientation on x-Axis for Line Charts
- Angular-chart.js Configuration
- grouped bar dataset in djanog template loop
- Chart.js: Force display of a certain label with autoSkip: true
- Using large values for y axis in Chart.js
- Changing borderDash for specific gridLines in radar chart
- Line Charts color all greyed out (ng2-charts)
- What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js
- Line is rendering only vertical line instead of sloped line
- How can I specify "per dataset" parsing with Chart.js?
- How to set static labels for ng2-charts bar charts?
- Chart.js animations ignoring global default configuration
- php/laravel: Creating chartdata, return 0 if no data is being submitted to database
- trouble with making floating bar charts using chart.js
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Chart.js adding tooltip with cashflow
- Populate chartjs ajax with datetime fields
- ChartJS: Can interior of polar area chart be hollow?
- Displaying Chart with data retrieved from Entity Framework in Controller
- Cleart Chart data upon ajax call
- chart js different callback labels
- Chartjs in Reactjs - how can I update data dynamically?
- Customization of Data Labels in doughnut chart ng2-charts