Hey I have a File json as you see in the image (1) I want to create a chart Like this (the second image) using javascript ( any library) how I can do simply ? I want a an example of code simple
Add a comment
|
3 Answers
ZingChart would also work for this use case. Here is an example:
var myConfig = {
type: "bar",
"scale-x":{
"values":[
"ahbass marrakech",
"massira 1 marrakech",
"rue laayoune marrakech"
]
},
series : [
{
values : [2,1,1]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>In addition, you may find this comparison of JavaScript charting frameworks helpful when considering your options.
Full disclosure: I'm on the ZingChart team. Please let me know if you have any questions about the quick demo.
Comments
Have a look at CanvasJS.
Here is an example of rendering chart from external json file.
$(document).ready(function() {
var dataPoints = [];
$.getJSON("https://api.myjson.com/bins/45rin", function(result) {
for (var i = 0; i <= result.dataPoints.length - 1; i++) {
dataPoints.push({
label: result.dataPoints[i].label,
y: parseInt(result.dataPoints[i].y)
});
}
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "column",
dataPoints: dataPoints
}]
});
chart.render();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
Comments
Google Charts is a good chart/graphing tool for JavaScript if you are just getting started. Here is an example that I created when I was first looking into chart/graphing libraries in JS.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7],
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" sytle="width:900px;height:500px;"></div>
</body>
</html>
Which produces the following chart.
You can use the JSON.parse to get the data out of the JSON file instead of hard coding the data like in my example.
