We Keep Coding

zooming/blowup and panning option in chart.js on category scales

i am using chart.js for making the charts. i have successfully done the graph things. Just i want a help in this regard that sometimes there could be just 30-40 points to plot. but usually there are about 1000 points.
So what is the good option which i can use for better analysis for this reporting tool. Like is there any option of blow up specific point or i can use a scroll to scroll my chart and expand it horizontally, a very large.
this is my chart image.
u can see there are many points and all are congested. i want to know what is the suitable solution.
This is my chart configuration in which i have set it to the responsive.
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
Update: After searching and creating an issue on the official chartjs git repository . This is not possible for the category/simple x-axis lines. This mean you cannot add pan through the chart in this way using the category/simple scales on x-axis. however zooms still works fine.
Editing this question for the future readers.
P.s: Leave a comment in case of negative voting.

Check out chartjs-plugin-zoom. It is a plugin that adds the capability to zoom in/out and pan left/right/up/down to view the rest of your data that is not currently displayed on the zoomed chart.
Here is a live codepen example.
I'm not sure it will do exactly what you need, but its a great place to start (you can use this as a base and extend it to your needs). This plugin is also developed/supported by the same team as chart.js.

How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?

I tried to find a lot about this but didn't get the answer. For waterfall charts in Highcharts
legend: {
enabled: true
}
didn't seem to work. Can you suggest how can we display legend on a waterfall chart? Also, can we have the value of 'y' for every column displayed on top of the column, instead of being displayed on the column? For this change, with most of the other charts,
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
}
But this didn't work with waterfall charts.
And finally, is there a way we can make the sum bar look like an aggregate of the other bars in terms of color as well? Like, in the example shown -
My code is here - http://jsfiddle.net/yr779/236/

I am not sure what you are asking regards to the legend. Your jsFiddle is showing a legend - you only have one series "Series 1" and it is in the legend. To display the value of each waterfall you need to use the correct plotOptions:
plotOptions: {
waterfall: {
dataLabels: {
enabled: true,
crop: false,
inside: false,
overflow: 'none'
}
}
},

Google Chart - Dim all other series except the one on which mouse is hovered

I am using google charts to plot graphs. I am new to the wold of UI development & javascript. I've looked on the internet & managed to get graphing going. I am in the need to do the below
1) I have a line graph that has 9 series in it. When I hover on any one series, I like the others to be dimmed
2) Wen I move the mouse away, the original look should be restored to the graph.
I have been able to find examples for highcarts mainly. I'm struggling to implement something similar for google charts. Could I please request help to implement this?
Here is my code to plot the graph.
<script type="text/javascript">
window.onresize = function(){
startDrawingChart();
};
window.onload = function(){
startDrawingChart();
};
startDrawingChart = function(){
// Load the Visualization API AND the piechart package.
google.load("visualization", "1", {packages:["corechart"],callback: drawChart});
function drawChart() {
// Create our data table out of JSON data loaded FROM server.
var data_1 = google.visualization.arrayToDataTable([<?php echo (implode(",", $array_0)); ?>]);
var options_line = {
chartArea: {
left: 70,
top: 61,
width: '95%',
height: '60%'
},
curveType: 'function',
//width: 1600,
height: 400,
pointSize: 4,
lineWidth: 2,
visibleInLegend: false,
vAxis: {
//title: "GC#",
//logScale: true,
titleTextStyle: {
color: 'black'
}
},
hAxis: {
title: "TIMELINE",
titleTextStyle: {
bold: false,
color: 'black'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: 'blue'
},
is3D: true
},
series: {5: {type: "line"}},
};
{position: 'top', alignment: 'center'},
bar: {groupWidth: '3%'},
is3D: true
};
var chart_1 = new google.visualization.ComboChart(document.getElementById('plot1'));
chart_1.draw(data_1, options_line);
}
};
</script>

If you click on the chart, this is easy. Just use the select event and change all the other series' colours to a lighter shade. If you're interested I could possibly write an answer around this, but your question specified hover.
You could possibly use CSS selectors like this completely different situation, but it would be pretty complicated to write in straight CSS. I don't really know LESS, SASS, SCSS, or COMPASS to be able to say if these tools would make it any easier, but they might.
I would take the approach of putting a hover selector on the whole thing that changes the colours of the SVG elements that make all the series, and then write a more specific rule that sets your hovered-over series back to normal.
It's been my experience that making visual changes to Google Charts that are not implemented as features of the chart is difficult, because they don't put any id's or classes on anything. So you can use CSS or jQuery selectors to try and find pieces of the chart - using colours seems to be an effective way of differentiating the SVG elements from series to series - but it is possible that you will get false positives or miss elements with dynamic charts. Being different all the time makes them hard to test.

JQPlot Legend outside of graph

I am using JQPlot and I have many graphs on one HTML page. Each of the graphs has the same legend.
My question is this: Is it possible to display a legend totally outside of the graph with its own position on the HTML page or in its own div?

legend:{
show:true,
renderer: $.jqplot.EnhancedLegendRenderer,
location: 's' ,
placement : "outside",
marginTop : "30px",
rendererOptions: {
numberRows: 1
}
},
You can use placement : "outside" like in the above code. And you can move it using marginTop,marginBottom,marginRight,marginLeft properties.

Maybe you could hide the legend of the 2nd to the last graph, like this:
legend: { show:false}
and in the 1st graph, put something like:
legend:{
show:true,
placement: 'outside',
rendererOptions: {
numberRows: 1
},
location:'n'
This way you will only show one legend at the top of the graphs.

Are you looking for title? You can style .jqplot-title to appear differently. It appears outside of the graph by default.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
});
You could also restyle the legend. See table.jqplot-table-legend at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html

ExtJS Area Charts - Instead of stacking the areas on top of each other, how do I super impose all areas together with a different opacity?

I'm creating an area chart using ExtJS 4.1 and everything is rendering fine.
I have two areas and currently one area appears on top of another.
Instead of that behavior, how do I superimpose all the areas? I can change the opacity so that all areas are visible.
The examples given in the API documentation and several online sources show the stacked behavior only. Is that the default and only implementation of the area charts, or am I missing a simple configuration?
As seen in Area Charts Example, instead of all colored areas appearing one after another, I want them all in a single plane.
Kindly provide your inputs and suggestions.

Use Line chart with fill instead. Works for me.

This can be done using creating additional series instead of a single area series with an array of data points in y axis. Got the answer from Sencha forums.
series: [
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1'],
style: {
opacity: 0.50
}
},
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data2'],
style: {
opacity: 0.70
}
}