can anybody help in adding an scolor i would be happy if u help me in doing
menu.setIconsPath("../common/imgs/");
menu.addNewSibling(null, "jan", "JAN"); //these jan to dec are button in menu bar
menu.addNewSibling("jan", "feb", "FEB"); //when it is clicked it must show in another
menu.addNewSibling("feb", "mar", "MAR"); //color
menu.addNewSibling("mar", "apr", "APR");
menu.addNewSibling("apr", "may", "MAY");
menu.addNewSibling("may", "jun", "JUN");
menu.addNewSibling("jun", "jul", "JUL");
menu.addNewSibling("jul", "aug", "AUG");
menu.addNewSibling("aug", "sep", "SEP");
menu.addNewSibling("sep", "oct", "OCT");
menu.addNewSibling("oct", "nov", "NOV");
menu.addNewSibling("nov", "dec", "DEC", false);
Try the next (not public) approach:
menu.attachEvent("onClick", function(id, zoneId, casState){
menu.idPull[menu.idPrefix+id].style.backgroundColor = '#FFC000';
});
Related
i want to group my date Month but i don't know how to do that. i try used groupBy() but its giving me a error
$user = Auth::user()->id;
$date = productSold::where('user_id',$user)->get();
$collect = collect($date)->map(function ($date) {
return date('M',strtotime($date->created_at))->groupBy('created_at');
});
return $collect;
error :
Call to a member function groupBy() on string
without groupby this is the output :
[
"Oct",
"Oct",
"Nov",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec",
"Dec"
]
i want to group "Oct", "Nov", "Dec"
Its error because you group by it from a string. So you should take out groupBy statement from map function. So the result should be like :
$collect = collect($date)->map(function ($date) {
return [
"created_at" => date('M',strtotime($date->created_at))
];
})->groupBy('created_at');
The result should be like this.
I have 3 queries.
1) How to add custom colors in a bar chart? In the attached image for example, I want to add different colors for Metric Pink and Blue.
2) I want to show a horizontal line as goal/target value for e.g. at 3.0k on y-axis.
3) The chart should render the x-axis values in order of Jan,Feb,Mar,Apr which is not happening now. Please advise.
<div class="row">
<div id="test" class="column">
<h2> Pink and Blue Distribution</h2>
<script type="text/javascript">
var svg = dimple.newSvg("#test", 590,400);
var json = JSON.parse('${rlog}');
var data = [
{"Month": "Jan", "Metric": "Pink", "Value": 200},
{"Month": "Feb", "Metric": "Pink", "Value": 320},
{"Month": "Mar", "Metric": "Pink", "Value": 200},
{"Month": "Apr", "Metric": "Pink", "Value": 320},
{"Month": "Jan", "Metric": "Blue", "Value": 1000},
{"Month": "Feb", "Metric": "Blue", "Value": 2500},
{"Month": "Mar", "Metric": "Blue", "Value": 1500},
{"Month": "Apr", "Metric": "Blue", "Value": 3001}
];
var chart = new dimple.chart(svg, data);
chart.setBounds(80, 30, 480,330);
var x = chart.addCategoryAxis("x",["Month","Metric"]);
var y1 = chart.addMeasureAxis("y", "Value");
var bars = chart.addSeries("Metric", dimple.plot.bar, [x, y1]);
bars.barGap = 0.5;
chart.addLegend(65, 10, 510, 20, "right");
chart.draw();
</script>
</div>
</div>
Try this out
http://jsfiddle.net/cmubick/n5x0gkdy/
1) custom colors:
chart.assignColor("Pink","pink");
chart.assignColor("Blue","blue");
2) horizontal line at Value = 3000:
var line = chart.addSeries("Line", dimple.plot.line);
line.data = [
{ "Line" : "line", "Month": "Jan", "Metric": "Blue", "Value" : 3000 },
{ "Line" : "line", "Month": "Apr", "Metric": "Blue", "Value" : 3000 }
];
3) sort x-axis by month
x.addOrderRule(["Jan", "Feb", "Mar", "Apr"]);
For 2) you could use something like this below for adding horizontal line(s). I use the following code for generating rules (horizontal grid line)
var rule = svg.selectAll("g.rule")
.data(y.ticks(5))
.enter().append("svg:g")
.attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
rule.append("svg:line")
.attr("x2", width)
.style("stroke", function(d) { return '#f00' }) //return my own color
.style("stroke-width", 0.5)
.style("stroke-opacity", function(d) { return 1; }); //you could return 0 for ticks where you do not want rules, or some other condition
I am trying to use Chart Helper in ASP.NET MVC3. But problem i am facing is,only the concerned chart is displayed without the master page.
My code is :
Controller
public ActionResult Chart()
{
Chart chart = new Chart(width: 600, height: 400)
.AddTitle("Chart")
.AddSeries(
chartType: "line",
legend: "Rainfall",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" }).AddSeries(chartType: "line", yValues: new[] { "30", "40", "50", "60", "70" }).Write("png");
return null;
}
View
#model dynamic
#{
ViewBag.Title = "Chart";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Chart</h2>
<h2>About</h2>
<p><img src="#Url.Action("Chart")" alt="hello chart" /></p>
Please help me to find where i am going wrong.
Thanks in Advance
You need to return the chart as an image. Try this:
public ActionResult Chart()
{
Chart chart = new Chart(width: 600, height: 400)
.AddTitle("Chart")
.AddSeries(
chartType: "line",
legend: "Rainfall",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" }).AddSeries(chartType: "line", yValues: new[] { "30", "40", "50", "60", "70" })
.GetBytes("png");
return File(chart, "image/png");
}
I want to set interval to 1 on my chart (using System.Web.Helpers) in mvc3 .net c#.
i cant find chart property to set the interval so that the x/yValues show all the labels.
Here the code:
Chart key = new Chart(width: 600, height: 400)
.AddSeries(
chartType: "bar",
legend: "Rainfall",
xValue: xVal, //new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: yVal
) //new[] { "20", "20", "40", "30", "10" })
.AddTitle("Chart Success Rate")
.Write("png");
Any help would be much appreciate.
Thanks.
You can do it with "theme" string. I have tested OK with it.
Just add a Interval=""1"" to the theme xml.
See this post: http://forums.asp.net/t/1807781.aspx/1 see the 6th floor reply (May 27, 2012 11:23 AM)
my test code:
public ActionResult GetChartCategoryCountList1()
{
string temp = #"<Chart>
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"">
<AxisY>
<LabelStyle Font=""Verdana, 12px"" />
</AxisY>
<AxisX LineColor=""64, 64, 64, 64"" Interval=""1"">
<LabelStyle Font=""Verdana, 12px"" />
</AxisX>
</ChartArea>
</ChartAreas>
</Chart>";
using (var context = new EdiBlogEntities())
{
var catCountList = context.GetCategoryCountList().ToList();
var bytes = new Chart(width: 850, height: 400, theme: temp)
.AddSeries(
xValue: catCountList.Select(p => p.DisplayName).ToArray(),
yValues: catCountList.Select(p => p.PostCount).ToArray()
)
.GetBytes("png");
return File(bytes, "image/png");
}
}
I have to display a graph with date on the X axis and Amt on the Y axis. There will be 8 lines (series) each with n months data.
When I plot the graph I am sending in 6 months data for sure.( one line's data is shown below)
[1251701950000, 34.50553]
[1254294030000, 27.014463]
[1256972350000, 26.7805]
[1259567970000, 33.08871]
[1262246430000, 51.987762]
[1264924750000, 56.868233]
However the graph shows up like this http://twitpic.com/1gbb7m
The first months label is missing and last month is not aligned correctly, my flot js code is as follows
$.plot($("#lgdGraphTab"),graphData, {
xaxis: {
mode: "time",
timeformat: "%b-%y",
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
minTickSize: [1, "month"]
},
yaxis : {
tickSize: 5
},
series: {
lines: { show: true , shadowSize:0},
points: { show: true }
},
legend:{
container: $('#legendArea'),
noColumns:8
},
clickable: true,
hoverable: true
});
All of the timestamps in your data hold the last day of each month rather than the 1st. I believe this is the cause of your problem.