First: Please Be Gentle, I am a newb with JS
I have a dashboard and I'm creating a chart with JS. I'm working from a template which already had some examples, so I am making things work by following what was already there.
I have a bar chart but I would like to add a line chart over top of it.
Is this possible? And if so, how?
I believe I'm using Chart.min.js (imported earlier in doc)
Here is my js (minus the data) to generate the chart.
<script>
window.onload = function(){
// Bar Chart from barChartData
var ctx = document.getElementById("chart-bar").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
</script>
Hoping someone can help me out with this... I'm good with the HTML, Python, Flask, MySql, etc..... but js is still brand new, but I'm learning :-).
Yes it is possible.
Chart.js lets you create charts with multiple datasets. The datasets don't have to be of the same type so you can create one dataset with lines and another one with bars like this:
datasets: [{
// set one for your bars
type: 'bar',
data: [1, 2, 3, ... ] // your data for the bar chart
}, {
// set two for your lines
type: 'line',
data: [4, 5, 6, ... ] // your data for the line chart
}]
and then create the chart with those datasets
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
responsive : true,
// other settings ...
});
You can take some inspiration from my working example here
Related
So I am making a COVID-19 tracker(For Indian region) web Application using Node.js Express.js and EJS. So the issue i am getting is while creating Chart using library chart.js And I am using this API to fetch data https://api.covid19india.org/data.json .And the chart is for Total Confirmed cases on Y-axis and on X-axis Date (date from the starting of this pandemic till now)
these Informations are fetched from the api .I'm using a for loop to iterate through the array and get the specific data and pusshing it into an empty array dailyDateChnage=[], dailyCnf=[];
and later passing this data into the EJS file analytics.ejs <%=dailyDateChnage%> <%=dailyCnf%>
const dailyDateChange=[],dailyCnf=[];
const url = "https://api.covid19india.org/data.json";
const covidDataApi = axios.get(url).then(function(response) {
covidData = response.data;
for (var i = 0; i < covidData.cases_time_series.length; i++) {
let day = covidData.cases_time_series[i].date;
let cnf = covidData.cases_time_series[i].totalconfirmed;
dailyDateChange.push(day);
dailyCnf.push(cnf);
}
app.get("/analytics", function(req, res) {
res.render("analytics", {
dailyDateChange: dailyDateChange,
dailyCnf: dailyCnf,
});
});
my code for creating a chart using chart.js in file analytics.ejs
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data:{
labels:[<%=dailyDateChange%>],
datasets: [{
label: 'Daily Confirmed Cases',
data: [<%=dailyCnf%>],
fill:false,
backgroundColor: [
"red"
],
borderColor: [
"red"
],
borderWidth: 2,
pointBorderColor:"red",
pointBackgroundColor:"red",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
labels:<%=dailyDateChange%> using this label the chart is not rendering [here is an image of the source page the data is being sent but not being rendered2 and an image of the output
but when replacing the labels as labels:<%=dailyCnf%>, the chart is getting rendered. image after replacing the labels
And I have tried converting the date data to string and Converting the date data to millisecond the again converting it to string
nothing has worked for me.
I don't even understand what is this issue
Can someone Explain and provide a solution for this.
When printing dailyDateChange using <%= %> it simply "prints" it as output. Consider this: You use console.log with a string element - you don't get double quotes around it in the output.
But in your code, you want the double quotes around the values of label.
Currently you might be getting something like this:
labels: [10 April, 11 April]
While you need this:
labels: ["10 April", "11 April"]
The simplest method to do so is convert it via JSON.stringify and use <%- %>` instead. The - tag (instead of =) does not escapes the string.
This code should work for you:
labels: <%- JSON.stringify(dailyDateChange) %>
Note that I also removed [] from around label as Stringify does that for us.
I am using a button to change the series on a High Charts graph using the series[0].setData() function. It does change the data and update the graph, but when I try to use a second button to reset my back data, nothing seems to happen. Why can the Series only be updated once?
$('#button').click(function() {
chart.series[0].setData(mydata1);
});
http://jsfiddle.net/9ypsm98a/
EDIT:
Still looking for an answer, but a easy work around is to have the button first use chart.destroy(); then recreate a completely new chart.
The problem is that the array/objects are being passed by reference on first creating the chart. After that, High Charts appears to be only updating the existing objects, overwriting the originals. Try the following jsfiddle. I first create the chart using empty objects. Then the buttons work as expected.
http://jsfiddle.net/308zr285/
var emptyData = [{},{},{}];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: null,
type: 'treemap'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
alternateStartingDirection: true
}],
title: {
text: 'Fruit consumption'
}
});
chart.series[0].setData(emptyData);
});
So I am using the library ECharts to create some charts and graphs for various data that I have on a website. This is my first time using the library and I am fairly new to Javascript/jQuery. What I am trying to do is set the xAxis data to the results from a local page which will return a JSON Object with an array containing the days of the week. After I can do this, I then plan to load the Series data in the same way.
The jSON that is returned is this
When I am trying to set the data for xAxis, I am doing it as shown
xAxis: [{
type: 'category',
boundaryGap: false,
data: function(){
$.ajax({
type: "POST",
url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
cache: false,
success: function(result){
return result.data;
//console.log(result.data);
}
});
}
}],
However, I keep getting the error Uncaught TypeError: o.slice is not a function and this error is only being outputted when I try and use this method of setting the data. In addition to this, if I try and make a function to return the data from the external page and set a variable to that, whenever I try and print it to the console it says undefined
If I do not use my method of trying to load the external data and I predefine the data like so
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}]
Then there are no errors and it works just fine
Can anyone see the problem?
Seems that after speaking with some people, the only example usage or documentation available is this example they have which is closely related to my question here.
If anyone else wants some examples related to ajax or dynamic data loading with ECharts then here are some (in English) *
Line + Bar
Scatter + Candlestick
Pie + Radar
Helpful tip
If you do not speak Chinese and you are using some sort of translator for their code examples; be aware that it's common for websites such as Google Translate and Bing Translator to incorrectly translate the punctuation used in JS by doing things such as,
Translating arrays with single quotes into arrays with single quotes and double quotes: thus causing syntax errors.
Removing commas (,) from objects.
Changing Semi-colon's (;) into Colon's (:) or even removing them.
complete example for echarts pushing data from Ajax call
data.importPorts -> Array of strings
data.importBD -> Array of Objects { clientanem : [4,5,6,7,3]}
$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
.done(function (data) {
var option = {
tooltip: {
show: true
},
legend: {
data: (function () {
var res = [];
for (var name in data.importBD) {
res.push(name);
};
return res;
})()
},
xAxis: [
{
type: 'category',
data: (function () {
var res = [];
data.importPorts.forEach(function (i) {
res.push(i);
});
return res;
})()
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
}
]
};
for (var name in data.importBD) {
var obj = {
name: name,
type: "bar",
data: data.importBD[name]
};
option.series.push(obj);
}
// Load data into the ECharts instance
imprtChart.setOption(option);
});
I have two C# lists that contain and x-axis and y-axis points.
List<string> xaxis = xAxisData(url);
List<string> yaxis = yAxisData(url);
I want to pass points to my jqPlot script chart so that I can plot them.
Below is my code for .aspx page.
<script type="text/javascript">
$(document).ready(function () {
var x = $('.lclass').html();
var xaxis = ???;
var yaxis = ???;
var plot2 = $.jqplot('chart1', [xaxis], {
title: x,
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
seriesDefaults: {
rendererOptions: {
smooth: false
}
},
axes: {
xaxis: {
label: "Date",
numberTicks: 4,
tickOptions: {
formatString: '%MM:%DD'
},
pad: 0
},
yaxis: {
label: "GB"
}
}
});
});
</script>
Any help or guidance is appreciated. Thanks.
there are two general ways to solve this problem
Include the data as part of the rendered ASP.NET page. This is assuming the data will not change while the page is displayed for the user. The exact code to do it depends on technology you use and there is more than one way to do it. E.g. in razor that can be done like this
#Html.Raw(ViewBag.DataAsJson)
where you put the JSON represneation of your data as a string in your ViewBag.To turn your data to a JSON object, you can use NewtonSoft's library
You fetch the data from a RESTful service because you want the data to refresh without needing to refresh the page. Again there is more than one way to do this. One is to implement an ApiController and then in the client side use a AngularJS and $http service to fetch and use the data.
i want to display a Stockchart with Highcharts. To fill the chart with content i receive a JSON data file which contains data like:
[["2013-10-14 02:30:07",18.62],
["2013-10-14 02:15:07",18.69],
["2013-10-14 02:00:07",18.81],
["2013-10-14 01:45:06",18.91]]
My Script looks like this:
$function() {
$.getJSON('paht/to/data.json', function(data) {
$('#Chart_Temp').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
series : [{
color: '#DF013A',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
The Problem with that is, that the x-axis don't show the time properly. I had a look at the documentation and dateFormat - but i just can't get Highchart using the time properly.
Does anybody can help me out? That would be awesome.
here is a exapmle for datetime xAxis with timestamps,
xAxis: {
type: 'datetime'
},
http://jsfiddle.net/3yg8b/