I am working on a personal project creating graphs to show data about my music listening habits from Last FM's API.
I am grabbing the JSON data via an AJAX request and then using the returned JSON objects to populate a graph created using the Chartist.js JS library.
I'm having what I consider a quite straightforward issue in that I can't work out how to increase the overall size of the chart? To be more specific I'd like to increase the spacing between each scale point on the Y axis so that you can see more accurately what each figure is.
I have created the following JS Fiddle to show my problem:
http://jsfiddle.net/jt96usn9/
According to the documentation, I believe I need to change an option attribute known as scaleMinSpace but upon changing this figure no changes seem to occur.
Any help would be great?!
var lastfm = {};
lastfm.tracker = (function(){
//Set up an object for DOM elements and data source
var config = {
getRecentTracksURL: "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
getMostPopularArtistsURL: "http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
user: "jimmersjukebox",
recentTracksElement: $(".recent-tracks"),
currentlyPlayingActiveClass: $(".current")
};
var setupLastFM = function(){
createPopularArtistsChart();
};
var createPopularArtistsChart = function(){
$.getJSON(config.getMostPopularArtistsURL,function(data){
var artistData = data.topartists.artist,
artists = $.map(artistData, function(artist) {
return [[artist.name]];
}),
playcounts = $.map(artistData, function(playcount) {
return [[playcount.playcount]];
});
// These are the default options of the line chart
var options = {
// Options for X-Axis
axisX: {
// The offset of the labels to the chart area
offset: 10,
// If labels should be shown or not
showLabel: true,
// If the axis grid should be drawn or not
showGrid: true,
// Interpolation function that allows you to intercept the value from the axis label
labelInterpolationFnc: function(value){return value;}
},
// Options for Y-Axis
axisY: {
scaleMinSpace: 100
},
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
width: undefined,
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: undefined,
// If the line should be drawn or not
showLine: true,
// If dots should be drawn or not
showPoint: true,
// Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
lineSmooth: true,
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
low: undefined,
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
high: undefined,
// Padding of the chart drawing area to the container element and labels
chartPadding: 15,
// Specify the distance in pixel of bars in a group
seriesBarDistance: 15,
// Override the class names that get used to generate the SVG structure of the chart
};
data = {
// A labels array that can contain any sort of values
labels: artists.slice(0,10),
// Our series array that contains series objects or in this case series data arrays
series: [
playcounts.slice(0,10)
]
};
// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
Chartist.Bar('.ct-chart', data, options);
});
};
return{
config: config,
init: function(){
setupLastFM();
}
};
})();
$(window).load(lastfm.tracker.init);
/* Chartist.js 0.2.4
* Copyright © 2014 Gion Kunz
* Free to use under the WTFPL license.
* http://www.wtfpl.net/
*/
.ct-chart .ct-label{fill:rgba(0,0,0,.4);font-size:.75rem}.ct-chart .ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-chart .ct-point{stroke-width:10px;stroke-linecap:round}.ct-chart .ct-line{fill:none;stroke-width:4px}.ct-chart .ct-area{stroke:none;fill-opacity:.1}.ct-chart .ct-bar{fill:none;stroke-width:10px}.ct-chart .ct-slice.ct-donut{fill:none;stroke-width:60px}.ct-chart .ct-series.ct-series-a .ct-bar,.ct-chart .ct-series.ct-series-a .ct-line,.ct-chart .ct-series.ct-series-a .ct-point,.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut{stroke:#d70206}.ct-chart .ct-series.ct-series-a .ct-area,.ct-chart .ct-series.ct-series-a .ct-slice:not(.ct-donut){fill:#d70206}.ct-chart .ct-series.ct-series-b .ct-bar,.ct-chart .ct-series.ct-series-b .ct-line,.ct-chart .ct-series.ct-series-b .ct-point,.ct-chart .ct-series.ct-series-b .ct-slice.ct-donut{stroke:#F05B4F}.ct-chart .ct-series.ct-series-b .ct-area,.ct-chart .ct-series.ct-series-b .ct-slice:not(.ct-donut){fill:#F05B4F}.ct-chart .ct-series.ct-series-c .ct-bar,.ct-chart .ct-series.ct-series-c .ct-line,.ct-chart .ct-series.ct-series-c .ct-point,.ct-chart .ct-series.ct-series-c .ct-slice.ct-donut{stroke:#F4C63D}.ct-chart .ct-series.ct-series-c .ct-area,.ct-chart .ct-series.ct-series-c .ct-slice:not(.ct-donut){fill:#F4C63D}.ct-chart .ct-series.ct-series-d .ct-bar,.ct-chart .ct-series.ct-series-d .ct-line,.ct-chart .ct-series.ct-series-d .ct-point,.ct-chart .ct-series.ct-series-d .ct-slice.ct-donut{stroke:#453D3F}.ct-chart .ct-series.ct-series-d .ct-area,.ct-chart .ct-series.ct-series-d .ct-slice:not(.ct-donut){fill:#453D3F}.ct-chart.ct-square{display:block;position:relative;width:100%}.ct-chart.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-chart.ct-square:after{content:"";display:table;clear:both}.ct-chart.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-second{display:block;position:relative;width:100%}.ct-chart.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-chart.ct-minor-second:after{content:"";display:table;clear:both}.ct-chart.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-second{display:block;position:relative;width:100%}.ct-chart.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-chart.ct-major-second:after{content:"";display:table;clear:both}.ct-chart.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-third{display:block;position:relative;width:100%}.ct-chart.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-chart.ct-minor-third:after{content:"";display:table;clear:both}.ct-chart.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-third{display:block;position:relative;width:100%}.ct-chart.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-chart.ct-major-third:after{content:"";display:table;clear:both}.ct-chart.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-chart.ct-perfect-fourth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-chart.ct-perfect-fifth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-sixth{display:block;position:relative;width:100%}.ct-chart.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-chart.ct-minor-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-golden-section{display:block;position:relative;width:100%}.ct-chart.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-chart.ct-golden-section:after{content:"";display:table;clear:both}.ct-chart.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-sixth{display:block;position:relative;width:100%}.ct-chart.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-chart.ct-major-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-seventh{display:block;position:relative;width:100%}.ct-chart.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-chart.ct-minor-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-seventh{display:block;position:relative;width:100%}.ct-chart.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-chart.ct-major-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-octave{display:block;position:relative;width:100%}.ct-chart.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-chart.ct-octave:after{content:"";display:table;clear:both}.ct-chart.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-tenth{display:block;position:relative;width:100%}.ct-chart.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-chart.ct-major-tenth:after{content:"";display:table;clear:both}.ct-chart.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-eleventh{display:block;position:relative;width:100%}.ct-chart.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-chart.ct-major-eleventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-twelfth{display:block;position:relative;width:100%}.ct-chart.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-chart.ct-major-twelfth:after{content:"";display:table;clear:both}.ct-chart.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-double-octave{display:block;position:relative;width:100%}.ct-chart.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-chart.ct-double-octave:after{content:"";display:table;clear:both}.ct-chart.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}
<script src="//cdnjs.cloudflare.com/ajax/libs/chartist/0.2.4/chartist.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="chart-container">
<div class="ct-chart"></div>
</div>
if you give height in the options like
var options = {
seriesBarDistance: 10,
fullWidth: true,
showArea:true,
height:'500px'
};
new Chartist.Bar('.ct-chart', dataArray, options, responsiveOptions );
It will increase the overall height and spacing too.
Thanks
Kiran.
Related
So What I am doing is that I am taking timestamp data as X axis and the values as Y-axis.
but the problem arises is that the data is not displaying on the chart althogh the timestamp values are being displayed in the console, but not displaying on chart.
the data values are as follows:
var countArray = ["2020-14-03 11:14:48.225000","2020-14-03 11:14:48.226000","2020-14-03 11:14:48.227000","2020-14-03 11:14:48.228000","2020-14-03 11:14:48.229000","2020-14-03 11:14:48.230000","2020-14-03 11:14:48.231000","2020-14-03 11:14:48.232000","2020-14-03 11:14:48.233000","2020-14-03 11:14:48.234000","2020-14-03 11:14:48.235000","2020-14-03 11:14:48.236000","2020-14-03 11:14:48.237000","2020-14-03 11:14:48.238000","2020-14-03 11:14:48.239000","2020-14-03 11:14:48.240000","2020-14-03 11:14:48.241000","2020-14-03 11:14:48.242000","2020-14-03 11:14:48.243000","2020-14-03 11:14:48.244000"]; //X-axis Values
var numArray = [2,5,3,6,4,6,3,6,3,6,3,7,3,6,3,5,3,5,6,3] ; // Y-axis Values
Here is the Fiddle That I am trying.
https://jsfiddle.net/abnitchauhan/wq4na5fy/
the main problem is that the data is not displaying as per the values above
You have set the shift argument in the addPoint method to true, which, combined with an empty data array, causes that points do not appear.
if (x > 1000) {
series.addPoint([x, y], true, false, false);
}
Live demo: https://jsfiddle.net/BlackLabel/xhok1d6e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
You have to enable tooltip in highcharts option like below:
tooltip: {
enabled: true,
},
The tooltip's content is rendered from a subset of HTML.
Highcharts Tooltip document
Highcharts Tooltip API Reference
In a chart I render using Plotly.js, I define titles for each axis. When mouse hovering the items within the chart, a popup is shown, but the "labels" shown do not use the titles I had defined.
For example, the default value for the x axis is x. I defined hellox as title and that value is show in the chart, but not when mouse hovering a value (x is still shown).
See a live example here of what I mean: https://codepen.io/anon/pen/qoGQvx
I've been looking a the documentation and I didn't find anything so far that did exactly what I wanted: simply change the labels in the popup.
Also the question is quite old, I would like to write a solution I came up when facing the same problem. I did define a var text array for hover info which I filled with the labels for x, y and z values. Please have a look at the following fiddle where I use a heatmap plot for demonstration (this is what I am using in my project, but it can be easily adapted for your chart option): http://jsfiddle.net/zLc5y63g/
This is the html code:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
And this the JavaScript:
var zValues = [[1, 20, 30], [20, 1, 60], [30, 60, 1]];
var yValues = ['data1', 'data2', 'data3'];
var xValues = ['condition1', 'condition2', 'condition3'];
var config = {
displaylogo: false
};
// fill in 'text' array for hover
var text = zValues.map (function(zValues, i) { return zValues.map (function (value, j) {
return ` ID: ${yValues[i]}<br> Condition: ${xValues[j]}<br> Value: ${value.toFixed(2)} `
});
});
Plotly.newPlot('plotly_chart', [{x: xValues, y: yValues, z: zValues, text: text, hoverinfo: 'text', hoverlabel: {bgcolor: '#41454c'}, type: 'heatmap', colorscale: 'Viridis'}], config );
Maybe this is still useful.
I have several morris.js charts that populate from my databases depending on certain search terms. Im using the following code to build a "Legend" for my donut charts. The code works fine but Im struggling with adding both a number and text, I'm getting a console error:
ReferenceError: value not defined
Here is the code I'm currently using (works great):
// Build the Donut:
var donut = Morris.Donut({
element: 'donut',
data : donutParts,
colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['label']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
This will give me a legend with matching color squares with the appropriate labels eg:
[red] UK
But I want:
[red] # UK
I've tried using .integer and other variations like so:
// Build the Donut:
var donut = Morris.Donut({
element: 'donut',
data : donutParts,
colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['label']).integer(['value']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
But this gives me the error that value is not defined, i want to take the value(v) from donutParts
Here is my donutParts variable:
// Fetch the data to populate the donut chart:
var chartData = JSON.parse( $('#chartData').val() );
// Break up the object into parts of the donut:
var donutParts = [];
$.each( chartData, function(k,v){
donutParts.push({
label: k,
value: v
});
});
Any help? cheers!
ANSWER
The following code produces the desired output:
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
This is a SS of the legend output after implementing the given answer
Big thank you to #WillParky93
So what I said in the comments was technically wrong but after further reading this is what the 'donut.options.data.forEach' is doing.
Create an object dom of <span></span> -> add the text from label['label'] (which appears to be UK in your example) -> add some <i> tags.
THEN
Find the newly created tags -> add the CSS rule for background colour
THEN
add it to your #legend
So the solution was actually more simple when thinking of it like this; the answer be just this:
// Build the Legend:
donut.options.data.forEach(function(label, i){
var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i> </i>');
legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
$('#legend').append(legendItem)
})
The change is in .text(label['label']) which is now .text(label['value']+" "+label['label'])
I am working on a project using Sinatra based framework called Dashing. Part of my project is to create a graph using RickShaw Graph. My problem is that I am not able to display month names and dates on the X-Axis. I am using coffeescript to render these values. Here is the code for the graph:
class Dashing.Graph extends Dashing.Widget
#accessor 'points', Dashing.AnimatedValue
#accessor 'current', ->
return #get('displayedValue') if #get('displayedValue')
points = #get('points')
if points
points[points.length - 1].y
#ready is triggered when ever the page is loaded.
ready: ->
container = $(#node).parent()
# Gross hacks. Let's fix this.
width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
#graph = new Rickshaw.Graph(
element: #node
width: width
height: height
renderer: #get("graphtype")
series: [
{
color: "#fff",
data: [{x:0, y:0}]
}
]
)
#graph.series[0].data = #get('points') if #get('points')
time = new Rickshaw.Fixtures.Time()
days = time.unit("day")
x_axis = new Rickshaw.Graph.Axis.Time(
graph: #graph
timeUnit: days
)
y_axis = new Rickshaw.Graph.Axis.Y(graph: #graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
#graph.render()
From what I understood from the Rickshaw Graph API available here:
https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js
it says that you can specify the unit name. So for this instance I used "day" just for testing reasons, but this doesnt seem to be working.
Any help would be great.
You can specify a timeFixture which drives how the ticks on the x-axis should be labelled.
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time.Local()
} );
The fixture takes care of the time range being displayed and triggers the appropriate level of detail fo the date/time formatting, e.g. zooming in from years to hours.
You could also create your own 'time fixture' and set it there, take a look at Rickshaw.Fixtures.Time or Rickshaw.Fixtures.Time.Local
Alternatively, specify the fixed spacing aka 'unit's you always want to display:
var timeFixture = new Rickshaw.Fixtures.Time();
var unitHour = timeFixture.unit('hour');
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: graph,
timeUnit: unitHour,
timeFixture: timeFixture
} );
I have a gRaphael line chart which I update on click using the below function, the problem I have is that when I try to set the column values, it does not take effect. Like so...
var iniGraph = Raphael("graph"),
chart = iniGraph.linechart(
0,5,
$('#graph').width(),$('#graph').height(),
xVals,yVals,
{ nostroke: false, symbol: ["circle",""], width: 1.5, smooth: true, shade: true, colors: ['#008cc2', '#7500c6'] }
).hoverColumn(function(){
// AFTER UPDATE THESE VALUES STILL REMAIN UNCHANGED
console.log(this.values[0]+" | "+this.values[1]);
},function(){
// do nothing
});
function animateChart(graph,curChart,newX,newY)
{
// generate the new chart
var newChart = graph.linechart(
0,5,
$('#graph').width(),$('#graph').height(),
newX,
newY,
{ nostroke: false, symbol: ["circle",""], width: 1.5, smooth: true, shade: true, colors: ['#008cc2', '#7500c6'] }
);
// THIS DOES NOT WORK, THE ORIGINAL VALUES REMAIN AFTER UPDATE
curChart.eachColumn(function(){
this.values[0] = 12341234;
this.values[1] = 12341234;
});
// animate the symbols
$.each(curChart.symbols[0],function(i,symbol){
symbol.animate({ cx: newChart.symbols[0][i].attr("cx"),cy: newChart.symbols[0][i].attr("cy") }, 200);
});
// animate the lines
$.each(curChart.lines,function(i,line){
line.animate({ path: newChart.lines[i].attr("path") }, 200);
});
// remove the new chart
newChart.remove();
}
I create an initial graph and create the line chart, I then use the animateChart function to animate/update the line chart to it's new values, the problem I am running into is that on hover, the values remain unchanged after the animateChart function has run, so I am stuck with the initial values of the chart, which is not ideal, as I have to get the column values to update to the new values I specify.
So basically, how can I update the column values when I animate/update the line chart?
I'm kinda at the end of my rope... thanks.