Related
I have a dataset as follows,
Timestamp Value Importance
5/22/2022 4:19 3245 0.0234
5/22/2022 4:09 3246 0.0214
5/22/2022 4:09 3247 0.1234
5/22/2022 3:59 3248 0.0534
5/22/2022 3:59 3249 0.1234
5/22/2022 3:49 3250 0.0244
5/22/2022 3:49 3251 0.4234
5/22/2022 3:39 3252 0.0534
5/22/2022 3:39 3253 0.0234
5/22/2022 3:29 3254 0.4234
5/22/2022 3:29 3255 0.8234
5/22/2022 3:19 3256 0.1234
5/22/2022 3:19 3257 0.0534
5/22/2022 3:09 3258 0.0334
5/22/2022 3:09 3259 0.0234
5/22/2022 2:59 3260 0.0234
I need to show this in a line graph in my php file but I need to highlight point radius according to their importance value, further I need to neglect highlighting all the points which are less than 0.2. So I have searched and found below configuration class from https://quickchart.io/documentation/ but I could not achieve what I need exactly. This will highlight different datasets but not some points only in same dataset.
{
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'dataset - big points',
data: [-15, -80, 79, -11, -5, 33, -57],
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
fill: false,
borderDash: [5, 5],
pointRadius: 15,
pointHoverRadius: 10,
},
{
label: 'dataset - individual point sizes',
data: [-86, 59, -70, -40, 40, 33, 16],
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
fill: false,
borderDash: [5, 5],
pointRadius: [2, 4, 6, 18, 0, 12, 20],
},
{
label: 'dataset - large pointHoverRadius',
data: [59, -65, -33, 0, -79, 95, -53],
backgroundColor: 'rgb(75, 192, 192)',
borderColor: 'rgb(75, 192, 192)',
fill: false,
pointHoverRadius: 30,
},
{
label: 'dataset - large pointHitRadius',
data: [73, 83, -19, 74, 16, -12, 8],
backgroundColor: 'rgb(255, 205, 86)',
borderColor: 'rgb(255, 205, 86)',
fill: false,
pointHitRadius: 20,
},
],
},
options: {
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Chart.js Line Chart - Different point sizes',
},
},
}
Can someone show me how to use above example with my dataset to achieve what I Need?
With Chart.js, you can use pointRadius as a scriptable option.
For example, you can set pointRadius dynamically based on the value:
pointRadius: function (context) {
const index = context.dataIndex;
const value = context.dataset.data[index];
if (value < 0.2) {
return 0;
}
if (value > 0.5) {
return 20;
}
return 10;
}
Link to example in the QuickChart chart editor
In your case, use scriptable pointRadius to implement logic that returns a point size based on the value (e.g., by looking it up in a table of importance).
I have design a simple graph with chart.js, Which looking cool.
But now i want to show their data between one Month to another Month.
Means their are following data:
1th january, 2017 : 12
3rd January, 2017: 16
And so on..
now i want to show their January to February data as image,which is shown below:
Here is my simple code
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January 2017", "February 2017", "March 2017", "April 2017", "May 2017", "June 2017", "July 2017"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132,0.25)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 15],
lineTension:0
}]
},
// Configuration options go here
options: {}
});
jsfiddle Here : https://jsfiddle.net/2qxj9t00/2/
I've google so many times but no any solution are their, so kindly suggest me. Thanks :)
You can accomplish this using the following x-axis ticks callback function ...
ticks: {
callback: function(e) {
var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
if (tick != aR) {
aR = tick;
return tick;
}
}
}
assuming your labels array would look somewhat like this.. ["1st January 2017", "3rd January 2017", "4th February 2017", ...]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var aR = null; //store already returned tick
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1st January 2017", "3rd January 2017", "4th February 2017", "9th February 2017", "3rd March 2017", "15th March 2017"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
data: [12, 16, 10, 11, 9, 15],
lineTension: 0
}]
},
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false,
callback: function(e) {
var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
if (tick != aR) {
aR = tick;
return tick;
}
}
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
I have a Google Line chart that produces a number of tweets by time. As you can see, it does not currently show the 30 minute intervals. How do I get it to say 6:30am, 7:30am, etc... Also, how do I default it to switch between 6am and say 6:30am but all the way across the chart. For example, if the most recent was at 6:30am, then all of them should read on the 30 (7:30am, 8:30am, etc.)
{"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 8, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 8, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]}
Google Charts Code:
<table class="graph-table">
<tr><td class="headerspacing2" colspan="3"><span class="header">Tweet Volume</span></td></tr>
<tr align="center"><td colspan="2">
<div id="curve_chart" style="width: 1280px; height: 430px">
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (60000));
function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
var data = new google.visualization.DataTable(txt);
data.sort([{column: 0, desc:true}]);
var options = {
curveType: 'function',
hAxis: {
format: 'H, m',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
count: -1,
color: 'transparent'
},
},
vAxis: {
gridlines: {
color: '#7acdd0',
count: 1
},
textPosition: 'none'
},
emphasis: {
'color':'#000000',
},
pointSize: 15,
chartArea: {'width': '92%', 'height': '85%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
annotations: {
stemColor : 'none'
},
'tooltip' : {
trigger: 'none'
},
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});
</script>
</div>
</td></tr>
</table>
use the hAxis.ticks configuration option to set custom labels on the x-axis
each tick should be the same data type as the x-axis column
so you can pull the values of data
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
tickMarks.push(data.getValue(i, 0));
}
depending on the format of the labels, you may need to adjust the chartArea
see following working snippet...
google.charts.load('current', {
callback: function () {
txt = {"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 7, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 7, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]};
var data = new google.visualization.DataTable(txt);
data.sort([{column: 0, desc:true}]);
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
tickMarks.push(data.getValue(i, 0));
}
var options = {
annotations: {
stemColor : 'none'
},
chartArea: {
width: '92%',
height: '70%'
},
colors: ['#7acdd0'],
curveType: 'function',
emphasis: {
color: '#000000'
},
hAxis: {
format: 'H:mm a',
gridlines: {
count: -1,
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 14
},
ticks: tickMarks
},
height: 400,
legend: {
position: 'none'
},
lineWidth: 5,
pointShape: 'circle',
pointSize: 15,
tooltip : {
trigger: 'none'
},
width: 1280,
vAxis: {
gridlines: {
color: '#7acdd0',
count: 1
},
textPosition: 'none'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
When I attempt to render the chart with data passed back form ajax, I receive the error, "Uncaught TypeError: Cannot read property 'getTime' of undefined".
$.ajax({
type : 'POST',
url : 'admin-controllers/chart-contorller.php',
dataType : 'json',
encode : true
})
.done(function(data) {
alert('contorller');
if ( success) {
var dataPoints = data.graphData;
console.log(dataPoints);
var chart = new CanvasJS.Chart("timeToSetChart", {
title:{
text: "User Time to initialy set DNS",
fontSize: 20,
},
axisX:{
labelFontSize: 12
},
axisY: {
title: "Number of users",
titleFontSize: 14,
labelFontSize: 12
},
data: [{
type : 'column',
dataPoints: data.graphData
}]
});
chart.render();
}
my string data.graphData comes back as:
[{x: 10, y: 0, label: "1hours"},{x: 20, y: 0, label: "2hours"},{x: 30, y: 16, label: "6hours"},{x: 40, y: 0, label: "12hours"},{x: 50, y: 0, label: "24hours"},{x: 60, y: 0, label: "2days"},{x: 70, y: 0, label: "3days"},{x: 80, y: 0, label: "4days"},{x: 90, y: 0, label: "5days"},{x: 100, y: 0, label: "6days"},{x: 110, y: 0, label: "7days"},{x: 120, y: 3, label: "8plusdays"},]
Which when I paste it into the dataPoints variable it works fine.
I have searched the high and low in Stackoverflow for a fix on this date problem. I'm really struggling to get the date to display on the chart with the points being correctly set onto them.
Here is the JS Script:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'drawing',
zoomType: 'x',
width: 900,
height: 222
},
exporting: {
enabled: true
},
title: {
text: url+' - '+keyword
},
credits: {
text: 'Testing',
href: ''
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
reversed: true,
title: {
text: 'Rankings'
}
},],
tooltip: {
crosshairs: true,
shared: true
},
series: [{}]
};
var url = "****/chart.php";
$.getJSON(url, function(data1){
options.series = data1;
var chart = new Highcharts.Chart(options);
});
});
This is what our PHP Script Generated for the JSON
[{"name":"Google Rank","data":[["Date.UTC(2013, 3, 08)",23],["Date.UTC(2013, 3, 05)",24],["Date.UTC(2013, 3, 04)",23],["Date.UTC(2013, 3, 03)",22],["Date.UTC(2013, 3, 02)",24],["Date.UTC(2013, 3, 01)",26],["Date.UTC(2013, 2, 31)",24],["Date.UTC(2013, 2, 30)",24],["Date.UTC(2013, 2, 29)",25],["Date.UTC(2013, 2, 28)",25],["Date.UTC(2013, 2, 27)",25],["Date.UTC(2013, 2, 26)",26],["Date.UTC(2013, 2, 25)",25],["Date.UTC(2013, 2, 24)",24],["Date.UTC(2013, 2, 23)",0],["Date.UTC(2013, 2, 22)",10],["Date.UTC(2013, 2, 21)",10],["Date.UTC(2013, 2, 20)",10],["Date.UTC(2013, 2, 19)",10],["Date.UTC(2013, 2, 18)",10],["Date.UTC(2013, 2, 17)",10],["Date.UTC(2013, 2, 16)",9],["Date.UTC(2013, 2, 15)",9],["Date.UTC(2013, 2, 14)",9],["Date.UTC(2013, 2, 13)",9]],"visible":true,"pointInterval":86400000,"showInLegend":true},{"name":"Bing Rank","data":[["Date.UTC(2013, 3, 08)",0],["Date.UTC(2013, 3, 05)",0],["Date.UTC(2013, 3, 04)",0],["Date.UTC(2013, 3, 03)",0],["Date.UTC(2013, 3, 02)",0],["Date.UTC(2013, 3, 01)",0],["Date.UTC(2013, 2, 31)",0],["Date.UTC(2013, 2, 30)",0],["Date.UTC(2013, 2, 29)",0],["Date.UTC(2013, 2, 28)",0],["Date.UTC(2013, 2, 27)",0],["Date.UTC(2013, 2, 26)",0],["Date.UTC(2013, 2, 25)",0],["Date.UTC(2013, 2, 24)",0],["Date.UTC(2013, 2, 23)",0],["Date.UTC(2013, 2, 22)",0],["Date.UTC(2013, 2, 21)",0],["Date.UTC(2013, 2, 20)",0],["Date.UTC(2013, 2, 19)",0],["Date.UTC(2013, 2, 18)",0],["Date.UTC(2013, 2, 17)",0],["Date.UTC(2013, 2, 16)",0],["Date.UTC(2013, 2, 15)",0],["Date.UTC(2013, 2, 14)",0],["Date.UTC(2013, 2, 13)",0]],"visible":true,"pointInterval":86400000,"showInLegend":true},{"name":"Yahoo Rank","data":[["Date.UTC(2013, 3, 08)",0],["Date.UTC(2013, 3, 05)",0],["Date.UTC(2013, 3, 04)",0],["Date.UTC(2013, 3, 03)",0],["Date.UTC(2013, 3, 02)",0],["Date.UTC(2013, 3, 01)",0],["Date.UTC(2013, 2, 31)",0],["Date.UTC(2013, 2, 30)",0],["Date.UTC(2013, 2, 29)",0],["Date.UTC(2013, 2, 28)",0],["Date.UTC(2013, 2, 27)",0],["Date.UTC(2013, 2, 26)",0],["Date.UTC(2013, 2, 25)",0],["Date.UTC(2013, 2, 24)",0],["Date.UTC(2013, 2, 23)",0],["Date.UTC(2013, 2, 22)",0],["Date.UTC(2013, 2, 21)",0],["Date.UTC(2013, 2, 20)",0],["Date.UTC(2013, 2, 19)",0],["Date.UTC(2013, 2, 18)",0],["Date.UTC(2013, 2, 17)",0],["Date.UTC(2013, 2, 16)",0],["Date.UTC(2013, 2, 15)",0],["Date.UTC(2013, 2, 14)",0],["Date.UTC(2013, 2, 13)",0]],"visible":true,"pointInterval":86400000,"showInLegend":true}]
In JSON you cannot use functions like Date.UTC(), so I advice to use timestamp number.